Ochočte si taky Google Tag Manager

Představíme si technologii GTM, popíšeme si základní postupy pro konfiguraci a vyhodnotíme, jestli je GTM opravdu tak super.

O co jde?

Webová analytika dnes vládne světu markeťáků a podobných živočichů. Většinou od nich k nám, webařům a programátorům, přilétne požadavek typu: "chceme měřit počet odeslání formuláře", tady máte konfiguraci gaq.push(..). A je hotovo.

Jednomu by to mohlo přijít jako ideální model, na kterém není třeba nic vylepšovat. Pravdou je, že pro korektní implementaci je třeba, aby všechny části takového workflow fungovaly bezvadně. Takže:

• Analytik ví, co chce měřit.
• Developer ví, co má měřit.
• Obě strany si jasně specifikují pravidla, kdy měřit.
• Developer má prostor, zná prostředí a je schopen nový kus kódu implementovat.

Bystří tedy již pochopili, že samotný webový analytik, byť by se sebevíce snažil, by nezměřil ani jedno číslo.

Něco na tom asi bude, když to ani pánům z Googlu nedalo spát a obdarovali nás nástrojem GTM. Ten právě snižuje, optimálně úplně eliminuje, míru zásahů developerem do samotného kódu webové stránky. Nově si tedy samotný analytik navolí, v jakých stavech webu se vystřelí událost A, a v jakých se vystřelí událost B, a v jakých se pošle nějaký konverzní kód...

Jak to?

Nejsou v tom kouzla, výstupem konfigurace GTM je zase jenom javascript (kus kódu, který běží na pozadí webových stránek), který ale není napsaný developerem, ale vygenerovaný na základě konfigurace, kterou si analytik naklikal u odpolední kávičky.

Například?

Forrest standardně implementuje zachytávání analytických událostí typu:

• PageView - návštěva stránky
• FileDownload - stažení souboru
• OutgoingLink - proklik uživatele na jiný web
• Fulltext vyhledávání - dotaz, počet výsledků

Všechny tyto události lze s trochou cviku naklikat v GTM. Jediné, co bude analytik tentokrát chtít po samotném developerovi, je zasazení inicializačního GTM kódu.

Takže přeci jenom samotný analytik nic nezmůže...

Pro nasazení spouštěcího GTM kódu na určitý web prostě je potřeba, aby ho tam někdo dostal. Jakmile se to ale stane, je už všechno ostatní už jen na analytikovi, jak si události nastaví.

Dobře, jak tedy s GTM začít?

Aby člověk pochopil princip Google Tag Manageru, bylo by ideální, kdyby:

1. se orientoval ve webové analytice (Google Analytics, schopnost si stanovit cíle),
2. znal i trošku té developerské činnosti (hlavně v oblasti JS).

První bod je logický, druhý pak dokáže poměrně ušetřit čas. GTM se totiž skládá ze třech částí: Makra, Pravidla a Značky. Tyto části ve vzájemném propojení spouští analytické kódy. Když se nad tím, jakožto developerské činnosti člověk znalý, zamyslíte, uvědomíte si, že v JS je v podstatě to samé - tedy nějaká Pravidla, nějaké spustitelné analytické Značky a nějaká Makra, neboli hodnoty, na základě kterých se Pravidla spouštějí.

Do začátku bych tedy určitě doporučil oficiální dokumentaci: https://developers.google.com/tag-manager/

Vyplatí se investovat čas a převést své projekty na GTM?

FG Forrest se touto cestou vydal a zatím mu to přináší ovoce - analytické kódy jsou momentálně přehledné i pro analytiky, navíc lze kdykoliv cokoliv změnit bez zásahu do webové stránky. Ale, jako vždy, je třeba nad problematikou přemýšlet! Ne vždy se implementace Google Tag Manageru vyplatí.

Kdy je tedy vhodné na projekt nasadit GTM?

Platí zde pár zásad, kdy je vhodné GTM použít, a kdy ne:

1. Web musí být realizovaný konvenční technologií HTML. Flash a Java by práci velice komplikovali.
2. Pravidla analytických událostí nesmí být komplikovaná, ideální jsou pravidla typu: "URL = /cs/objednavka" , nebo "uživatel klikl na element s id home-page".
3. Javascript na stránkách by měl DOM události přeposílat a nezachytávat. Typicky return falseversus e.preventDefault().

Síla GTM je úměrná zručnosti jeho implementátora. Pokud ovládá i základní práci s DOM inspektorem, popř. javascript konzolí, dokáže GTM používat efektivně i při složitějších zadání.

Jak si práci s GTM usnadnit?

Vhodné je stanovit si nějaké zásady a konvence. FG Forrest se s Vámi o nějaké podělí:

1. Tzv. custom události, které se ukládají do datové vrstvy GTM, pojmenováváme s prefixem cGtm + název události. Malé "c" značí slovo "custom" - vlastní. Konkrétním příkladem může být:cGtmLogin. Díky tomuto prefixu události lépe rozlišíte od těch systémových.
2. Hodnoty ukládané do datové vrstvy pojmenováváme vGtm[n] (v jako variable). Přičemž n se rovná 1-nekonečno. Pro získání hodnot z různých událostí Vám pak bude stačit jen sada maker -vGtm1, vGtm2, vGtm3...
3. Implicitně implementujte základní GTM podporu opakujících se komponent vašich webů do základní kostry. Typicky jde o fulltext - na Vašich webech může mít různé podoby, ale funkcionalita na pozadí je stejná. Není tedy problém do funkcionality integrovat i vystřelování fulltext informací pro GTM.
4. Sepište základní manuál definice GTM pro vaše weby. Z něj pak lze konfigurace jen rozkopírovat a případně modifikovat. Nebudete tedy muset vždy všechno objevovat znovu. K manuálu se určitě hodí odkaz na již realizované weby s GTM.

Takže to není tak jednoduché?

Po pravdě opravdu není. Trvalo nám nějaký měsíc, než jsme našli tu správnou cestu. Prošli jsme si prvotním nadšením, následovala studená sprcha, kdy jsme rychle narazili na omezení GTM. Po pár zrealizovaných webech a e-shopech jsme ale našli tu správnou notu. Chce to tedy trochu cviku.

Nějaké rady na závěr?

Ano, při práci s GTM jsme objevili na pár vychytávek:

1. Lze používat makra v makru. Typicky v makru typu "vlastní js" lze používat zápis {{název jiného makra}}.
2. HTML inicializaci GTM kontejneru dávejte striktně za začátek <body> včetně HTML komentáře. Jenom tak Vám následně projde ověření webu v Google Webmaster Tools.
3. Číslo UA-ID si uložte do makra. V případě jeho změny půjde o změnu pouze na jednom místě.
4. Analytické kódy třetích stran, které nemají v GTM přímou podporu, lze vkládat jako značku s vlastním HTML.
5. Makra vlastní JS definice lze využít pro navrácení logické 1 nebo 0, čehož následně využijete při definici pravidla. Takto lze tedy vydefinovat podmínku libovolné složitosti.
6. Nepoužívejte naslouchač události "odeslání formuláře", pokud máte serverovou validaci formulářů. Událost se totiž spustí i v případě, kdy se formulář ze serveru vrátil nevalidní.

photo credit: katiew via photopin cc