Przejdź do treści

Wdrożenie data layer do śledzenia ruchu na stronie

Ogólne wytyczne

W tym artykule znajdziesz szczegółowe wytyczne, jak wdrożyć niezbędne zdarzenia data layer (warstwy danych), aby skutecznie śledzić interakcje użytkowników w Twoim e-sklepie. Dzięki temu przewodnikowi zrozumiesz, jakie dane zbierać, jak je uporządkować i w którym momencie wysyłać.

Implementacja jest zgodna z nazwami zdarzeń i strukturą danych, które zaleca Google dla śledzenia w e-commerce:

  • Nazwy zdarzeń – możesz używać nazw sugerowanych przez Google Analytics, aby zachować spójność lub stosować własne nazewnictwo.
  • Data layer – wszystkie zdarzenia powinny być przesyłane do obiektu dataLayer.
  • Waluta – używaj trzyliterowych kodów walut ISO 4217 (np. „PLN”).
  • Właściwości – upewnij się, że wszystkie właściwości są dokładnie odwzorowane, zgodnie ze specyfikacją.
  • Dane użytkownika – jeśli użytkownicy są zalogowani, dołączaj zahaszowane dane na ich temat.

Spójność danych o produkcie między zdarzeniami

Aby śledzenie i analiza danych były dokładne, informacje o produkcie muszą być takie same we wszystkich zdarzeniach, w których ten produkt występuje. Dotyczy to zwłaszcza cechy item_id. Na przykład:

  • Gdy użytkownik wchodzi na stronę produktu i uruchamia się zdarzenie view_item, a potem dodaje ten sam produkt do koszyka, item_id w zdarzeniach view_item i add_to_cart musi być identyczny.
  • Ta sama zasada dotyczy zdarzeń takich jak remove_from_cart, view_cart i purchase, gdzie produkt jest przywoływany.

O czym warto pamiętać:

  1.  item_id musi być spójne we wszystkich zdarzeniach dla tego samego produktu.
  2. Pozostałe dane produktu, takie jak productGroupId, productName i price, również powinny być spójne.

Dzięki zachowaniu spójności masz pewność, że działania użytkownika związane z konkretnym produktem są dokładnie śledzone na całej jego ścieżce zakupowej – od wyświetlenia produktu aż po jego zakup.

Wykorzystanie istniejących integracji Google Analytics

Większość sklepów e-commerce ma już wdrożoną integrację z Google Analytics do śledzenia interakcji użytkowników, takich jak wyświetlenia produktów, dodania do koszyka czy zakupy.

Zdarzenia używane w ECDP pokrywają się z tymi powszechnie używanymi w e-commerce przez Google Analytics, co oznacza, że w wielu przypadkach nie trzeba tworzyć żadnych nowych zdarzeń.

Data layer nie zawsze jest w sklepach prawidłowo skonfigurowany, co prowadzi do zbierania niekompletnych danych. Aby nasz skrypt śledzący zbierał prawidłowe dane zweryfikuj, czy obecna konfiguracja zdarzeń w Twoim sklepie spełnia poniższe wytyczne.

Opcja prefiksu zdarzenia (_ecdp)#

Jeśli wolisz pozostawić istniejącą konfigurację Google Analytics bez zmian lub chcesz utworzyć osobne zdarzenia specjalnie dla naszej platformy, możesz po prostu dodać do każdego zdarzenia prefiks _ecdp:

  • view_item → _ecdp_view_item
  • add_to_cart → _ecdp_add_to_cart
  • remove_from_cart → _ecdp_remove_from_cart
  • view_cart → _ecdp_view_cart
  • purchase → _ecdp_purchase

Za pomocą prefiksu utrzymany jest osobna ścieżka danych dla ECDP, jednak oparta o istniejącą konfigurację. Główna struktura zdarzenia pozostaje taka sama, co zmniejsza ilość dodatkowej pracy po stronie programistów.

Wymagane zdarzenia#

  • view_item
  • add_to_cart
  • remove_from_cart
  • view_cart
  • purchase

Dodatkowe zdarzenia dla funkcjonalności „Lista ulubionych” (jeśli jest dostępna)#

  • add_to_wishlist
  • remove_from_wishlist
  • view_wishlist

Specyfikacje zdarzeń dataLayer

Wyświetlenie szczegółów produktu (view_item)

Zdarzenie jest wywoływane, gdy użytkownik wyświetla stronę szczegółów produktu lub wybiera jego inny wariant (np. rozmiar, kolor).

Kiedy wywołać zdarzenie:

  • Przy pierwszym wczytaniu strony ze szczegółami produktu.
  • Gdy użytkownik wybiera inną konfigurację produktu.
