Michal Blažek - Google Tag Manager pro mírně pokročilé

Google Tag Manager pro mírně pokročilé

MarketingMakers.netMichalBlazek.cz@blazekmichal

E-shop víkend 2015#ESV15

O čem to bude?

• Co je to GTM + DataLayer + spouštění tagů + debugging

• Proměnné, lookup table, javascript proměnné• Posluchače událostí a zasílání událostí do GTM• Komplikovanější trackovací a remarketingové kódy• 3 skripty z praxe – B2B sledování e-mailů, počasí v GA,

trackování YouTube videí

Co je to „vlastně“ Google Tag Manager?

DataLayer

• V <head></head>• dataLayer vs. dataLayer.push• Kdy mohu volat dataLayer.push?

<script> window.dataLayer = window.dataLayer || []; dataLayer.push({ 'userId' : 'abf5-3245-ffd1-23ed', 'weather' : 'Cloudy' });</script>

Debugging dataLayer

• Google Tag Assistant• Režim náhledu• WASP

Debugging dataLayer – režim náhledu

Kdy spouštět tagy? Jak toho využít?

• Kdy potřebujete! – Zobrazení stránky– Kliknutí– odeslání formuláře– událost.

• Zobrazení stránky – gtm.js, gtm.dom, gtm.load

Vestavěné proměnné

Vlastní proměnné

Lookup table

RegEx lookup table – JavaScript proměnná

function() {// proměnná která vstupuje do regexvar inputVariable = {{Page URL}};

// defaultní hodnotavar defaultVal = "other";

var table = [['czech-us.cz/$', 'home'], // Domovská stránka['/jazykove-kurzy/$', 'searchresults'], // Vyhledávání['/jazykove-kurzy/*', 'offerdetail'] ];// Nabídka

// Kód který prochází tabulku a následně return valuefor (var i = 0, len = table.length; i < len; i += 1) { var regex = new RegExp(table[i][0], table[i][2]); if (regex.test(inputVariable)) { return table[i][1]; } } return defaultVal; }

Události v Google Analytics

Událost – automatické sledování kontaktních formulářů

Událost – odeslání formulářů

• Pozor, funguje pouze u formulářů, kteří reloadují stránku nebo ji informují o události (event delegation - http://www.simoahava.com/gtm-tips/fix-problems-with-gtm-listeners/)

• Jinak využít:

• Cíle potom nastavit v GA a pomocí regex odfiltrovat (možné filtrovat ještě v GTM)

dataLayer.push({ 'event': 'odeslan_form', 'cftype': 'pop-up' });

http://www.simoahava.com/gtm-tips/fix-problems-with-gtm-listeners/







Událost – kliknutí – stažení, externí odkazy, všechny odkazy

Implementace trackovacích skriptů - základní

• Vezmu kód • Doplním proměnné • Nastavím, kde se má spouštět• Zkontroluji a uložím. • ALE… co když je nutné doplňovat údaje, co nejsou

přímo v dataLayer?

Parsování dat z dataLayer

Přistoupení k proměnné v kódu:{{Produkty}}[i].sku;

nebo

Příklad 1 – Trackovací skript – transakce pro Skrz.cz

for(i=0; i<delka; i++) {var jeden = 1.21*{{Produkty}}[i].price;var sku = {{Produkty}}[i].sku;var mnozstvi = {{Produkty}}[i].quantity;var celkem = {{Produkty}}[i].quantity*1.21*{{Produkty}}[i].price;

sa("addItem", {"itemId": sku, "unitPrice": jeden,"quantity": mnozstvi,"totalPrice": celkem });

};

sa("send", {"transactionId": {{Transaction ID}},"isPaid":"1","grandTotal": celkemcena ,"currency": {{Transaction Currency}} });

Remarketingové kódy pomocí časovače – relevantnější uživatelé

Změna e-mailu v závislosti na zdroji návštěvUkázka

http://www.michalblazek.cz/post/121534340593/merit-konverze-z-emailu-analytics

http://allten.cz/kontakt/?utm_source=pokus&utm_medium=pokus&utm_campaign=pokus

http://allten.cz/kontakt/?utm_source=pokus&utm_medium=pokus&utm_campaign=pokus2











Postup 1. Získat z URL adresy parametr UTM_SOURCE

Postup 2. Pomocí vyhledávací tabulky určit adresu

Postup 3. Pomocí jQuery změním adresu

<script> jQuery("a.kezmene").text('{{E-mailová adresa v závislosti na UTM}}'); jQuery("a.kezmene").attr('href', 'mailto:{{E-mailová adresa v závislosti na UTM}}')</script>

Využití GTM, když to programátor po…

• JavaScript Injection• Změna textů, atributů a stylů pomocí JS, jQuery apod.• Viz předchozí případ• Chyba programátora v textu: 30 % sleva na vše!! <script> jQuery('#prvek').css('font-weight': 'bold');</script>

Počasí v Google Analytics

Počasí v Google Analytics - postup nasazení

1. Určíte lokaci a získáte počasí z nějaké externí služby. 2. Vytvoříte vlastní dimenzi v Google Analytics3. Uložíte počasí do dataLayer a informujete o tom vlastní událostí.4. Pošlete počasí

Skript připravený k nasazení:Rozšířená verze (včetně teploty apod.): http://www.simoahava.com/analytics/send-weather-data-to-google-analytics-in-gtm-v2/

Sledování přehrání videí v Google Analytics

Přehrávání videí v Google Analytics

1. Aktivujete přes GTM YouTube API enablejsapi=12. Zkopíruji značku, která sleduje události (nebo si ji

vytvořím) a pokud nastane tak pošle událost do dataLayer.

3. Událost využiji pro spuštění tagu událost do Google Analytics (nebo využiji vlastní dimenzi)

Kde najdete: http://www.cardinalpath.com/youtube-video-tracking-with-gtm-and-ua-a-step-by-step-guide/

Další zdroje

• http://www.simoahava.com/• http://www.cardinalpath.com/• Oficiální dokumentace + Twitter• V ČR: Honza Tichý, Petr Havlík, Roman Appeltauer

MichalBlazek.czMarketingMakers.net@blazekmichal

BŮH HERE!

Velké díky klientům za poskytnutí dat!

Michal Blažek - Google Tag Manager pro mírně pokročilé

Internet