Jmenné konvence pro Google Tag Manager

Google Tag manager, nástroj na správu měřících scriptů na webu. Pro manažery noční můra, pro vývojáře podivná náhrada jejich práce. GTM je velmi mocný nástroj a v dnešní době už dokáže pořádnou spoustu věcí. Jedním z jeho problémů, a je to problém dost veliký, je možnost pojmenovávání. V praxi jsem se setkal s klienty, kteří mají desítky kontejnerů a stovky různých tagů, pravidel a maker. Udržet v nich pořádek a přehlednost je velmi náročný úkol. Chtěl bych vás zasvětit do jmenných konvencí, které jsme si postupem času osvojili a celkem úspěšně ozkoušeli v Mediu. Často se setkávám s GTM nových klientů, do kterého si předtím každý „bastlil to svoje“. Většinou je to naprosto bez logiky, polovina v angličtině, polovina v češtině. Část používá jednu notaci, jiná část pak zase raději žádnou. Prvním dobrým krokem je tedy překvapivě zavedení firemních konvencí. Kdysi už o podobném tématu vyšel článek od Douga Halla. Z počátku jsme se s ním celkem ztotožňovali, postupem času jsme se od nich dost odchýlili.

Obecně na úvod

U nás používáme primárně angličtinu. Velká většina názvů má více slov, a protože GTM neumožnuje v názvech prakticky žádné speciální znaky, jako oddělovač používáme spojovník s mezerami “ – „. V některý případech využíváme ještě standardní javascriptovou tečku „.“. Všechny ty to případy vám dále na příkladech vysvětlím, ale ještě než se do toho pustím, je důležité, abyste si uvědomili, že každá pravidla mají své hranice. Existují případy, kdyby byl název dle pravidel tak šílené dlouhý a nepřehledný, že je lepší pojmenovat ho trochu více lidsky. Efektivita stojí vždy nad přesností.

Tagy

Obecně se ve všech tazích na začátku píše jejich typ. Následuje pomlčkový oddělovač a případný podtyp. Jako poslední přidáváme nějaké upřesnění, abychom věděli, k čemu daný tag patří, resp. stručný zápis, kde se spouští. Tagů existuje velká spousta druhů, tak jsme si je rozdělili do několika skupin:

• Analytics Tagy
• Ostatní předdefinované tagy
• Custom HTML tagy

Analytics tagy

Tyto tagy mají trochu odlišnou konvenci od ostatních tagů. Po zkušenostech u nich upřednostňujeme upřesnění před podtypem. Je to proto, že Analytics tagů se obvykle nasazuje řádově nejvíc a nejčastěji se s nimi nějak manipuluje. Pro jeden měřený účet máme někdy tři, jindy třeba devět tagů. Narozdíl od Adwords, kde máme obvykle třeba dva. Na začátek tedy napište jejich typ (GA/UA). Pokud máte v kontejneru více než jeden analytics účet nebo property, využijte jejich názvy jako další součást názvu tagu (právě to upřesnění):

• UA – Hlavní weby – Blog (Účet Hlavní weby a property Blog)
• UA – Global (Účet Global  s jedním property, proto ho neuvádím vůbec.)

Následně napište podtyp (Pageview, Ecommerce/Transaction, Event, Social, …) a další upřesňující hodnoty, jsou-li třeba:

• UA – Hlavní weby – Blog – Pageview (Obecná pageview pro měřící kód blogu.)
• UA – Global – Event – header.logo (Konkrétní označení události pro Global účet.)
• UA – Pageview (Základní tag pro universaly, pokud v kontejneru nemám jiné měřící UA kódy.)

Každé slovo začíná velkým písmenem. Neplatí to pouze tehdy, objeví-li se v názvu skutečná hodnota. Typicky výše zmíněný header.logo (Jeho význam není v tomto článku důležitý.)

Ostatní předdefinované tagy

Tyto tagy rovněž uvozujte typem (Adwords, Listener, …). Pak konečně následuje to upřesnění. Obvykle to znamená umístění kódu z hlediska hostname nebo URL – Místo, kde se kód má spustit. Umístění nerozepisujte do detailu (To se dělá v definici pravidla. Zde jde pouze o základní rozlišení, co nejobecnější možnost.) Pokud spouštíte tag úplně všude (All pages), nebude mít žádné upřesnění.

• Listener – Link Click (Posluchač pro kliky na odkazy, All pages)
• Listener – Form Submit (Posluchač pro odeslané formuláře, All Pages)
• Adwords – Remarketing – Blog (Adwords Remarketing kód pro sekci Blog. Alternativní zápis je Adwords – Remarketing – blog.medio.cz. Záleží na složitosti účtů a webu. Většinou stačí první varianta.)
• Adwords – Conversion – Akademie (Adwords konverzní kód pro objednávku školení.)

Custom HTML tagy

Pro tyto tagy platí vesměs stejná pravidla jako pro ty předdefinované. Uvozujte typem, pokračujte podtypy a nějakým upřesněním pozice.

• Adform – Global tracking Point – news.medio.cz
• Etarget – Remarketing
• FB – Remarketing
• Gemius
• Gemius – Heatmaps

Jednoduše řečeno jde o přehlednost a pochopitelnost. Pokud to název splňuje, je to v pořádku.

Pravidla

Event – ga.event (Spouštění obecných eventů s předurčenými hodnotami v dataLayeru. Toto pravidlo se spustí jakmile se v dataLayeru objeví ‚event‘: ‚ga.event‘). Názvy pravidel jsou velmi jednoduché a striktní. Obsahují naprosto přesně svůj obsah. (Jaké makro nabývá jaké hodnoty.)

