Možná to zní jako šílená či přinejmenším podivná kombinace. Jenže šílené a podivné věci jsou taková moje malá libůstka. Proto v následujícím návodu čekejte opravdu bláznivé věci.

Jak jsem k tomuto řešení došel

Na úvod je třeba projít určitý myšlenkový pochod, který mě vedl k tomu u jednoho z našich klientů nasadit právě tuto kombinaci nástrojů.

Proč nepoužít některý z Tag Managerů od Adobe

Adobe aktuálně poskytuje svým klientům tři různé Tag Management řešení.

První dvě možnosti jsou relativně jednoduché nástroje, které toho kromě zjednodušené správy knihoven Adobe nástrojů a možnost přes interní události TMS řídit pořadí různých tagů mnoho neposkytují. Veškerou logiku tagů stále musíte psát v JavaScriptu a není zde žádný koncept Data Layeru (makra, proměnné či Data Elementy).

Poslední z Tag Managerů od Adobe už je trochu jiná káva. Jde o akvírovaný enterprise Tag Management Satellite, který byl jedním z prvních solidních nástrojů na tomto poli (pamatuji si jeho představení na Google Analytics Partners Summitu někdy v roce 2011). Co se aktuálního stavu nástroje týče, tak Adobe pročistilo uživatelské rozhraní a postupně do něj integruje opět zejména jednodušší správu vlastních tagů (Marketing Cloud ID Service a Adobe Analytics, Target, Audience Manager a Media Optimizer). Co je jim ke cti, prozatím v něm ponechali též šablony tagů pro Google Analytics (naopak v Google Tag Manageru šablony pro Adobe Analytics nenajdete). Navíc má tento TMS již propracovanou datovou vrstvu a spousty předpřipraveným pravidel spouštění tagů při různých zajímavých událostech.

Co ale v Adobe Dynamic Tag Managementu schází oproti Google Tag Manageru?

  1. Neobsahuje žádné šablony pro běžně využívané konverzní skripty.
  2. Nemá verzi fungující bez JavaScriptu.

A proč tedy Google Tag Manager

Co jsou další moje důvody k tomu vyzkoušet GTM i přesto, že v něm nativní podpora Adobe Analytics není?

  • GTM vždy bude známějším řešením, které je široce využívané, a proto lze očekávat, že se s ním snáze skamarádí i další osoby, které se mnou na daném projektu budou spolupracovat (zástupci klienta a spolupracujících agentur).
  • Ze stejného důvodu navíc bude existovat širší komunita vývojářů, kteří sdílejí zajímavé možnosti použití tohoto nástroje.
  • Způsob, jakým se popasoval GTM s konceptem Data Layeru je trochu specifický, ale díky rozšířenosti GTM celkem známý.
  • U Google cítím větší tah na branku, co se týče inovací (abych dostál své libosti v šílenostech, bude tento článek ukazovat řešení v GTM 2.0 ačkoliv funkční je i ve verzi 1.0).
  • Protože daný klient chce paralelně využívat též Google (Universal) Analytics, hodí se, že implementaci tohoto nástroje v GTM již máme celkem pěkně v ruce.

Body k řešení na úvod

  1. Jak jsem psal již výše, GTM nemá pro AA žádnou šablonu. Znamená to, že všechny tagy AA budou tedy řešeny jako „Custom HTML“ tagy.
  2. Skripty AA nemají asynchronní syntax – obvykle se umisťují někde před </body> a to se mi moc nelíbí – navíc to jde trochu proti smyslu Tag Managementu (načíst jeden základní skript někde brzy na stránce a vše ostatní řešit pokud možno asynchronně z něj).
  3. Měřená data mohou být zaznamenána do Data Layeru i během vykreslování stránky.

Řešení nasazení knihoven Adobe Analytics

Knihovny AA (včetně modulů a pluginů) mohou pěkně narůst (klidně i někam ke 100KB) a Custom HTML tag je omezen na 15360 znaků – celá knihovna tedy nejde umístit přímo do GTM. To by nebylo ani příliš pohodlné, museli bychom generovat knihovnu do inline scriptu a navíc logika v GTM je taková, že tento kód by se nemohl uložit v cache. Z těchto důvodů jsme se rozhodli ponechat Adobe knihovny v samostatném souboru, který je ale načítán přes GTM asynchronně (proč asynchronně? to se dozvíte dále).

Spuštění načítání knihovny je tedy řešeno jako Custom HTML Tag s podporou document.write (aby spuštění asynchronního načítání relativně velké knihovny začalo co nejdříve).

Load_Analytics_Library

Tím, že je knihovna servírována z vlastní infrastruktury klienta, můžeme řídit cachování souboru a lépe řídit verzované releasy. Reference na skript je do GTM předávána přes Data Layer, aby bylo možné s každou změnou knihovny udělat update tak, aby se nová funkčnost nenačítala z cache.

