Google tag manager je nástroj, vďaka ktorému môžeme na náš web vkladať rôzne tagy (značky) rýchlo a jednoducho bez potreby modifikácie zdrojového kódu. To znamená, že k tomu nie je potrebná práca programátorov. Jednou z najdôležitejších častí Google Tag Managera je dataLayer.
DataLayer (dátová vrstva) je jedným z kľúčových pojmov vo svete Google Tag Manager (GTM). Je to javaskriptová premenná, a v analytike nám slúži na predávanie dát z webu do GTM. Zjednodušene povedané je to akási virtuálna vrstva webu, ktorá obsahuje rôzne dáta a GTM si z dataLayeru načítava hodnoty potrebných premenných. Teda za predpokladu, že sa v ňom nachádzajú. Údaje v dataLayery sú generované jednotlivými užívateľmi, ktorí s webom nejakým spôsobom interagujú. Napríklad kliknú na náhľad produktu, alebo si pridajú produkt do košíka. V dataLayery sú teda uložené informácie ako napríklad text kliknutého tlačidla, cena produktu alebo hodnota objednávky.
Na prvý pohľad sa môže dataLayer zdať komplikovaný. Základy, ktoré potrebujeme vedieť na tvorbu premenných sa dajú celkom jednoducho a rýchlo pochopiť.
Kde v GTM nájdeme dataLayer?
V GTM kliknite na pravej strane na tlačidlo “preview” – otvorí sa nám nové okno – Google Tag Assistant. Vyplníte url adresu webovej stránky a dostanete sa do debug modu na danej stránke. Následne sa vráťte na stránku Google Tag Assistant.
Základný princíp dataLayer
Každý objekt v dataLayery sa skladá z kľúča a hodnoty. Kľúč zostáva rovnaký, mení sa nám len jeho hodnota. V našom príklade to vyzerá nasledovne:
Kľúč = pageType, hodnota = productDetail
DataLayer je tvorený viacerými vrstvami, tie sú od seba oddelené tabulátorom a {} zátvorkou. Jedná sa o vnorené dátove vrstvy, ktoré sú hierarchicky usporiadané. Každá vnorená vrsta je posunutá doprava.
Ak chcete pracovať s údajmi z dataLayeru a používať ich v tagoch (značkách), či triggroch (spúšťačoch) musíte si z nich vytvoriť dataLayer variables (premenné). Premenné tohto typu (dataLayer variables) sú asi najpoužívanejší typ premenných a pri práci v GTM sa s nimi budete stretávať často.
Vytváranie premenných z dataLayeru
Poďme si vytvoriť premennú, vďaka ktorej zistíme o aký typ stránky sa jedná. V e-shopoch sa bežne nachádzajú produktové alebo kategorické stránky, či stránka košíka.
1. V Google Tag Manager vyberte Premenné > v sekcii “User – Defined Variables” New > Data Layer Variable
2. Vľavo hore vyplníme názov premennej. Pri premenných z dátovej vrstvy zvykneme používať označenie DLV – /názov kľúča, ktorý zodpovedá hodnote, ktorú chceme vytiahnuť/
3. Vyplníme Data Layer Variable Name. Keďže v dataLayery mám viac vnorených vrstiev, pri písaní dataLayer Variable Name budeme používať špeciálnu bodkovú notáciu. Jednotlivé vrstvy od seba oddeľujeme bodkou a píšeme ich od najvyššej po najnižšiu. Zjednodušene povedané, zhora nadol a sprava doľava. Názov našej premennej bude vyzerať takto:
shoptet.pageType
4. Novú premennú uložíme
Premennú pageType využijete napríklad v prípade, že chcete odpáliť určitý tag iba na stránke produktu. Vďaka nej vytvoríte trigger, ktorý sa bude spúšťať iba na určitom type stránky.
Poďme si skontrolovať, či premenná funguje správne. Opäť prejdite do preview modu. V Preview mode sa na vašej stránke prekliknite napríklad na produkt. V Google Tag Assistant tentokrát zvoľte možnosť Variables, na ľavej strane vyberte príslušnú udalosť (v našom prípade sa jedná o Window Loaded). Medzi premennými by ste mali vidieť práve vytvorenú premennú DVL – pageType aj s príslušnou hodnotou.
Ako vytiahnuť údaje z poľa premenných?
Pri práci s dataLayerom sa môžete stretnúť aj s iným typom vnoreného objektu, a tým je pole. Pole je v Javascripte ohraničené hranatými zátvorkami a je tvorené viacerými prvkami. Zjednodušene môžeme pole zapísať ako:
[A, B, C]
Pozície prvkov poľa sú očíslované. Číslovanie začína nulou. Náš príklad vyzerá takto.
A = poloha 0 B = poloha 1 C = poloha 2
S poľom premenných sa stretneme napríklad v košíku, alebo na ďakovacej stránke po odoslaní objednávky. Je to jednoducho povedané, ak jeden objekt (riadok) dataLayeru obsahuje ďalšie objekty, ktoré majú svoje osobitné hodnoty. Napríklad viacero produktov v košíku, alebo objednávke. Každý z týchto produktov má pritom svoj názov, id, cenu, kategóriu, atď. Poďme si do košíka vložiť viac produktov a pozrime sa ako vyzerá dataLayer na stránke košiku.
Ak by sme chceli do premennej dátovej vrstvy uložiť napríklad ID prvého produktu náš kľúč by bol v tomto prípade ecommerce.checkout.product.0.id
Pre cenu prvého produktu by kľúč vyzeral nasledovne ecommerce.checkout.product.0.price
V prípade že chceme zadefinovať premenné druhého produktu 0 nahradíme 1
Funkčnosť vytvorenej premennej si overíme tak isto ako v prvom prípade. Cez Tag Assistant sa dostaneme na stránku košíka, v hornej lište zvolíme možnosť variables, nájdeme novo vytvorenú premennú a skontrolujeme, či sa jej hodnota zhoduje s realitou.
Ešte upozornenie na záver – pri vytváraní premenných z dátovej vrstvy rozlišujte veľké a malé písmená, pretože Javascript je tak ako väčšina programovacích jazykov case – sensitive. Preto Product a product nie je to isté.
