Google tag manager je nástroj, díky kterému můžeme na náš web vkládat různé tagy (značky) rychle a jednoduše bez nutnosti modifikace zdrojového kódu. To znamená, že k tomu není nutná práce programátorů. Jednou z nejdůležitějších částí Google Tag Manageru je dataLayer.
DataLayer (datová vrstva) je jedním z klíčových pojmů ve světě Google Tag Manager (GTM). Je to javaskriptová proměnná, a v analytice nám slouží k předávání dat z webu do GTM. Zjednodušeně řečeno je to jakási virtuální vrstva webu, která obsahuje různá data a GTM si z dataLayeru načítá hodnoty potřebných proměnných. Tedy za předpokladu, že se v něm nacházejí. Data v dataLayery jsou generována jednotlivými uživateli, kteří s webem nějakým způsobem interagují. Například kliknou na náhled produktu, nebo si přidají produkt do košíku. V dataLayery jsou tedy uloženy informace jako například text kliknutého tlačítka, cena produktu nebo hodnota objednávky.
Na první pohled se může dataLayer zdát komplikovaný. Základy, které potřebujeme vědět pro tvorbu proměnných, lze zcela jednoduše a rychle pochopit.
Kde v GTM najdeme dataLayer?
V GTM klikněte na pravé straně na tlačítko “preview” – otevře se nám nové okno – Google Tag Assistant. Vyplníte url adresu webové stránky a dostanete se do debug módu na dané stránce. Následně se vraťte na stránku Google Tag Assistant.
Základní princip dataLayer
Každý objekt v dataLayery se skládá z klíče a hodnoty. Klíč zůstává stejný, mění se nám jen jeho hodnota. V našem příkladu to vypadá následovně:
Klíč = pageType, hodnota = productDetail
DataLayer je tvořen více vrstvami, ty jsou od sebe odděleny tabulátorem a {} závorkou. Jedná se o vnořené datové vrstvy, které jsou hierarchicky uspořádány. Každá vnořená vrstva je posunuta doprava.
Chcete-li pracovat s údaji z dataLayeru a používat je v tagech (značkách), či triggerech (spouštěčích) musíte si z nich vytvořit dataLayer variables (proměnné). Proměnné tohoto typu (dataLayer variables) jsou asi nejpoužívanější typ proměnných a při práci v GTM se s nimi budete setkávat často.
Vytváření proměnných z dataLayeru
Pojďme si vytvořit proměnnou, díky které zjistíme, o jaký typ stránky se jedná. V e-shopech se běžně nacházejí produktové nebo kategorické stránky či stránka košíku.
1. V Google Tag Manager vyberte Proměnné > v sekci “User – Defined Variables” New > Data Layer Variable
2. Vlevo nahoře vyplníme název proměnné. U proměnných z datové vrstvy zvykneme používat označení DLV – /název klíče, který odpovídá hodnotě, kterou chceme vytáhnout/
3. Vyplníme Data Layer Variable Name. Jelikož v dataLayery mám více vnořených vrstev, při psaní dataLayer Variable Name budeme používat speciální tečkovou notaci. Jednotlivé vrstvy od sebe oddělujeme tečkou a píšeme je od nejvyšší po nejnižší. Zjednodušeně řečeno, shora dolů a zprava doleva. Název naší proměnné bude vypadat takto:
shoptet.pageType
4. Novou proměnnou uložíme
Proměnnou pageType využijete například v případě, že chcete odpálit určitý tag pouze na stránce produktu. Díky ní vytvoříte trigger, který se bude spouštět pouze na určitém typu stránky.
Pojďme si zkontrolovat, zda proměnná funguje správně. Opět přejděte do preview modu. V Preview mode se na vaší stránce proklikněte například na produkt. V Google Tag Assistant tentokrát zvolte možnost Variables, na levé straně vyberte příslušnou událost (v našem případě se jedná o Window Loaded). Mezi proměnnými byste měli vidět právě vytvořenou proměnnou DVL – pageType i s příslušnou hodnotou.
Jak vytáhnout údaje z pole proměnných?
Při práci s dataLayerem se můžete setkat také s jiným typem vnořeného objektu, a tím je pole. Pole je v Javascriptu ohraničeno hranatými závorkami a je tvořeno více prvky. Zjednodušeně můžeme pole zapsat jako:
[A, B, C]
Pozice prvků pole jsou očíslovány. Číslování začíná nulou. Náš příklad vypadá takto.
A = poloha 0 B = poloha 1 C = poloha 2
S polem proměnných se setkáme například v košíku nebo na děkovací stránce po odeslání objednávky. Je to jednoduše řečeno, pokud jeden objekt (řádek) dataLayeru obsahuje další objekty, které mají své zvláštní hodnoty. Například více produktů v košíku nebo objednávce. Každý z těchto produktů má přitom svůj název, id, cenu, kategorii, atp. Pojďme si do košíku vložit více produktů a podívejme se, jak vypadá dataLayer na stránce košíku.
Pokud bychom chtěli do proměnné datové vrstvy uložit například ID prvního produktu, náš klíč by byl v tomto případě ecommerce.checkout.product.0.id
Pro cenu prvního produktu by klíč vypadal následovně ecommerce.checkout.product.0.price
V případě, že chceme definovat proměnné druhého produktu 0 nahradíme 1
Funkčnost vytvořené proměnné si ověříme stejně jako v prvním případě. Přes Tag Assistant se dostaneme na stránku košíku, v horní liště zvolíme možnost variables, najdeme nově vytvořenou proměnnou a zkontrolujeme, zda se její hodnota shoduje s realitou.
Ještě upozornění na závěr – při vytváření proměnných z datové vrstvy rozlišujte velká a malá písmena, protože Javascript je tak jako většina programovacích jazyků case – sensitive. Proto Product a product není totéž.
