Kam umístit kód Google Tag Manageru?

od WEBROS


11. 12. 2016

Kam umístit kód Google Tag Manageru?

Možná Vám to bude znít povědomě. Rozhodli jste se začít používat Google Tag Manager (GTM) a teď si nejste jisti, kam umístit kód GTM kontejneru. Google původně doporučoval umístit GTM kontejner bezprostředně za tag body, ale to už neplatí. GTM kontejner má teď dvě části, přičemž jedna patří do hlavičky a druhá do těla HTML kódu.

Kde najdu svůj Snippet?

GTM poskytuje přesné instrukce, kam daný kód umístit.
Instalační kód se nachází v horní navigaci v sekci Admin. Pod Container Settings (Natavení kontejneru) je možnost “Install Google Tag Manager” (Instalovat Google Tag Manager).

Následující stránka s kódem by měla vypadat takto.

Jak ten kód funguje?

Pojďme se podívat na kód GTM kontejneru a na to co dělá.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-ABC123');</script>
<!-- End Google Tag Manager -->

V první části vidíme tag script. Uvnitř je JavaScript funkce, která nahraje konkrétní kontejner na Vaši stránku. Vytvoří pro něj nový tag script a určí jeho zdroj jako url Vašeho GTM kontejneru. Toto je ta důležitá část a patří do hlavičky. Také říká Vaší stránce, aby nahrála GTM kontejner asynchronně, to znamená že zbytek stránky se může pořád nahrávat, zatímco Google už dělá svou práci.


<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-NS78ZTB"
height="0" width="0" style="display:none;visibility:hidden">iframe>noscript>

V druhé části vidíme tag noscript. Funguje jako záloha umožňující sledovat uživatele bez JavaScriptu (jasně, těch nebude moc). Říká prohlížeči, aby vytvořil iframe verzi GTM kontejneru, pokud uživatel nemá povolený JavaScript. Některé tagy a pixely je možné nahrát správně i pro uživatele bez JavaScriptu. Tato část GTM skriptu patří do těla dokumentu a je důležitá jenom tehdy, pokud Vás zajímají uživatelé bez JS.

 

Proč do hlavičky?

Google doporučuje umístit kód na začátek hlavičky a ne dovnitř žádného jiného html elementu. Proč? Je to lepší kvůli trackování. Čím víc nahoře kód je, tím rychleji se nahraje. Ve starší verzi GTM se doporučovalo nahrát kód do těla dokumentu, ale tady hrozí nebezpečí, že nezaznamená návštěvníky, kteří stránku opustí dřív než se kód stihne nahrát.
To je teď ještě důležitější než dříve, s příchodem nového A/B testovacího nástroje Google Optimize. Pro jeho správnou funkci je potřeba, aby se GTM kód nahrál co nejdříve.

DataLayer umístěte nad kód kontejneru.

Teď musíme někam umístit dataLayer. Pokud přesouváte svůj starý GTM kód, nezapomeňte taky přesunout dataLayer. Pokud umístíte dataLayer až za kód, může docházet k chybám při zápisu dat do dataLayeru. GTM snippet přepíše dataLayer, který GTM automaticky vytvořil a Vám najednou budou chybět důležitá data, až se začnou spouštět první Tagy.

Nejhorší možné případy


Pořád to slyšíme dokola. Možná Vaše stránka používá šablonu, nebo nemáte dostatečná oprávnění k úpravě kódu.


“Můžu GTM kontejner umístit do jiné části stránky?”
I když se to nedoporučuje, je možné GTM skript a noscript tag umístit do těla dokumentu, jak je ukázáno níže. Pokud ovšem plánujete GTM použít pro A/B testování, pak je nezbytné umístit snippet do hlavičky.
 

“Takže musím něco měnit?”
Zatím ne. Možná už GTM používáte a nechcete obětovat svůj čas změně něčeho, co funguje. Nicméně do budoucna se může stát, že tato starší metoda bude nepřesná ve sledování návštěvníků a bude způsobovat chyby v testování.
 

“Můžu GTM kontejner umístit do patičky stránky?”
To v žádném případě nelze doporučit, a to z těch stejných důvodů, které už jsme zmínili. Chcete, aby se GTM kontejner nahrál co nejdříve, abyste zachytili co nejvíce uživatelů.

Tak, to je vše. Postupujte podle návodu a umístěte GTM kontejner pokud možno na začátek hlavičky Vaší stránky.

Zdroj: LunaMetrics