Jak skonfigurować dataLayer w GTM

W naszym przykładzie weźmiemy pod lupę zdarzenie view_item (link do dokumentacji technicznej od Google), które jest typowe dla wyświetlenia produktu na stronie sklepu.

Aby rozpocząć tworzenie dataLayer dla zdarzenia view_item, musimy najpierw zdefiniować wymagane pola danych. W naszym przypadku będą to:

• item_id* - Identyfikator elementu.
• item_name* - Nazwa produktu.
• item_category - Kategoria produktu.
• price - Cena pieniężna elementu w jednostkach określonego parametru waluty.
• currency* - Waluta elementów powiązanych ze zdarzeniem w 3-literowym formacie ISO 4217.
• value* - Wartość pieniężna zdarzenia.
• items* - Elementy zdarzenia.
• * - elementy wymagane

Czyli powstanie nam obiekt w JS, który zgodnie z dokumentacją wyglądać będzie następująco:

dataLayer.push({ ecommerce: null });  
// Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item",
  ecommerce: {
    currency: "EUR",
    value: 50,
    items: [
    {
      item_id: "SKU_12345",
      item_name: "FUZZ 29 1",
      item_category: "DOWNHILL - EXPERT",
      price: 6999
    }
    ]
  }
});

Gdy już wiemy, które pola są wymagane, przechodzimy do naszej przykładowej strony.

Na podstawie kodu HTML, który jest użyty na stronie produktu, jesteśmy w stanie wyciągnąć wymagane pola, które zostaną pobrane przez Google Tag Manager, a następnie również przez GTM przekazane do dataLayer i wysłane do Google Analytics 4 jako zdarzenie view_item wraz ze wszystkim parametrami produktu.

<div class="name">
# Tutaj mamy item_category
	<div class="category">downhill - expert</div>
# To jest nasza nazwa produktu, czyli pole item_name
	<h1>Fuzz 29 1</h1>
  <div class="price">
  	<div class="text">Suggested retail price:</div>
# To jest nasza cena produktu czyli pole price
    <div class="qtu">6999 <span>€</span></div>
  </div>
</div>

Zaawansowane metody zbierania danych

W tym momencie mamy już pewność, że wszystkie wymagane pola są widoczne i możliwe do wyciągnięcia ze strony przy użyciu GTM. Kolejne kroki, które musimy wykonać to:

1. Skonfigurowanie zmiennych, które zostaną wstawione do dataLayer (item_name, price, item_category)
2. Stworzenie tagu z Custom HTML z dataLayer dla zdarzenia view_item
3. Utworzenie Reguły, która opublikuje dataLayer
4. Utworzenie Tagu w GTM do wysłania zdarzenia view_item z danymi z dataLayer

Tworzymy Zmienne w GTM do wykorzystania z dataLayer

item_name

Zacznijmy od item_name. Patrząc na kod HTML widzimy, że nazwa produktu umieszczona jest w znaczniku <h1>:

<h1>Fuzz 29 1</h1>

W GTM wybieramy Typ zmiennej na Element DOM:

Oczywiście nie zapominamy o nazwaniu naszej zmiennej abyśmy mogli ją później wykorzystać. Nazewnictwo tagów, reguł i zmiennych jest dowolne, ale w innym artykule postaram się przybliżyć standardy, którymi kierujemy się w Digi2.

item_category

Tym razem pobieramy nazwę kategorii produktu, która znajduje się w znaczniku <div> ale div posiada unikatową nazwę class'y, którą użyjemy w podobny sposób jak wyżej.

<div class="category">downhill - expert</div>

Podobnie, w GTM tworzymy Zmienną wybierając Typ zmiennej na Element DOM:

Dlaczego wstawiłem kropkę przed nazwą class'y? W CSS wyróżniamy 3 najważniejsze elementy:

1. Znaczniki typu: <h1>, <input> czy <div> (jest tego więcej oczywiście)
2. Identyfikator: <h1 id="to_jest_identyfikator"> który możemy przypisać do każdego elementu
3. Klasy CSS: <div class="to_jest_klasa_css"> które również możemy przypisać do każdego elementu.

Znaczniki w Selektorze elementu w GTM wpisujemy jak w przykładzie zmiennej z item_name, czyli jak wiemy, że w <h1> znajduje się interesująca nas treść to wstawiamy w to pole po prostu h1.

Identyfikatory obsługujemy poprzedzając nazwę identyfikatora hashtagiem (znak #).

Klasy tak jak w powyższym przykładzie poprzedzamy kropką (znak .).

price

Mamy już nazwę produktu, jego kategorię teraz pobierzemy ze strony cenę produktu.

<div class="qtu">6999 <span>€</span></div>

Tym razem będzie trochę trudniej, ponieważ do pola price musimy przekazać liczbę bez dodatkowych znaków, dlatego najpierw tworzymy Zmienną w GTM dla pobrania pełnej wartości ceny ze strony, czyli ze znakiem waluty 6999 €.

Aby poprawnie przesłać obiekt w dataLayer do zdarzenia view_item, musimy dostosować pole price aby przekazywać jedynie liczbę - czyli usunąć znak waluty € i zostawić samo 6999. Najprościej będzie to zrobić odnosząc się do nowej zmiennej, w której tym razem użyjemy kodu JavaScript, który zwróci oczekiwaną dla GA4 wartość.

W powyższym przypadku użyłem funkcji split(), ale można to również zrobić na wiele innych sposób np. używając replace(). Nie wchodząc głęboko w szczegóły, funkcja split() została użyta ponieważ jeśli chodzi o wydajność, generalnie split jest szybszy od replace, ponieważ funkcja split nie musi przeszukiwać całego tekstu w poszukiwaniu dopasowań, a jedynie dzieli go na podstawie separatora (w naszym przypadku jest to spacja).

Jak zaimplementować dataLayer za pomocą Google Tag Manager?

Posiadając już wszystkie dane przechodzimy do tworzenia Tagu, w którym użyjemy naszych Zmiennych i stworzymy obiekt warstwy danych, który przekażemy do GA4.

Tworzymy brakującą Zmienną z warstwy danych, czyli items. Jako, że w powyższym tagu przekazujemy obiekt, który posiada ten element items w obiekcie ecommerce, wystarczy, że wykorzystamy do tego ponownie Zmienną w GTM i wskażemy ścieżkę gdzie znajduje się nasza lista items.

Jak przesłać dane z dataLayer w GTM do GA4?

Powyżej przygotowany przez nas Tag możemy wykorzystać do uruchomienia Tagu, który tym razem przekaże nasze dane do Google Analytics 4 w formie zdarzenia view_item razem ze wszystkimi parametrami.

Tym sposobem zostaje nam weryfikacja czy wszystkie dane są przekazywane poprawnie uruchamiając Debug Mode w GTM oraz Debug View w GA4. Jeśli wszystko jest poprawnie wyświetlane zgodnie z naszymi założeniami, wystarczy już teraz tylko opublikować zmiany i analizować dane.

Poniżej znajdziesz nasze inne artykuły, które powinny Ciebie zainteresować:

• Jak przekazywać Google user_pseudo_id do Mautic lub systemu CDP, CRM
• Jak Dobrze Zarządzać Monitorowaniem Wielu Zdarzeń na Stronie - GTM Tips
• Jak Znaleźć Błędy 404 za pomocą Google Analytics 4