Blog

Data Layer krok po kroku – poradnik dla początkujących

Czym jest Data Layer?

Data Layer, czyli warstwa danych jest obiektem JavaScript (zapisanym w tablicy), który służy do przekazywania informacji ze strony w ujednolicony sposób. Dane te mogę być następnie odczytane i zmapowane przez większość systemów zarządzania tagami – Google Tag manager, Tealium, Dynamic Tag Managment Adobe – oraz narzędzia performance marketing – Synerise, Salesforce, Sales Menago, etc.

Jak działa Data Layer?

Żeby zrozumieć działanie Data Layer musimy wiedzieć czym jest obiekt Java Script. Obiekt JS jest to opis jakiegoś elementu strony, np. przycisku za pomocą określenia jego właściwości. Zapisu obiektu dokonuje się w nawiasach klamrowych {} , a kolejnej właściwości oddziela się od siebie przecinkiem:

var button = {
’id’: „xyz”,
’tekst’: „przycisk”,
’kolor’: „czarny”
}

Opisany powyżej obiekt button posiada 3 właściwości: id, tekst oraz kolor.

Warstwa danych jest niczym innym jak właśnie obiektami JS które opisują różne elementy lub działania na stronie internetowej z tym, że znajdują się one w tablicy [] Data Layer. Przedstawmy to na przykładzie obiektu Data Layer, który będzie opisywał stronę produktową w sklepie internetowym. Pojawi się on w tablicy Data Layer w momencie odwiedzenia przez użytkownika strony z produktem:

{
’event’: nazwa eventu który pojawi się razem z obiektem,
’nazwa_produkt’: nazwa produktu przedstawionego na stronie,
’producent_produktu’: nazwa producenta produktu przedstawionego na stronie,
’kategoria_produktu’: nazwa kategori produktu przedstawionego na stronie,
’cena_produktu’: cena produktu przedstawionego na stronie porduktowej
}

Obiekt ten opisuje produkt, znajdujący się na stronie produktowej, jeżeli użytkownik odwiedzi stronę prezentującą żelazko to właściwości obiektu mogą przyjąć następujące wartości:

DataLayer możemy odczytać i używać przy pomocy Google Tag Managera. Poniższa grafika w prosty sposób obrazuje schemat działania:

Skrypt na stronie internetowej wysyła odpowiednie informacje w postaci obiektów do tablicy Data Layer.

System zarządzania tagami odczytuje wartości parametrów obiektów Data Layer i mapuje je na zmienne. Jeżeli używamy GTM jest to nad wyraz proste ponieważ posiada on zmienną tego typu, żeby ją zmapować należy podać tylko nazwę parametru.

GTM następnie odnajdzie w kodzie parametr DL i przekaże jego wartość do odpowiedniej stworzonej zmiennej.

Zmienne wykorzystywane są do tworzenia tagów lub reguł, a także mogę byś wykorzystywane w inny sposób, np. do zasilania feeda produktowego do remarketingu. Oczywiście niektóre aplikacje można zasilić bezpośrednio przez Data Layer .

Jak napisać prosty skrypt Data Layer?

W większości przypadków Data Layer nie ma określonej struktury ani taksonomii parametrów, w zależności od naszych potrzeb możemy skorzystać z gotowego szablonu jak, np. rozszerzony ecommerce od Google, ale jeżeli nasze potrzeby nie są tak kompleksowe sami możemy go zaprojektować.

W momencie, w którym wiemy jakich informacji potrzebujemy w warstwie danych konieczne jest przygotowanie skryptu, który będzie zasilał parametry naszego Data Layer odpowiednimi wartościami. Idealnym rozwiązaniem jest poproszenie zespołu developerskiego o przygotowanie i wdrożenie takiego skryptu. Niestety w realiach korporacji oczekiwanie na zrealizowanie takiego zapotrzebowanie przez dział IT może trwać bardzo długo, dlatego w dalszej części artykułu pokażę jak samodzielnie napisać taki skrypt. Konieczna będzie nam do tego znajomość podstaw Java Script.

Celem naszego ćwiczenia będzie napisanie skryptu, który po kliknięciu w poniższy guzik będzie uzupełniał Data Layer o następującej strukturze:

{
’event’: „klik” nazwa eventu który pojawi się razem z obiektem,
’button_tekst’: tekst znajdujący się na przycisku,
’article_name’: nazwa tego artykułu – pobierana dynamicznie z frontend,
’article_author’: nazwa autora artykułu – pobierana dynamicznie z fronend
}

Oczywiście zależy nam, żeby napisać skrypt generyczny, który będzie działał na wszystkich stronach artykułowych (o tej samej strukturze), dlatego zamiast iść na łatwizę i zhardcodować wartości parametrów będziemy pobierać wartości dynamiczne z frontend’u.

