Přejít k obsahu  Přejít k hlavnímu menu

Firemní weblog poradenské společnosti H1.cz

Zobrazit všechny články
Zpět

Transformace unifikovaného kódu pomocí GTM

Určitě už jste taky zažili situaci, kdy jste potřebovali rychlou úpravu zdrojového kódu na webu, ale webdeveloper nebyl v dosahu nebo tato banální úprava přišla na spoustu peněz. Přesně pro tyto případy jsem pro vás sepsal návod, jak pomocí jednoduchého skriptu upravit jakoukoliv unifikovanou část zdrojového kódu bez zásahu developera.

Začněme tady!

Jako příklad si vezmeme problematiku měření událostí při přechodu z původních Google Analytics na novější Universal Analytics. V našem příkladu se tyto kódy pro měření událostí nacházejí v odkazech, konkrétně v atributu „onclick“.

Ukázka unifikovaného kódu 1

Skript umístěný v atributu onclick nám s Universal Analytics nebude fungovat, a tak je zapotřebí všechny tyto volání napříč všemi podstránkami přetransformovat do jiného formátu. Máme na výběr:

  • Odesílat data přímo do Analytics
  • Odesílat data přes Google Tag Manager.

Jelikož námi připravovaný skript chceme na stránky umístit pomocí Google Tag Manageru (GTM), vybereme si možnost číslo dva. Náš zastaralý kód tedy přetransformujeme a odešleme do GTM. Požadovaná syntaxe:

Ukázka unifikovaného kódu 2

Transformace skriptu

V GTM si vytvoříme novou značku – „Custom HTML Tag“. Do této značky se bude zapisovat transformační skript.

Ukázka unifikovaného kódu 3

Nyní si popíšeme řádek po řádku a vysvětlíme, co skript přesně provádí:

  1. Otevírací „script“ značka. Ta je zde nutná z důvodů, že následující kód je psaný v jazyku JavaScript.
  2. Definování prázdného pole se jménem „_gaq“. Starší verze Google Analytics využívá toto pole pro shromažďování naměřených dat na webu. Na stránkách máme však již Universal Analytics. Toto pole zde tedy chybí. Aby nedocházelo k případné chybě, která by nám následně mohla narušit měření, definujeme toto pole jako prázdné, a tím zaručíme jeho existenci.
  3. Definování prázdného stringu se jménem „oc“. Do této proměnné budeme následně ukládat obsah atributu „onlick“.
  4. Definování prázdného pole se jménem „ocAr“. Do tohoto pole naparsujeme jednotlivé parametry proměnné „oc“ (atributu onclick).
  5. Definování prázdného stringu se jménem „daLa“. Tento string slouží k sestavení finálního výrazu nového atributu onclick.
  6. Na šestém řádku používáme selektor jQuery (je tedy nutné, aby stránka využívala tuto knihovnu). Selektor nám na dané stránce vybere všechny odkazy, které mají atribut „onlick“. Následně na tento výběr zavoláme funkci „each“. Cyklus „each“ nám zaručí, že vezme jeden odkaz (s atributem onclick) za druhým a vykoná s ním následující příkazy (řádky 7. – 12.).
  7. Do předem připravené proměnné „oc“ vložíme obsah atributu „onclick“ z vybraného odkazu.
  8. Na osmém řádku zjišťujeme, zda proměnná „oc“ v sobě nese informaci o starém volání události do GA.
  9. Pokud je podmínka na 8. řádku splněna, pak do pole „ocAr“ vložíme rozparsovaný string „oc“.
  10. V tomto kroku již sestavujeme finální výraz skriptu. Ten řetězíme za sebe do proměnné „daLa“. Využíváme zde třetí, pátý a sedmý prvek pole „ocAr“.
    Poznámka: Výše uvedený přístup do pole je jen za předpokladu, že všechny naše zastaralé skripty událostí obsahují přesně tři parametry. V opačném případě by se musel výskyt jednotlivých parametrů ošetřit.
  11. Nezbývá nic jiného než stávající obsah atributu „onclick“ u vybraného odkazu nahradit námi vytvořeným voláním dataLayeru. 
  12. Ukončení podmínky z osmého řádku.
  13. Ukončení cyklu nad selektorem odkazů s atributem „onclick“.
  14. Uzavírací „script“ značka.

Nově vytvořenou značku v GTM uložíme a přiřadíme spouštěcí pravidlo, které nám zaručí, že se tento transformační skript spustí na všech stránkách ve chvíli, kdy je načtený DOM. Tedy pravidlo založené na custom eventu „gtm.dom“. (Pozor: při tvorbě spouštěcího pravidla je důležité rozlišovat pozici importu jQuery knihovny v HTML kódu.)

Dokončení v GTM

V poslední řadě nám zbývá pouze vytvořit Universal Analytics značku v GTM, která nám bude sloužit jako handler námi přetransformovaných volání dataLayer.

Náhled Google Tag Manager

Závěr

Ukázali jsme si, jak na pár řádcích kódu úspěšně přetransformovat zastaralý kód na nový a zachovat tak názvosloví událostí. Transformovat tímto způsobem lze prakticky jakýkoliv kód. Předpokladem je unifikovaná forma řetězců na vstupu transformačního procesu.

RSS feed komentářů k tomuto článku
RSS feed komentářů ke všem článkům



(nebude zveřejněn)



Položky označené * jsou povinné