var dataLayer = [{
  'Library Path' : '/js/amc_0.1_2014-11-27.js'
}];

Řešení problému synchronizace

Z mnoha důvodů je doporučeno vkládat skript GTM ihned za <body>.

  • Díky tomu lze vkládat i synchronní Custom HTML skripty, které musí být v body (např. iframe či img tagy).
  • Je to dostatečně brzy, aby neutrpěla přesnost měření (aby nedošlo ke ztrátě dat v momentě, kdy návštěvník odejde ze stránky dříve, než mohl být změřen).

Přináší to ale jeden poměrně zásadní problém – pokud potřebujeme vložit měřicí skripty synchronně, byly by blokující (zpomalily by načítání stránky). Proto je celkem jednoznačným řešením načtení knihovny provést asynchronně.

AA proto sice nemá nativně podporu, ale řešitelné to je. Opětovná synchronizace je nutná, protože během vykreslování stránky mohou do Data Layeru přibýt ještě nějaká data, která budeme chtít změřit. V momentě, kdy je již jisté, že žádná další data ze stránky nepřibudou (DOMContentLoaded) ale díky asynchronnímu načítání knihovny nemáme jistotu, že jsou všechny funkce měřicích skriptů již správně inicializované. Takovou synchronizaci proto musíme vyřešit sami – změření tedy lze provést až v momentě, kdy již nastaly dvě zásadní události:

  1. Načetla se knihovna Analytics se všemi potřebnými funkcemi.
  2. Načetl se obsah stránky, který mohl ještě upravovat Data Layer (DOMContentLoaded).

Řešením je manuální synchronizace přes něco, co by se v programování nejspíš nazvalo „hradlem“:

Na konec Analytics knihoven umístíme tento kód:

dataLayer.push({"Analytics Library Loaded": "true"});
dataLayer.push(function(){window["DOM Loaded"] = this.get("DOM Loaded")});
if (window["DOM Loaded"] === "true") {
  dataLayer.push({event: "Analytics Pageview"});
}

Synchronizaci pak musíme spustit též při události „gtm.dom“:

DOM_Loaded

Při které spustíme tento Custom HTML Tag:

<script type="text/javascript">
  dataLayer.push({"DOM Loaded": "true"});
  if ({{Analytics Library Loaded}} === "true") {
    dataLayer.push({event: "Analytics Pageview"});
  }
</script>

Nyní mohou nastat dvě situace:

  1. Knihovna se načte dříve než obsah stránky – změření se pak spustí až při události DOM Loaded.
  2. Knihovna se načte později než obsah stránky – změření se pak spustí společně s načtením knihovny.

Samotné změření Pageview do AA pak spustíme vyvoláním události „Analytics Pageview“.

Jak vypadá tag AA v GTM

Teď už se asi nebudete divit, že jde o další Custom HTML Tag. V podstatě bude obsahovat to, co je v manuálech Adobe označováno jako Page Code:

<script type="text/javascript">
  /* You may give each page an identifying name, server, and channel on
  the next lines. */
  s.pageName = {{Page Name}};
  s.server = {{Server}};
  s.channel = {{Channel}};
  /*s.pageType = "";*/
  /* Conversion Variables */
  /*s.events = "";
  s.products = "";
  s.purchaseID = "";*/
  s.t();
</script>

V daném tagu již můžeme využívat makra (či chcete-li proměnné v GTM 2.0) z našeho Data Layeru.

Shrnutí

Uvedené příklady kódu řeší prozatím spíše koncept nasazení AA přes GTM. Máme vše připraveno také k tomu, abychom při stejné události odesílali měření též do Google Analytics.

V reálném nasazení budeme muset více do detailu řešit ještě spousty dalších problémů (např. měření událostí na stránce, jak implementovat různé proměnné a logiku formátování hodnot, které nebudou čistě překlopením hodnoty z Data Layeru, atp.). Zároveň na výslednou podobu kódu ve vašem projektu může mít vliv několik dalších podstatných věcí – namátkou: pokud bude systém, do kterého tuto kombinaci nástrojů nasazujete, založen na ideálním MVC, bude možné celý Data Layer nastavit na začátku a problémy s nutnou synchronizací si tak ušetříte.

Pokud se vám článek líbil nebo k němu máte nějaké připomínky, neváhejte se o svůj názor podělit v komentářích.

Komentáře

  1. Lukáši zajímavé, ale reálně použitelné asi fakt ve specifických případech. Pokud si firma platí Analytics, bude mít problém nasadit to přes GTM, který nemá SLA.

    • Vašku díky za reakci. Samozřejmě s tímto musí být klient obeznámen, ale to co zmiňuješ je spíš administrativní záležitost a v kontextu tohoto článku tedy relativně nepodstatná věc.

Napsat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *