Příručka marketéra: Usnadněte si život s Google Tag Managerem

google-tag

Určitě to znáte taky – chcete na web svého klienta dostat retargetingový kód Skliku. Zašlete ho na podporu s požadavkem na implementaci. Zpět vám přijde odpověď – 3 000 Kč za nasazení. Chcete předejít podobným (a mnoha jiným) nepříjemnostem? Naučte se ovládat Google Tag Manager.

Google Tag Manager – zkráceně GTM – je na světě již od roku 2012. Během té doby se vyvinul v plnohodnotný nástroj pro efektivní správu značek neboli tagů. S tím, jak rostl počet jeho uživatelů, se zvyšoval i počet funkcí a možností, které nástroj nabízí. V praxi usnadňuje život převážně markeťákům, kteří chtějí mít správu všech tagů pod svojí kontrolou.

Co že si pod tím tagem můžete představit? Typicky se jedná o tyto implementace:

  • měření návštěv pomocí Google Analytics
  • retargetingový kód Skliku
  • konverzní kódy Heureky a Zboží
  • měřící pixel Facebooku s vlastními událostmi
  • Hotjar
  • lišta s cookies hláškou

Váháte, jestli se vám vyplatí časová investice do naučení nového nástroje? Tady jsou 3 důvody, proč je odpověď jednoznačně ano:

1. Ušetříte čas a peníze, které by se musely vynaložit na práci programátorů. GTM je zdarma.

2. Budete mít přehled o tom, jaké tagy a kdy se spouští.

3. Svoji práci můžete lehce sdílet spolupracovníkům a podílet se společně na kvalitním výsledku.

Zde je nutné zmínit jednu věc – základní práci s nasazením tagů se zvládnete naučit během pár hodin. Pro plnohodnotné využití nástroje GTM, jeho ladění a debuggování se však neobejdete bez pokročilejších znalostí a zákonitostí Javascriptu. Pro jeho studium doporučuji interaktivní kurz zdarma na Codeacademy.

Základní struktura uživatelského prostředí Google Tag Manageru

Overview – Shrnutí

google_tag_man

Základní obrazovka s přehledem změn a zobrazením aktuální „live“ verze (vpravo nahoře). Pod záložkou „Activity History“ si můžete zobrazit historii aktivit na účtu.

Container – Kontejner

Kontejner je v podstatě Javascriptový kód, který se vloží do zdrojového kódu vaší stránky. Obsahuje kompletní nastavení  všechny tagy, triggery a proměnné, se kterými se následně v GTM pracuje. Pokyny k nasazení kódu obdržíte po vytvoření nového kontejneru.

Dnes již většina e-shopových řešení umožňuje vložení GTM na stránky pomocí jednoho kliknutí, na WordPress existuje šikovný plugin DuracellTomi’s Google Tag Manager for WordPress, se kterým je implementace GTM záležitostí jedné minuty. Pokud si s nasazením nevíte rady, zeptejte se svého programátora, případně zašlete dotaz na podporu vašeho e-shopového řešení. Dokumentaci pro nasazení kódu naleznete v nápovědě Google.

Příklad implementace GTM v e-shopovém řešení Shoptet – stačí zadat GTM ID a uložit:

gtm2

Tags – Značky

Tagy jsou základním stavebním kamenem GTM. Jsou to v podstatě kusy kódu, které se za určitých podmínek spustí. Některé tagy mají svoji předpřipravenou šablonu (Google Analytics, Hotjar aj.), jiné lze vložit pomocí vlastního HTML kódu nebo obrázku (Custom HTML nebo Custom Image).

Triggers – Pravidla

Každý tag s sebou nese i určité triggery, za kterých se kód spustí, a zároveň výjimky (exceptions), kdy se naopak tagy spouštět nesmějí. Mezi tyto triggery patří např. zobrazení konkrétní stránky (třeba děkovné stránky na e-shopu), kliknutí na tlačítko na webu (např. na tlačítko Přidat do košíku) nebo odeslání kontaktního formuláře (pro posílání eventů a následnou tvorbu cílů v GA).

Variables – Proměnné

Proměnné v sobě uchovávají různorodé hodnoty, které lze dynamicky propisovat do tagů a triggerů. Některé typy proměnných jsou již přednastavené, např. konstanta (typicky UA ID pro Google Analytics), informace o URL (např. Page URL, Page Path či Page Hostname), informace o formuláři či o kliknutí na webu.

Samostatnou kapitolou v proměnných je tzv. datová vrstva, neboli dataLayer. Zjednodušeně se jedná o kus kódu, který programátor umístí do zdrojového kódu webové stránky. Do této dataLayer pak dynamicky ukládá různé informace, jejíž hodnoty můžeme posléze v GTM vložit do tagů. Typicky se jedná o výši hodnoty objednávky na děkovné stránce, měření e-commerce v GA nebo informace pro dynamický remarketing pro Google Adwords. V praxi pak může dataLayer na stránce vypadat např. takto:

