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?
Warto, 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?
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>
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 ecommerce informacje. Posłużę się przykładem z supportu Google. Przykład ten dotyczy podstawowej wersji ecommerce. Dalej pokażę przykład z Enhanced Ecommerce.
<script> window.dataLayer = window.dataLayer || [] dataLayer.push({ 'transactionId': '1234', 'transactionAffiliation': 'Ubrania Acme', 'transactionTotal': 38.26, 'transactionTax': 1.29, 'transactionShipping': 5, 'transactionProducts': [{ 'sku': 'DD44', 'name': 'Koszulka', 'category': 'Odzież', 'price': 11.99, 'quantity': 1 },{ 'sku': 'AA1243544', 'name': 'Skarpetki', 'category': 'Odzież', 'price': 9.99, 'quantity': 2 }] }); </script>
W powyższym kodzie wylistowane są wszystkie informacje o transakcji. Każda dana to osobna zmienna. Zamówione produkty – ich nazwy, ilości, ceny – przesyłane są jako tablica.
W jaki sposób “dobrać się” do tych danych? Tak samo jak w przykładzie opisanym na początku artykułu. Jeśli chcielibyśmy pobrać identyfikator transakcji, zmienna wyglądałaby tak:
Jeszcze bardziej zaawansowanym przykładem jest warstwa danych przesyłająca informacje do Enhanced Ecommerce. Kod z danymi o transakcji ma następującą postać (za supportem Google):
<script> // Send transaction data with a pageview if available // when the page loads. Otherwise, use an event when the transaction // data becomes available. dataLayer.push({ 'ecommerce': { 'purchase': { 'actionField': { 'id': 'T12345', // Transaction ID. Required for purchases and refunds. 'affiliation': 'Online Store', 'revenue': '35.43', // Total transaction value (incl. tax and shipping) 'tax':'4.90', 'shipping': '5.99', 'coupon': 'SUMMER_SALE' }, 'products': [{ // List of productFieldObjects. 'name': 'Triblend Android T-Shirt', // Name or ID is required. 'id': '12345', 'price': '15.25', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Gray', 'quantity': 1, 'coupon': '' // Optional fields may be omitted or set to empty string. }, { 'name': 'Donut Friday Scented T-Shirt', 'id': '67890', 'price': '33.75', 'brand': 'Google', 'category': 'Apparel', 'variant': 'Black', 'quantity': 1 }] } } }); </script>
Powyższy przykład to dość wielopiętrowa tablica, ale pobieranie z niej danych jest niewiele trudniejsze niż w pierwszym przypadku.
Jak z powyższego kodu pobrać identyfikator transakcji? Tworzymy w GTM “zmienną warstwy danych” i w polu “nazwa zmiennej warstwy danych” wpisujemy ciąg znaków będący połączeniem nazw poszczególnych poziomów tej tablicy. Całość odpowiada nazwie zmiennej warstwy danych, która ma być pobierana:
ecommerce.purchase.actionField.id
Cała zmienna ma postać:
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ć.
Loading...
