Google Tag Manager – základní nastavení

Google Tag Manager

Prosíte svého IT technika o nasazení remarketingového kódu již několikátý týden? Máte na webu tolik značek, že už ani nevíte, kde začínají a kde končí? Nebo máte více webů a ničí vás kontrolovat každý zvlášť?

Všechny tyto požadavky mají jednu odpověď: Google Tag Manager, česky Správce značek Google (dále jen GTM).

V čem nám může GTM pomoci a jak si ho (zdarma!) pořídit?

Toto je první ze tří článků o Google Tag Manageru, který popisuje základy. V dalších dílech se podívám na složitější nastavení, jako je měření cílů pro Google Analytics nebo nasazení Facebook Pixelu prostřednictvím GTM.

Na konci tohoto článku vám zároveň prozradím, jak snadno zjistit, jestli vaše Google a Facebook kódy fungují jak mají. Doporučuji vše dělat v prohlížeči Chrome, některé popisované věci fungují správně jen tam (protože jsou od Google).

Co je Google Tag Manager (Správce značek Google)

Google Tag Manager je systém pro správu měřicích a dalších kódů, GTM jim říká značky. Funguje pro správu značek na webových stránkách, AMP verzi webu i v mobilních aplikacích.

Na web umístíte pouze jeden kód – GTM. Všechny další kódy pak vkládáte prostřednictvím webového rozhraní GTM. Většinou už není potřeba zasahovat do zdrojového kódu webu.

Celý postup značně usnadňuje a zrychluje práci s kódy (angl. tagy), protože z nasazení jsou (většinou) vynecháni webmasteři – kteří skoro nikdy nemají čas a stojí peníze.

Proč Google Tag Manager používat

  • GTM umožňuje vložení nových značek (kódů, tagů) během několika minut. O vložení kódů už není potřeba žádat webmastera.
  • Usnadňuje odhalení a opravu případných nefunkčních kódů před i po jejich nasazení na web.
  • Výrazně zlepšuje přehled o tom, které kódy web používá.
  • Protože je od Google, nabízí řadu možností v oblasti Google Analytics a Google Ads.
  • Vedle kódů společnosti Google umožňuje vkládat i kódy třetích stran (Facebook, Sklik) a vlastní skripty.
  • Vložení a správa značek je v GTM rozhraní pro většinu uživatelů daleko snazší a méně hrozivá, než jejich vkládání přímo do kódu „živého“ webu.
  • Pokud je potřeba dát ke kódům přístup více lidem nebo agenturám, díky uložené historii změn je snadné vypátrat, kdo kdy provedl jakou změnu. Navíc umožňuje přiřadit uživatelům různé úrovně oprávnění (náhled, editace, publikace značek).
  • Zmenšení objemu html kódu na webu a asynchronní načítání kódů v GTM může mírně zlepšit rychlost načítání webu.

Na co si dát u GTM pozor

  • GTM není vhodný pro instituce se specifickými nároky na zabezpečení (typicky banky). Data a měřicí kódy jsou totiž uchovány u třetí strany – Google.
  • Některá rozšíření prohlížečů v základním nastavení GTM blokují, takže u části uživatelů se nespustí ani kódy v něm obsažené.
  • Některé kódy třetích stran přes GTM nefungují, je dobré si to předem ověřit u poskytovatele kódu.
  • Kódy jsou zapeklitá věc. Přestože přes GTM je dokáže vložit i IT laik, občas vložený kód rozbije něco na webu a můžete to zjistit až za pár dnů. Většinou se nepříjemnostem dá snadno zabránit pomocí použití náhledu GTM, viz dále.
  • Někdy se bez pomoci programátora neobejdete ani s GTM. Typicky pokud je potřeba do kódu dosazovat proměnné, např. u měření transakcí nebo dynamického remarketingu.

Jak Google Tag Manager nasadit

Na stránce tagmanager.google.com si vytvořte účet Správce značek Google. Pokud používáte i AMP verzi webu, nezapomeňte vytvořit jeden kontejner pro web a druhý kontejner pro AMP.

Po odsouhlasení podmínek získáte svůj GTM kód.

instalace správce značek google

Kód je rozdělen na dvě části: část <script> se vkládá do záhlaví stránky <head> a část <noscript> do těla za značku <body>.

Jakmile je kód na webu, můžete do GTM přidat své kódy (značky).

Jestli přidáváte GTM na nový web, tak můžete všechny značky na web přidat přes něj. Pokud jste přidali GTM na starší web, je nejlepší provést kontrolu stávajících kódů na webu a maximum z nich vložit přes GTM. V tom případě nezapomeňte stávající značky z webu odstranit. V žádném případě nechcete mít stejnou značku na webu dvakrát – jednou přímo v kódu webu a podruhé přes GTM (např. v GA byste měli zkreslené statistiky).

Nejčastěji budete přes GTM řešit tyto značky:

  • Google Analytics
  • Google Ads remarketing a měření konverzí
  • Sklik remarketing a měření konverzí
  • Facebook pixel

Pro zvídavé a pokročilé uživatele: proč má kód dvě části a proč se má každá část umístit jinam?

Část <script> je zodpovědná za minimálně 98% práce GTM. Část <noscript> slouží jen jako záloha pro případy, kdy má prohlížeč uživatele vypnutý JavaScript. Jelikož většina webů bez JavaScriptu vypadá hůře a spousta věcí na nich nefunguje, dá se bezpečně říci, že drtivá většina lidí nechává JavaScript zapnutý. Ve skutečnosti zase tak moc nevadí, pokud část <noscript> na web vůbec nedáte; jednak přijdete o data jen u 0.2% – 2% uživatelů, za druhé řada funkcí GTM funguje jen se zapnutým JavaScriptem a nezachrání to ani <noscript>.