dataLayer.push({
  "event": "view_item",
  "ecommerce": {
    "currency": "PLN",
    "items": [{
      "item_id": "BA1234",                   // ID produktu 
      "item_group_id": "grupa123",           // ID grupy produktów
      "item_variant": "BA1234_43",           // ID wariantu produktu
      "item_name": "Adidas Stan Smith",      // Nazwa produktu 
      "price": 100.00,                       // Cena sprzedaży 
      "original_price": 120.00,              // Cena regularna 
      "omnibus_price": 95.00,                // Cena omnibus  (if applicable)
      "currency": "PLN",
      "item_category": "Buty",              // Pierwsza kategoria 
      "item_category2": "Męskie",               // Druga kategoria 
      "item_category3": "Sneakersy",          // Trzecia kategoria 
      "image_url": "https://twojsklep.pl/images/adidas-stan-smith.jpg",
      "availability": true            // Dostępność (isAvailable, użyj "true"/"false") 
    }]
  }
});

Definicje właściwości:

  • availability – dostępność, przyjmuje wartość „true” lub „false”.
  • item_id – unikalny identyfikator produktu.
  • item_group_id: unikalny identyfikator grupy produktów.
  • item_variant – unikalny identyfikator wariantu produktu.
  • item_name – nazwa produktu wyświetlana użytkownikowi.
  • price – aktualna cena promocyjna produktu.
  • original_price – cena regularna przed ewentualnymi zniżkami.
  • omnibus_price – najniższa cena z ostatnich 30 dni (jeśli dotyczy).
  • item_category – główna kategoria produktu.
  • image_url – adres URL zdjęcia produktu.

Uwagi:

  • Dołącz original_price oraz price nawet jeśli są takie same (gdy produkt nie jest objęty zniżką).
  • Dołącz omnibus_price jeśli ta informacja jest dostępna. W przeciwnym razie pomiń to pole lub ustaw jego wartość na null.
  • item_category2 oraz item_category3 są opcjonalne i mogą zawierać podkategorie.
  • Upewnij się, że item_id pozostaje takie samo w kolejnych zdarzeniach dotyczących tego produkty, jak add_to_cart czy purchase.

Wybór wariantu produktu (select_item)

Zdarzenie jest wywoływane, gdy użytkownik wybiera inny wariant produktu na stronie szczegółów produktu.

Kiedy wywołać zdarzenie:

  • Gdy użytkownik zmienia konfigurację produktu, np. wybiera inny rozmiar lub kolor.

Struktura danych:

dataLayer.push({
  "event": "select_item",
  "ecommerce": {
    "currency": "PLN",
    "items": [{
      "item_id": "BA1234",
      "item_group_id": "grupa123",
      "item_variant": "BA1234_44",
      "item_name": "Adidas Stan Smith rozmiar 44",
      "price": 100.00,
      "original_price": 120.00,
      "omnibus_price": 95.00,
      "currency": "PLN",
      "item_category": "Buty",
      "item_category2": "Męskie",
      "item_category3": "Sneakersy",
      "image_url": "https://twojsklep.pl/images/adidas-stan-smith-44.jpg",
      "availability": true
    }]
  }
});

Uwagi:

  • To zdarzenie pomaga śledzić preferencje użytkowników dotyczące różnych konfiguracji produktów.
  • Upewnij się, że właściwość item_variant odzwierciedla wybrany wariant.

Dodanie do koszyka (add_to_cart)

Zdarzenie jest wywoływane, gdy użytkownik dodaje jeden lub więcej produktów do koszyka.

Kiedy wywołać zdarzenie:

  • Gdy użytkownik potwierdzi dodanie produktu do koszyka.

Struktura danych:

dataLayer.push({
  "event": "add_to_cart",
  "ecommerce": {
    "currency": "PLN",
    "items": [{
      "item_id": "BA1234",
      "item_group_id": "grupa123",
      "item_variant": "BA1234_43",
      "item_name": "Adidas Stan Smith",
      "price": 100.00,
      "original_price": 120.00,
      "omnibus_price": 95.00,
      "quantity": 1
    }]
  }
});

Cecha quantity to liczba sztuk dodanych do koszyka (powinna być liczbą całkowitą dodatnią).

Uwagi:

  • Uwzględnij wszystkie odpowiednie właściwości produktu jak w zdarzeniu view_item.
  • Jeśli jednocześnie dodawanych jest kilka produktów, każdy z nich umieść jako osobny obiekt w tablicy items.
  • Upewnij się, że item_id w tym zdarzeniu jest takie samo jak item_id użyte w zdarzeniu view_item dla tego samego produktu.

Usunięcie z koszyka (remove_from_cart)

Zdarzenie jest wywoływane, gdy użytkownik usuwa jeden lub więcej produktów z koszyka.