• Event – header.logo (Spouštění konkrétnějších eventů pevně danými hodnotami v GTM. Rozdíl mezi tímto a předchozím pravidlem spočívá pouze ve využitelnosti, o které povím něco v jiném článku. Jmenné konvence jsou identické.)
• URL – All pages (Předdefinované pravidlo. Musíte se s ním smířit, protože dokud GTM nezačne podporovat speciální znaky v názvech, tak lepší alternativu pojmenování asi nenajdeme. Jinak bych ho přejmenoval na URL – .*)
• Hostname – akademie.medio.cz (Zde asi není, co vysvětlovat)
• Event – gtm.formSubmit (Obecné pravidlo formulářového posluchače, v reálu prakticky nevyužitelné, protože vždycky chceme specifikovat konkrétní formulář nebo odkaz apod. -> viz Submit – id.objednat)
• Submit – id.objednat (Pravidlo pro odeslání formuláře s objednávkou. Navěšené na posluchače. Nemusíte specifikovat složité pravidlo typu Event – gtmFormSubmit, Element id – objednat. Místo toho vytvoříme typ Submit, který sám o sobě je jasný, a doplníme upřesněním, kterou část elementu připojujeme. Stále doufám, že budou jednou ty speciální znaky povolené a fungovat. V tomhle případě by to velmi radikálně usnadnili. Podobu s nimy (alternativy) uvádím v závorkách na konci.):
  • id. – Element ID (Submit – #objednat)
  • class. – Element Classes (Click – .box – tahle alternativa funguje i dnes)
  • url. – Element URL (Link Click – ?.*\.pdf)
  • target. – Element Target (Link Click – _blank)

Výše uvedená pravidla jsou jednoduchá. U složitějších pravidel to nazvat takhle jednoduše nelze. To je přesně ten případ, který jsem zmiňoval na začátku. Místo nějakých dlouhých názvů typu:

• Event – gtm.linkClick, ElementClasses – button, Element URL – medio.cz-verejnaskoleni-individualni-skoleni-zdarma, URL – medio.cz-verejna-skoleni

by se to dle výše uvedených pravidel dalo zkrátit jako:

• Link Click – class.button url.medio.cz-verejna-skoleni-individualni-skoleni-zdarma, URL – medio.cz-verejna-skoleni

To je však stále dost nepřehledné a v seznamu pravidel je to pro vás prakticky nepoužitelné. Proto je asi lepší využít nějakého stručného jasně popisného slovního popisu. Bohužel vám nikdy nedá úplnou přesnost, ale stejně budete muset takto napsané pravidlo pravděpodobně otevřít, abyste se podívali, co představuje. I tak je dobré alespoň zachovat spouštěcí typ. Ve výsledku by to mohlo vypadat tedy takto:

• Link Click – Button Individuální Zdarma

Někdy je těžké tuto pomyslnou hranici mezi efektivitou a přesností najít, ale vždy tam ta hranice být musí.

Makra

1st Party Cookie – cookie.název („datový typ“ cookies označuje v makrech, že se jedná o cookies, aby se nám nepletla s datalayerem a JS proměnnýma. Po tečce následuje její název). Google Tag Manager některá makra předvytváří. Jejich názvosloví je lehce odlišné od toho, které používáme u nových maker proto si je buďto přejmenujte nebo se s nimi smiřte a zvykněte si na ně, není jich tolik. Základním pravidlem názvů je camelCase, tedy velbloudí notace. To samozřejmě vychází z javascriptu, ve kterém rovněž vytváříme dataLayer a většinu tagů. První písmeno prvního slova je malé, první písmena ostatních slov jsou velká. Toto pravidlo se různě doupravuje podle typů maker:

• Auto-Event Variable – tato makra už jsou většinou předdefinovaná pomocí nešikovného oddělovače „mezery“. Můžeme je také přejmenovat na tečkovou notaci (element.url, element.id, atd..) nebo se s tím prostě smířit. element je opět „datový typ“.
  • element
  • element url
  • element classes
  • element id
  • element target
• Constant String – konstanty pojmenováváme velkými písmeny s oddělovačem mezerou (UA ID, GA ID, MEDIO.CZ)
• Container Version Number – version.77
• Custom Javascript – Vždy vrací nějakou hodnotu, takže se jedná vlastně o standardní getter. (getRMKPageType, getUAID, …). V případě, kdy vrací boolean využijte klasicky „is“ (isCrossDomain, …)
• Data Layer Variable – Nejpoužívanější typ maker. Uvádíme datový typ dl. (dl.pageType, dl.visitorId, …)
• Debug mode – isDebugMode – vrací hodnotu stejně jako Custom javascript.
• DOM Element – id.identifikator (rozlišujeme pomocí ID, takže datový typ id.)
• HTTP Referrer – hodnoty referreru
  • referrer
  • referrer.protocol
  • referrer.hostname
  • referrer.port
  • referrer.path
  • referrer.query
  • referrer.fragment
• JavaScript Variable – js.název (datový typ js označuje v makrech, že se jedná o javascriptové proměnné, aby se nám nepletla s datalayerem a cookies. Po tečce následuje její název)
• Lookup Table –vrací hodnoty, platí pro ní totéž co pro Custom Javascript.
• Random Number – randomNumber
• URL – jednotlivé hodnoty
  • url
  • url.protocol
  • url.hostname
  • url.port
  • url.path
  • url.query
  • url.fragment

A to je vše. Samozřejmě najdete mnoho případů, kdy konvence nebudou úplně ideální a budete si je muset přiohnout. Například pokud máte analytics s jedním účtem a mnoha properties nebo využíváte stejně pojmenované cookies s jiným významem přes několik různých webů. Nebo jednoduše nepotřebujete názvy dělit na tolik skupin, datových typů, apod. V podobných scénářích je nutné si doupřesnit nebo naopak zrušit nějaká pravidla a tyto konvence brát pouze jako základ. Mějte na paměti, že to nejdůležitější je, aby se váš tým neztrácel, věděl a mohl efektivně pracovat.

André Heller

André namíchává v Medio Interactive analytická řešení na míru všem. Jeho velikou vášní jsou zdrojové kódy a návrhy měření. Ve volném čase vyvíjí aplikace, učí se nové technologie a skáče na slackline.

Google+ profil @andheller heller@medio.cz