Navigate
X

GTM: Custom HTML tag – Tipy

Pár tipů ohledně používání nejďábelštějšího tagu “Custom HTML”. Jak využít HTML/JS komentáře, rozdíl pořadí v Preview mode vs. spuštění tagů a pár poznámek ke kontrole před publikováním.

Tip #1 – Využijte komentáře

Ať už to víte, či ne – GTM automaticky

  • odstraňuje komentáře (JS, HTML)
  • odstraňuje prázdné řádky
  • odstraňuje mezery mezi příkazy

Níže je ukázkový kód, který obsahuje všechny tyto neduhy:

<script>
  // blablabla
  console.log("Skript - start");                        console.log("Skript - mezerky");
  
  
  console.log("Skript - neco mezi");
  
  
  console.log("Skript - end");
</script>

GTM si tohle nenechá líbit a v gtm.js vygeneruje minifikovaný tag:

'\n\x3cscript type\x3d\x22text/gtmscript\x22\x3econsole.log(\x22Skript - start\x22);console.log(\x22Skript - mezerky\x22);console.log(\x22Skript - neco mezi\x22);console.log(\x22Skript - end\x22);\x3c/script\x3e\n'

Co tohle chování nevyužít pro dokumentaci vložených tagů? Pokud se o web stará x dodavatelů (jeden řeší PPCčka, druhý Facebook, třetí Affiliate…) je fajn si ke každému tagu dopsat odkud se vzal, kdo jej poslal, kdo jej vložil a ideálně v jakém tiketu se tohle řešilo. Jestli jste někdy řešili otázku “Kdo mi to poslal?” a nechcete prohledávat poštu a složky, tak je tohle možná cesta.

<!-- 
  Agentura: AGOSKA, www.agoska.cz
  Kontakt: Jarda Petarda, +420 123 456 789
  Editoval: dyma
  Tiket: www.mujsupport.cz/?id=55
-->
<script>
  // Skript: Vypis do konzole
  console.log("Skript - start");                        console.log("Skript - mezerky");
  
  
  console.log("Skript - neco mezi");
  
  
  console.log("Skript - end");
</script>

Tip #2 – Preview mód a zobrazení pořadí tagů

Google Tag Manager spouští jednotlivé tagy dle interního id (v podstatě pořadí vytvoření).

V Preview mode si pořadí tagů seřadí dle abecedy.

Na screenu níže je vidět rozdíl mezi preview mode a v konzoli, kde je vypsán začátek skriptu (spuštění). Není to někde uvedeno a ne každý si to všimne.

Tip #3 – Kontrolujte v Console

Ještě důležitější, než Preview mode je samotná Console, kde si pokaždé ověřujte, že tag vygenerovaný kód opravdu poslal nějaké požadavky a že nic neskončilo chybou. To, že se tag spustil ještě neznamená, že je vše OK.

Na obrázku níže se sice tag “Malinkej externi skriptik” spustil, ale byla v něm chybička. Bez Console si toho nevšimnete.

Pozn. Můžete využít události gtm.pageError, ale ta neřeší např. 404ky

Vložený tag ještě ověřujte v Network, že jsou requesty OK.

Kontroluji takhle každou vloženou úpravu – i když se jedná o “kopii s jinými parametry”. Jistota je jistota.

dymik: