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

Google Tag Manager
pro mírně pokročilé
MarketingMakers.net
MichalBlazek.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ě“ GoogleTag 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
• GoogleTag 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

RegEx lookup table – JavaScript proměnná
function() {
// proměnná která vstupuje do regex
var inputVariable = {{Page URL}};
// defaultní hodnota
var 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 value
for (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á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' });

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ěv
Ukázka
http://www.michalblazek.cz/post/121534340593/merit-konverze-z-
emailu-analytics
http://allten.cz/kontakt/?utm_source=pokus&utm_medium=pokus&u
tm_campaign=pokus
http://allten.cz/kontakt/?utm_source=pokus&utm_medium=pokus&u
tm_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 - postup nasazení
1. Určíte lokaci a získáte počasí z nějaké externí služby.
2. Vytvoříte vlastní dimenzi v GoogleAnalytics
3. 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 GTMYouTube API enablejsapi=1
2. 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: HonzaTichý, Petr Havlík, Roman Appeltauer
MichalBlazek.cz
MarketingMakers.net
@blazekmichal
BŮH
HERE!

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

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (11)

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

Ähnlich wie Michal Blažek - Google Tag Manager pro mírně pokročilé (20)

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

Hinweis der Redaktion