Část <script> může být teoreticky kdekoliv na webu (např. pokud do záhlaví kód vložit nemůžete). Proč je dobré jej umístit co nejvýše do části <head>? Čím výš ve struktuře stránky kód umístíte, tím rychleji se bude načítat a zvýší se pravděpodobnost, že se kódy v GTM obsažené zavčas aktivují. Pokud byste jej dali třeba do zápatí a měli přes GTM vloženy Google Analytics, velmi pravděpodobně budete mít zkreslené statistiky směrem dolů, protože se GA kód nestačí vždy aktivovat.

Část <noscript> aktivuje iFrame, která není v <head> podporována, proto musí být dle pokynů v těle stránky <body>.

Nasazení Google Analytics

Protože se bude jednat o nejčastější kód na webu, podáváme se na nasazení Google Analytics prostřednictvím GTM. Jejich nasazení přes GTM je otázka maximálně pěti minut.

V GTM v levém menu vyberete položku Značky a kliknete na červené tlačítko Nová. Značku můžete pojmenovat Google Analytics. Pokud plánujete přes GTM vkládat více značek, typicky pro měření Google Analytics událostí, zapřemýšlejte nad srozumitelným systémem názvů značek. Člověk do GTM chodí třeba jednou za půl roku a snadno zapomenete, co jste tam vlastně před půl rokem vkládali.

Při výběru typu značky zvolíte Google Analytics – Universal Analytics. Typ měření je Zobrazení stránky. Při prvním vložení Google Analytics kódu je potřeba v okýnku Nastavení Google Analytics vytvořit novou proměnnou.

K čemu je to dobré? Protože často budete Google Analytics značku vkládat vícekrát. Např. v našem firemním GTM ji mám osmkrát, protože přes Google Analytics měřím různé konverzní události. Abych nemusel vždy znovu vypisovat detaily ke Google Analytics, stačí mi vybrat proměnnou.

Nastavení proměnné není složité, vložíte měřící číslo ze svého Google Analytics účtu a máte hotovo. Hlavně nezapomeňte proměnnou výstižně pojmenovat, např. Google Analytics. Opět, pokud časem budete mít více proměnných, tak abyste věděli, která proměnná je ta správná.

U proměnné je možné specifikovat některá pokročilá nastavení. Pro většinu uživatelů nejsou podstatná, jen pokud se vrhnete na něco složitějšího, např. chcete měřit provoz napříč více doménami nebo používáte AMP verzi webu, potom je budete potřebovat.

Snad jen jedna věc se hodí všem; protože IP adresa může být za určitých okolností považována za osobní údaj, je lepší ji do Google Analytics poslat anonymizovanou. O geografické reporty ochuzeni nebudete a navíc budete mít jistotu, že neoprávněně neschraňujete IP adresy uživatelů. Docílíte toho přidáním pole anonymizeIp : true.

V posledním kroku nezapomeňte nastavit, na které stránce se má značka spouštět. U Google Analytics zvolíte jako spouštěcí pravidlo All pages – Všechny stránky.

Náhled a publikace GTM

Posledním krokem je upravený GTM publikovat přes modré tlačítko ODESLAT vpravo nahoře. Občas si při práci s GTM lámu hlavu nad tím, proč mi nově vložené kódy nefungují, abych posléze zjistil, že jsem je zapomněl Odeslat. Do té doby jsou totiž jen v GTM, nikoliv na webu.

Ještě před odesláním na web je moudré provést náhled, zejména pokud jste prováděli složitější změny nebo experimentujete s něčím, kde si nejste jisti výsledkem. Tlačítko NÁHLED najdete také vpravo nahoře, po jeho stisknutí se vám v GTM zobrazí oranžová informace.

Náhled funguje v Google Chrome. Nechte si otevřené okno s GTM a vedle něj si otevřete v nové záložce web, ke kterému GTM patří.  Ve spodní části prohlížeče vám vyjede okno s GTM diagnostikou. Pokud se nic nestane, proveďte tvrdé obnovení (Ctrl + F5). Pokud se ani poté nic nestane, zkontrolujte, jestli skutečně máte GTM na webu a jestli máte otevřen web, ke kterému GTM patří.

gtm preview

Pokud v náhledu zjistíte, že některá značka nefunguje, můžete ji v GTM opravit, kliknout na tlačítko Aktualizovat a náhled opět zkontrolovat. Výhoda náhledu je ta, že dokud nekliknete na tlačítko Odeslat, vidíte změny v kódech jen vy v náhledu. Ostatní uživatelé zatím web vidí ve stavu před změnami, takže pokud při pokusech s kódy něco dočasně polámete, nikdo se o tom nemusí dozvědět :-)

Jak se ujistit, že Google a Facebook kódy fungují

Pro Google kódy a Facebook pixel existují rozšíření do Chrome, které umí (minimálně v případě FB) poskytnout daleko víc informací o funkčnosti kódu.

Pro Google kódy si do Chrome přidejte rozšíření Tag Assistent (by Google). V Chrome se vám objeví nová ikonka. Otevřete svůj web, klikněte na ikonku a klikněte na modré tlačítko Enable. Obnovte stránku stisknutím F5 a znovu klikněte na ikonku. V otevřeném okně uvidíte, které Google kódy na webu máte a v jakém jsou stavu.

tag assistant

Zeleně svítící kódy jsou v pořádku, modře svítící vám nabídnou doporučení ke zlepšení, žlutě svítící určitě vyžadují pozornost a červeně svítící nefungují vůbec.

Podobným způsobem můžete do Chrome vložit i FB Pixel Helper a diagnostikovat případné potíže s Facebook Pixelem.

fb pixel helper

 

Flickr Creative Commons Image via Taz.