Kiedy wywołać zdarzenie:

  • Gdy użytkownik potwierdzia usunięcie produktu z koszyka.
  • Gdy użytkownik usuwa wiele produktów lub czyści cały koszyk. takim przypadku jedno zdarzenie remove_from_cart, powinno zawierać wszystkie usunięte produkty, a każdy z nich powinien być osobnym obiektem w tablicy items.

Struktura danych:

dataLayer.push({
  "event": "remove_from_cart",
  "ecommerce": {
    "currency": "PLN",
    "items": [{
      "item_id": "BA1234",
      "item_group_id": "grupa123",
      "item_variant": "BA1234_43",
      "item_name": "Adidas Stan Smith",
      "price": 100.00,
      "original_price": 120.00,
      "omnibus_price": 95.00,
      "quantity": 1
    }]
  }
});

Uwagi:

  • Upewnij się, że zdarzenie remove_from_cart obsługuje usuwanie wielu produktów. Jeśli użytkownik usuwa kilka produktów lub czyści cały koszyk, umieść każdy usunięty produkt w tablicy items.
  • Cecha Quantity powinna być liczbą całkowitą oznaczającą liczbę usuniętych sztuk.
  • Zadbaj o to, aby wszystkie pozostałe szczegóły produktu były spójne z poprzednimi zdarzeniami, np. item_id, item_variant, price.

Wyświetlenie koszyka (view_cart)

Zdarzenie jest wywoływane, gdy użytkownik przegląda zawartość koszyka lub przechodzi do kasy.

Kiedy wywołać zdarzenie:

  • Przy załadowaniu strony koszyka.
  • Na pierwszym kroku procesu składania zamówienia (checkout).

Struktura danych:

dataLayer.push({
  "event": "view_cart",
  "ecommerce": {
    "currency": "PLN",
    "items": [
      {
        "item_id": "BA1234",
        "item_group_id": "gropa123",
        "item_variant": "BA1234_43",
        "item_name": "Adidas Stan Smith",
        "price": 100.00,
        "original_price": 120.00,
        "omnibus_price": 95.00,
        "quantity": 2,
        "image_url": "https://twojsklep.pl/images/adidas-stan-smith.jpg",
        "availability": true
      },
      {
        "item_id": "BA5678",
        "item_group_id": "gropa456",
        "item_name": "Nike Air Max",
        "price": 150.00,
        "original_price": 150.00,
        "quantity": 1,
        "image_url": "https://twojsklep.pl/images/nike-air-max.jpg",
        "availability": true
      }
    ]
  }
});

Uwagi:

  • Uwzględnij wszystkie produkt, które aktualnie znajdują się w koszyku.
  • Upewnij się, że quantity odzwierciedla aktualną liczbę sztuk każdego produktu w koszyku.

Rozpoczęcie procesu płatności (begin_checkout)

Zdarzenie jest wywoływane, gdy użytkownik rozpoczyna proces płatności (checkout).

Kiedy wywołać zdarzenie:

  • Na pierwszej stronie procesu płatności.

Struktura danych:

dataLayer.push({
  "event": "begin_checkout",
  "ecommerce": {
    "currency": "PLN",
    "items": [
      {
        "item_id": "BA1234",
        "item_group_id": "grupa123",
        "item_variant": "BA1234_43",
        "item_name": "Adidas Stan Smith",
        "price": 100.00,
        "original_price": 120.00,
        "omnibus_price": 95.00,
        "quantity": 2,
        "image_url": "https://twojsklep.pl/images/adidas-stan-smith.jpg",
        "availability": true
      }
    ]
  }
});

To zdarzenie jest podobne do view_cart, ale jednoznacznie wskazuje na rozpoczęcie procesu finalizacji zakupu

Zakup (purchase)

Zdarzenie jest wywoływane po pomyślnym zakończeniu zakupu.

Kiedy wywołać zdarzenie:

  • Na stronie z potwierdzeniem zamówienia, po udanej transakcji.

Struktura danych:

dataLayer.push({
  "event": "purchase",
  "ecommerce": {
    "transaction_id": "ORD78910",           // ID zamówienia 
    "client_order_id": "GPDWMFE",           // clientOrderId 
    "value": 250.00,                        // Całkowity koszt zamówienia
    "tax": 0.00,                            // Kwota podatku 
    "shipping": 30.00,                      // Koszt dostawy 
    "currency": "PLND",
    "items": [
      {
        "item_id": "BA1234",
        "item_group_id": "gropa123",
        "item_variant": "BA1234_43",
        "item_name": "Adidas Stan Smith",
        "price": 100.00,
        "quantity": 2
      },
      {
        "item_id": "BA5678",
        "item_group_id": "gropa456",
        "item_name": "Nike Air Max",
        "price": 150.00,
        "quantity": 1
      }
    ]
  }
});

