Jeśli korzystasz lub planujesz korzystać z Google Tag Managera, musisz wiedzieć, że jednym z kluczowych elementów jego skutecznego działania jest dostęp do danych osadzonych na stronie. Problem w tym, że nie wszystkie informacje, które chcemy mierzyć, są łatwo dostępne w kodzie źródłowym lub DOM. Tu właśnie pojawia się DataLayer – specjalna przestrzeń, która pozwala „podpowiedzieć” GTM-owi, co dzieje się na stronie, bez konieczności przeszukiwania struktury HTML czy pisania rozbudowanych skryptów.
W artykule pokażę Ci, czym dokładnie jest warstwa danych, jak wygląda jej struktura i jak możesz wykorzystać ją do precyzyjnego mierzenia zdarzeń, identyfikacji podstron, a także wdrożenia e-commerce w GA4. Niezależnie od tego, czy dopiero zaczynasz swoją przygodę z GTM, czy chcesz uporządkować sposób przekazywania danych – dobrze wdrożona DataLayer to fundament sprawnie działającej analityki.
Spis treści
Co to jest Data Layer?
DataLayer, czyli warstwa danych, to obiekt JavaScript (tablica), która służy do przekazywania danych ze strony internetowej do kontenera Google Tag Manager. Dane, które strona przekazuje do datalayer, mogą być następnie użyte do tworzenia zmiennych, reguł oraz tagów.
Czy warto używać warstwy danych?
Tak, warto wdrażać Data Layer, ponieważ jest to najbardziej przyjazna forma przekazywania informacji do GTM.
Przykład: co widzi Google Tag Manager, gdy użytkownik wyświetla produkt? Czy wie, że to strona produktu, co to za produkt lub jaki ma identyfikator? Nie. Co prawda możemy stworzyć kod, który to sprawdzi. Znajdzie informację o typie podstrony, następnie sprawdzi, jaka jest nazwa produktu, jego cenę oraz identyfikator. W przypadku, gdy te informacje są „rozsiane” po treści strony, musimy stworzyć aż trzy kody, które będą starały się znaleźć takie dane.
Takie informacje można podać GTMowi „na tacy” poprzez DataLayer. Jeśli byłyby one od razu przekazane do DataLayer, żadne dodatkowe kody „wyszukujące” nie byłyby potrzebne. Informacja, czy jest to strona produktu, jaka jest jego nazwa, wartość i ID byłyby podane w dużo bardziej przyjazny sposób.
Na początku warto wyjaśnić, że w DataLayer mamy nazwę i wartość zmiennej oraz w GTM mamy nazwę i wartość zmiennej. Są to dwa różne, niezależne „obiekty”.
Korzystanie w GTM z informacji zawartych w datalayer sprowadza się do stworzenia na poziomie GTM zmiennej o typie „Zmienna warstwy danych”, w której wystarczy wpisać nazwę zmiennej z datalayer (np. PageType, title, value, id), a sama zmienna utworzona w GTM już wie, gdzie ma szukać wskazanych wartości.
Jak wygląda DataLayer?
Zapoznajmy się z prostym przykładem strony postawionej na WordPressie, w którym będziemy rozpatrywać, czy jesteśmy na podstronie o typie „strona główna”, „post”, „zwykła strona z treścią”. Do warstwy danych, za każdym razem, gdy wczytywana jest strona, przesyłana jest zmienna o nazwie „pagePostType”, która może przyjąć trzy wartości (zapewne może więcej, ale rozpatrzymy trzy):
- pagePostType = post
- pagePostType = bloghome
- pagePostType = page
Informacji w DataLayer jest dużo, ale przyjrzyjmy się tylko tej jednej wartości, o której mowa. Poniżej „wygląd” DataLayer na podstronie naszego bloga. Na screenie podgląd GTM, w momencie, gdy jesteśmy na jednym z postów.
Wśród wielu danych mamy tę, która zawiera informację o typie podstrony. Jest to zmienna pagePostType a jej wartość, gdy użytkownik jest na artykule, to „post”.
Jak dane przesyłane są do datalayer?
Dane do datalayer są przesyłane za pomocą kodu (i tu potrzebny jest programista lub gotowa wtyczka). Poniżej przykład kodu, jaki może być uruchomiony, gdy wczytywana jest podstrona będąca postem na blogu.
<script>
dataLayer = [{
'pagePostType' : 'post'
}];
</script>Uwaga: dodanie kodu w takiej postaci nadpisuje poprzednie istniejące wartości w DataLayer.
Dlatego te dane można też przesłać nieco inaczej, ale efekt będzie taki sam. W momencie wczytania strony można uruchomić kod:
dataLayer.push({’pagePostType’: 'post’});
Co w obu przypadkach zobaczy GTM? Poniżej ponownie screen z trybu podglądu naszego GTM. DataLayer zawiera dużo więcej danych, ale między innymi tę, którą omawiam:
Oprócz danych o typie podstrony są też informacje o kategoriach posta, o dodatkowych atrybutach czy też o autorze.
Jak widać na powyższym screenie, całość DataLayer jest tablicą. Tablica Datalayer zawiera podtablice, takie jak pageAttribiutes czy pageCategory. Poszczególne dane (zmienne) to kolejne elementy tablicy.
W jaki sposób skorzystać z tych danych z DataLayer?
Dla przypomnienia ważna uwaga, o której wspominałam na początku artykułu: w DataLayer mamy nazwę i wartość zmiennej oraz w GTM mamy nazwę i wartość zmiennej. Ponieważ te dwa byty nazywają się tak samo (zmienna), będę używać nazw „zmienna w datalayer” i „zmienna w GTM”.
W jaki sposób korzystać z danych w DataLayer? Należy utworzyć nową zmienną w GTM o typie „Zmienna warstwy danych” (jest to zmienna definiowana przez użytkownika) i tam, jako „nazwę zmiennej warstwy danych” wpisać nazwę zmiennej z datalayer.
Na poniższym przykładzie zmienna w GTM nosi nazwę „moja zmienna – pagePostType”, a w pole „nazwa zmiennej warstwy danych” wpisałam „pagePostType”, czyli nazwę zmiennej z Datalayer.
Gdy odwiedzamy podstrony, zmienna w GTM o nazwie „moja zmienna – pagePostType” będzie przyjmować takie wartości, jakie są wysyłane do warstwy danych:
Z tak utworzonej zmiennej w GTM możemy skorzystać przy tworzeniu reguł lub tagów.
DataLayer w ecommerce
Bardziej zaawansowanym przykładem wykorzystania warstwy danych jest przesyłanie danych o transakcji. DataLayer ze szczegółami zamówienia zawiera wszystkie niezbędne dla e-commerce informacje. Posłużę się przykładem na podstawie supportu Google.
Przykład ten dotyczy podstawowej implementacji e-commerce w Google Analytics 4 przez GTM.
<script>
dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object.
dataLayer.push({
event: "purchase",
ecommerce: {
transaction_id: "T_12345",
// Sum of (price * quantity) for all items.
value: 30.03,
tax: 3.60,
shipping: 5.99,
currency: "USD",
coupon: "SUMMER_SALE",
items: [
{
item_id: "SKU_12345",
item_name: "Stan and Friends Tee",
affiliation: "Google Merchandise Store",
coupon: "SUMMER_FUN",
discount: 2.22,
index: 0,
item_brand: "Google",
item_category: "Apparel",
item_category2: "Adult",
item_category3: "Shirts",
item_category4: "Crew",
item_category5: "Short sleeve",
item_list_id: "related_products",
item_list_name: "Related Products",
item_variant: "green",
location_id: "ChIJIQBpAG2ahYAR_6128GcTUEo",
price: 10.01,
quantity: 3
}
]
}
});
</script>
W powyższym kodzie wylistowane są wszystkie informacje o transakcji w formie obiektu. Zamówione produkty – ich nazwa, ilość, cena – przesyłane są jako tablica.
W jaki sposób „dobrać się” do tych danych? W tym przypadku zmienna, którą potrzebujemy, jest częścią obiektu e-commerce. Aby z niej skorzystać, tworzymy nową zmienną, a w jej nazwie wpisujemy: ecommerce.transaction_id, łącząc nazwę obiektu z nazwą zmiennej, którą chcemy wykorzystać.
Zdarzenia i zmienne w DataLayer
Warstwę danych, przy współpracy z programistą, możemy budować według własnych potrzeb. Jeśli chcielibyśmy mierzyć wysłanie formularza, a instrukcje znalezione w internecie nie działają, możemy przesłać do datalayer własne zdarzenie (event) oraz własne zmienne i na tej podstawie tworzyć tagi.
Jak do datalayer przesyłać zdarzenia, czyli informacje, że jakaś akcja miała miejsce? Służy do tego kod:
dataLayer.push({’event’: ’nazwa_zdarzenia’});
Jeśli razem ze zdarzeniem mają być przesyłane dodatkowe zmienne, kod ma postać:
dataLayer.push({
'zmienna_1': 'abc',
'zmienna_2': 123,
'event': 'nazwa_zdarzenia'
});Są to takie same zmienne datalayer jak opisane na przykładach wyżej. Pobieranie ich z warstwy danych przebiega w dokładnie ten sam sposób.
Jak użyć w GTM tak przesłanego zdarzenia do przygotowania reguły? Tworzymy nową regułę o typie „Zdarzenie niestandardowe” i w nazwie zdarzenia wpisujemy taką nazwę, jaką przesyłamy do datalayer:
Słowo podsumowania
Istota działania DataLayer to ułatwienie przekazywania informacji o zdarzeniach i zmiennych do Google Tag Manager. Pobieranie danych z warstwy danych jest zdecydowanie prostsze, niż przygotowywanie kodów JavaScript, które miałyby przeszukiwać kod źródłowy strony. Co więcej, w kodzie źródłowym nie zawsze znajdą się dane, które chcielibyśmy pobrać.
Tekst zaktualizowany, w pierwotnej wersji pojawił się na blogu w 2020 roku.
Spodobał Ci się ten artykuł?
Zapisz się na newsletter - nie spamujemy!
Loading...