layers

Problematika dataLayer je velmi široká a tento článek nemá za účel ji zcela pokrýt. Pokud byste se chtěli o dataLayer dozvědět více, můžete začít textem Google Tag Manager Data Layer explained like never before od OptimizeSmart. Podotýkám, že je to čtení spíše technického rázu. Dokumentaci pro programátory případně naleznete v Developers od Google.

Jak Google Tag Manager funguje?

Nyní si na názorném příkladu ukážeme, jak nasadit základní Google Analytics tag. Předpokládejme, že již máte Google Tag Manager na stránce nasazený, a před sebou máte úplně nový kontejner.

1. V levém panelu GTM klikneme na Tags (Značky) a vytvoříme novou.

2. Tag si vhodně pojmenujeme (např. UA – pageview, jelikož budeme operovat s Universal Analytics a posílat pageview) a klikneme na Tag Configuration.

pageview

3. Z nabídky typů tagů vybereme Universal Analytics. Do pole Tracking ID dáme naše UA ID, které zjistíme v nastavení Google Analytics.

pageview2

4. Klikneme na pole s triggery (podmínkami) a vybereme přednastavený trigger All Pages. To nám zaručí, že se tento kód spustí při načtení každé stránky.

pageview3

Takto nastavený tag můžeme jednoduše pomocí tlačítka Save uložit.

Jak dostat změny na stránky

Nedílnou součástí práce s GTM je publikace dokončených změn. To se provádí kliknutím na tlačítko Publish v pravém horním rohu stránky:

publish

Následně se zobrazí okno s informacemi o publikovaných změnách, které se promítnou do tzv. nové verze prostředí GTM. Zde je dobrým zvykem upravit název verze, typicky se jedná o informaci o změnách. V našem případě by název mohl být „Nasazení základního měřícího kódu pro Google Analytics“. Poctivé psaní informací o změnách do názvů či popisků nové verze se vám do budoucna bude hodit především tehdy, když budete hledat ve svých značkách chyby.

Změny, které v průběhu práce v kontejneru provádíte, se automaticky ukládají, a k rozdělané práci se můžete kdykoliv později vrátit. Dokud změny nepublikujete, nic se na vašich stránkách nezmění.

Začátkem září navíc vyšla nová verze GTM, která standardní postup práce obohacuje o tzv. workspace  pracovní prostory. O nich se více dočtete v článku Novinky v prostředí Google Tag Manageru.

Jak si zobrazit přehled spuštěných tagů na stránce?

GTM má i velmi užitečnou funkci zobrazení náhledu, tzv. preview. Po jeho aktivaci se na vašich stránkách zobrazí tzv. ladící lišta s mnoha užitečnými informacemi. Jednou z jejích funkcí je výpis tagů, které jsou na dané stránce aktivní, což je jeden ze způsobů, jak ověřit jejich funkčnost.

Náhled aktivujete kliknutím na tlačítko Preview v menu, které se vám objeví po kliknutí na šipku vedle tlačítka Publish.

publish2

Poté si v novém panelu prohlížeče otevřete svoji stránku a dole se vám objeví ladící lišta. Její největší část se dělí na 2 oddíly: Tags Fired On This Page, což je souhrn tagů, které se na dané stránce spustily, a Tags Not Fired On This Page, což je naopak přehled nespuštěných tagů.

Příklad ladící lišty v akci:

lista

Tipy na závěr

V tomto článku jsme si ukázali, jak nám může GTM pomoct v každodenní praxi, a jak nasadit základní GA kód. Tím však možnosti GTM pochopitelně nekončí. Obvyklý postup nasazení tagů pokračuje následovně (odstupňované přibližně dle složitosti implementace):

1. Jednoduché Custom HTML tagy (Facebook pixel, Sklik retargeting), které se zobrazují na všech stránkách.

2. Složitější Custom HTML tagy s dynamicky propsanou hodnotou (konverzní kódy Zboží či Heuréky).

3. Event v návaznosti na akce na stránce – využití proměnných typu Form, Page nebo Click (AddToCart event Facebook pixelu, odeslání eventu do GA po odeslání kontaktního formuláře).

4. Pokročilejší posílání dat do GA – např. měření elektronického obchodu, vlastních dimenzí, metrik, seskupování obsahu aj.

Výhod, které GTM nám markeťákům nabízí, je opravdu hodně. Čas strávený nad sebezlepšováním v tomto nástroji se mnohonásobně vrátí, a to hlavně kvůli menší závislosti na práci programátorů a většímu přehledu nasazených tagů a podmínek pro jejich spouštění.

Diskuze k článku