Definicje właściwości:

  • transaction_id – unikalny identyfikator zamówienia.
  • client_order_id – ID zamówienia widoczne dla klienta, jeśli różni się od transaction_id.
  • value – całkowity koszt zamówienia, wliczając wysyłkę i podatki.
  • tax – całkowita kwota podatku (ustaw na 0.00 jeśli nie dotyczy).
  • shipping – całkowity koszt dostawy.

Uwagi:

  • Tablica items powinna zawierać wszystkie zakupione produkty.
  • Upewnij się, że wszystkie właściwości produktów są poprawnie przekazane.
  • Jeśli występują dodatkowe koszty lub zniżki, odpowiednio dostosuj pole value.

Wyświetlenie listy ulubionych (view_wishlist)

Zdarzenie jest wywoływane, gdy użytkownik wyświetla swoją listę ulubionych.

Struktura danych:

dataLayer.push({
  "event": "view_wishlist",
  "ecommerce": {
    "currency": "PLN",
    "items": [
      {
        "item_id": "BA1234",
        "item_group_id": "gropa123",
        "item_name": "Adidas Stan Smith",
        "price": 100.00,
        "image_url": "https://twojsklep.pl/images/adidas-stan-smith.jpg",
        "availability": true
      }
    ]
  }
});

Dodanie do listy ulubionych (add_to_wishlist)

Zdarzenie jest wywoływane, gdy użytkownik dodaje produkt do listy ulubionych.

Struktura danych:

dataLayer.push({
  "event": "add_to_wishlist",
  "ecommerce": {
    "currency": "PLN",
    "items": [{
      "item_id": "BA1234",
      "item_group_id": "gropa123",
      "item_name": "Adidas Stan Smith",
      "price": 100.00
    }]
  }
});

Usunięcie z listy ulubionych (remove_from_wishlist)

Zdarzenie jest wywoływane, gdy użytkownik usuwa produkt z listy ulubionych.

Struktura danych:

dataLayer.push({
  "event": "remove_from_wishlist",
  "ecommerce": {
    "currency": "PLN",
    "items": [{
      "item_id": "BA1234",
      "item_group_id": "gropa123",
      "item_name": "Adidas Stan Smith",
      "price": 100.00
    }]
  }
});

Dane użytkownika

Opis:

  • Uwzględna informacje o użytkowniku, gdy użytkownik jest zalogowany.
  • Wymagany jest tylko jeden identyfikator!

Struktura danych:

dataLayer.push({
  "userData": {
    "email": "uytkownik@example.com",            // UE-mail użytkownika 
    "emailMd5": "md5hashvalue",             // Hash MD5 adresu e-mail 
    "emailSha256": "sha256hashvalue"        // SHash SHA256 adresu e-mail 
  }
});

Uwagi:

  • Adres e-mail powinien być małymi literami przed hashowaniem.
  • Przechowywanie adresu e-mail w formie jawnego tekstu (plain text) jest opcjonalne.
  • Hashowanie zapewnia dodatkową warstwę ochrony prywatności.

Dodatkowe szczegóły implementacji#

Timing zdarzeń:

  • Wszystkie zdarzenia powinny być przesyłane do dataLayer w odpowiednim momencie, co gwarantuje, że dane są zbierane dokładnie

Spójność danych:

  • Pamiętaj, aby te same identyfikatory i właściwości produktów były używane spójnie we wszystkich zdarzeniach.

Formatowanie walut:

  • Ceny powinny być formatowane jako liczby z dwoma miejscami po przecinku.
  • Zawsze uwzględnij kod waluty do cechy currency.

Dostępność produktu:

  • Dla cechy availability używaj „in stock” lub „out of stock” dla właściwości
  • To pomaga w zrozumieniu popytu na produkty i stanów magazynowych.

Lista kontrolna implementacji

  • Wyświetlenie szczegółów produktu (view_item) – zaimplementowane na stronach szczegółów produktu ze wszystkimi wymaganymi właściwościami.
  • Wybór wariantu produktu (select_item) – zaimplementowane, gdy użytkownicy wybierają różne konfiguracje produktów.
  • Dodanie do koszyka (add_to_cart) – zaimplementowane, gdy produkty są dodawane do koszyka.
  • Usunięcie z koszyka (remove_from_cart) – zaimplementowane, gdy produkty są usuwane z koszyka.
  • Wyświetlenie koszyka (view_cart) –zaimplementowane na stronie koszyka.
  • Rozpoczęcie procesu płatności (begin_checkout) – zaimplementowane na początku procesu składania zamówienia.
  • Zakup (purchase) – zaimplementowane na stronie z potwierdzeniem zamówienia.
  • Zdarzenia listy ulubionych – zaimplementowane, jeśli lista ulubionych jest dostępna w Twoim sklepie.
  • Dane użytkownika –zaimplementowane dla zalogowanych użytkowników z odpowiednim hashowaniem.

Informacje dodatkowe#

Polityka prywatności