Krok 0 – tablica Data Layer

Pierwszym krokiem jest zadeklarowanie pustej tablicy Data Layer, wykonamy to za pomocą jednej linijki kodu Java Script:

dataLayer = [];

Jeżeli korzystamy na naszej stronie z Google Tag Managera to ten krok możemy pominąć, ponieważ w skrypcie GTM zawarta jest deklaracja tablicy DL. Jeśli nie wiesz czym jest Google Tag Managera zachęcamy do przeczytania artykułu: Instalacja Google Analytics i Google Tag Managera na stronie

Krok 1 – zmienne z wartościami parametrów obiektu DL

Posiadając tablicę Data Layer możemy przejść do części w której, pobieramy z frontend’u wartości, którymi zasilimy parametry obiektu DL.

Najpierw musimy określić lokalizację w drzewku DOM, elementu z którego chcemy pobrać wartość. Na początek zróbmy to dla naszego przycisku, żeby to zrobić klikamy w przycisk prawym przyciskiem myszy i wybieramy opcje Zbadaj.

Następnie w otwartym oknie narzędzi developerskich w sekcji Elements sprawdzamy jaką klasę posiada nasz przycisk. Możemy wykorzystać inne właściwości tego elementu jak np. id, ale klasa elementu jest najbardziej uniwersalną własnością.

Do naszego przycisku (pomarańczowy „Przycisk do nauki” powyżej) sztucznie dodaliśmy klasę o nazwie xyz. Nie trzeba tego robić i można oczywiście skorzystać z klasy, która jest od razu dostępna.

Jak widzimy nasz przycisk posiada klasę o nazwie xyz. Żeby się do niego odwołać skorzystamy z metody document.querySelector():

document.querySelector(„.xyz”);

Możemy to polecenie przetestować w konsoli narzędzi developerskich. Po jego wykonaniu powinien pojawić się fragment kodu prezentujący nasz przycisk. Żeby pobrać wartość tekstu danego elementu musimy skorzystać z metody innerText:

document.querySelector(„.xyz”).innerText;

Jeżeli teraz przetestujemy nasze polecenie w konsoli po jego wykonaniu powinien pojawić się tekst znajdujący się na przycisku.

Aby wykorzystać to polecenie do zasilenia naszego obiektu DL powinniśmy zadeklarować je jako zmienną Java Script, możemy użyć tej samej nazwy co nazwa parametru:

var button_tekst = document.querySelector(„.xyz”).innerText;

Żeby to przetestować w konsoli wywołujemy teraz zmienną button_tekst, po wciśnięciu enter powinien ponownie pojawić się nam tekst znajdujący się na przycisku.

Teraz tą samą procedurę powinniśmy powtórzyć dla dwóch pozostałych parametrów, dla których chcemy mieć wartości w obiekcie DL. Pamiętajmy, żeby każdą zakończoną komendę oddzielić średnikiem „;”. Na potrzeby testów załóżmy, że interesuje nas zbieranie informacji o autorze artykułu i naszego stworzonego pomarańczowego przycisku.

var button_tekst = document.querySelector(„.xyz”).innerText;
var article_author =document.querySelector(„.elementor-post-info__item–type-author”).innerText;

Krok 2 – Zasilenie obiektu DL wartościami zmiennych JS

Żeby zasilić tablicę DL o zaprojektowany obiekt z wartościami z uprzednio stworzonych zmiennych JS wykorzystamy metodę push. Nasz event nazwijmy „klik”. Wykorzystamy to później.

dataLayer.push ({
’event’: „klik” ,
’button_tekst’: button_tekst,
’article_author’: article_author
});

Możemy wywołać to polecenie w konsoli, a następnie odwołać się do DL za pomocą komendy dataLayer, jako wynik powinniśmy otrzymać następujący rezultat:

W tej chwili cały nasz skrypt ma następującą postać:

var button_tekst = document.querySelector(„.xyz”).innerText;
var article_author =document.querySelector(„.elementor-post-info__item–type-author”).innerText;

dataLayer.push ({
’event’: „klik” ,
’button_tekst’: button_tekst,
’article_author’: article_author
});

Krok 3 – dodanie warunku wyzwalającego wywołanie skryptu DL

Zgodnie z naszym założeniem skrypt powinien wywoływać się w momencie kliknięcia pomarańczowego przycisku, dlatego powinniśmy dodać do niego funkcje wyzwalającą. Możemy to zrobić na dwa sposoby:

Skorzystać z metody JS addEventListener
W której do konkretnego elementu dodajemy nasłuchiwanie konkretnego zdarzenie – w tym przypadku kliknięcia oraz polecenie, jaki się ma wykonać po wykonaniu tegoż zdarzenia.

element.addEventListener(’click’, function () {
//komenda wywołana po kliknieciu
});

Skorzystać z metody jQuery .on

W której do konkretnego selectora CSS dodajemy nasłuchiwanie konkretnego zdarzenia, w tym przypadku tak samo kliknięcia oraz polecenie, jaki się ma wykonać po wykonaniu tegoż zdarzenia.

jQuery(element).on(’mousedown’, 'slector CSS’, function(e) {
//komenda wywołana po kliknieciu
});

W naszym skrypcie użyjemy metody addEventListener. Elementem do którego się odwołujemy to na przycisk, dla którego uprzednio określiliśmy już lokalizacje w drzewku DOM. Teraz zapiszemy go w postaci zmiennej a następnie dodamy do niego nasłuchiwanie zdarzeń kliknięcia:

var button = document.querySelector(„.xyz”);
button.addEventListener(’click’,function () {
var button_tekst = document.querySelector(„.xyz”).innerText;
var article_author = document.querySelector(„.elementor-post-info__item–type-author”).innerText;

dataLayer.push ({
’event’: „klik” ,
’button_tekst’: button_tekst,
’article_author’: article_author
}); });

Żeby sprawdzić działanie naszego skryptu powinniśmy odświeżyć stronę z artykułem, a następnie wykonać powyższy skrypt w konsoli. Po wykonaniu skryptu możemy kliknąć w przycisk (najlepiej z CTRL, aby otworzyć nową stronę w okienku, jeśli button przenosi nas dalej) i wywołać w konsoli komendę dataLayer. Powinien pojawić się tam nasz obiekt z parametrami, które wcześniej ustaliliśmy: nazwa buttonu i autor artykułu.

Jak zaimplementować Data Layer za pomocą Google Tag Manager?

Optymalną opcją implementacji Data Layer jest zrobienie tego bezpośrednio w kodzie strony. Natomiast wymaga to posiadania bardziej zaawansowanych umiejętności programistycznych i dostępu do kodu lub zaangażowanie działu IT, który często każe czekać nam na wdrożenie przez wiele tygodni. Żeby usprawnić naszą pracę z pomocą przychodzi nam Google Tag Manager. Jeżeli posiadamy GTM zaimplementowany na naszym portalu nie potrzebujemy posiadać zaawansowanych umiejętności developerskich ani angażować działu IT.

Do implementacji Data Layer wykorzystamy tag typu Niestandardowy Kod HTML. Jeżeli potrzebujemy prosty Data Layer i moment, w którym ma się on pojawić w kodzie strony jesteśmy w stanie odtworzyć za pomocą trigera GTM to w tagu niestandardowego kodu HTML dodajemy skrypt, bez warunku wyzwalającego. Zastąpimy go dodanie odpowiedniej reguły GTM.

Ważne: nasz kod musimy umieścić wewnątrz znaczników <script> </script>

Jeżeli nasz skrypt posiada warunek wyzwalający to powinniśmy go umieścić w momencie kiedy wszystkie elementy drzewa DOM są już dostępne na stronie, czyli kiedy występuje zdarzenie DOM ready.

Jest to kluczowe ponieważ jeżeli pobieramy dynamiczne wartości z frontendu odwołujemy się do elementów DOM. W przypadku, gdy wywołamy skrypt wcześniej mógłby wystąpić error, ponieważ element do którego się odwołujemy mógł być jeszcze nie załadowany. Oczywiście jeżeli nasz skrypt nie odwołuje się do żadnych elementów strony możemy go wczytać w momencie wyświetlenia strony, czyli podczas zdarzenia Container Loaded.

Ważne: regułę DOM ready możemy dopasować do naszych potrzeb, nie musimy wywoływać skryptu na każdej stronie. Tutaj w celu nauki wywołujemy ją na każdej stronie, ale jeśli zbieralibyśmy kliki tylko z artykułów możemy dodać warunek w trigerze z url zawiera: bettersteps.pl/blog/.

W ten oto sposób, wiesz już jak na swojej stronie zaimplementować Data Layer za pomocą Google Tag Managera, bez konieczności angażowania działu IT Twojej firmy. Obecnie za każdym razem po kliknięciu w nasz przycisk, powinieneś dostać w Data Layerze event o nazwie klik z 2 parametrami: nazwą przycisku oraz autorem artykułu.

Implementacje opisane w tym artykule znajdziesz w konfiguracji GTM dostępnej tutaj.

5 5 votes

Ocena artykułu