Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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é
• Pos...
Co je to „vlastně“ GoogleTag Manager?
DataLayer
• V <head></head>
• dataLayer vs. dataLayer.push
• Kdy mohu volat dataLayer.push?
<script>
window.dataLayer = wi...
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.
• Zo...
Vestavěné proměnné
Vlastní proměnné
Lookup table
RegEx lookup table – JavaScript proměnná
function() {
// proměnná která vstupuje do regex
var inputVariable = {{Page URL}}...
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 (eve...
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...
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 ...
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-...
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}}');
jQuer...
Využití GTM, když to programátor po…
• JavaScript Injection
• Změna textů, atributů a stylů pomocí JS, jQuery apod.
• Viz ...
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...
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á...
Další zdroje
• http://www.simoahava.com/
• http://www.cardinalpath.com/
• Oficiální dokumentace +Twitter
• V ČR: HonzaTich...
Velké díky klientům za poskytnutí dat!
Upcoming SlideShare
Loading in …5
×

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

3,535 views

Published on

Prezentace z E-shop víkendu 2015 ve Vodňanech. #ESV15
Pokud již máte základy Google Tag Manageru, dozvíte se trošku více.

Published in: Internet
  • Be the first to comment

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

  1. 1. Google Tag Manager pro mírně pokročilé MarketingMakers.net MichalBlazek.cz @blazekmichal E-shop víkend 2015 #ESV15
  2. 2. 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í
  3. 3. Co je to „vlastně“ GoogleTag Manager?
  4. 4. 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>
  5. 5. Debugging dataLayer • GoogleTag Assistant • Režim náhledu • WASP
  6. 6. Debugging dataLayer – režim náhledu
  7. 7. 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
  8. 8. Vestavěné proměnné
  9. 9. Vlastní proměnné
  10. 10. Lookup table
  11. 11. 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; }
  12. 12. Události v Google Analytics
  13. 13. Událost – automatické sledování kontaktních formulářů
  14. 14. 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' });
  15. 15. Událost – kliknutí – stažení, externí odkazy, všechny odkazy
  16. 16. 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?
  17. 17. Parsování dat z dataLayer Přistoupení k proměnné v kódu: {{Produkty}}[i].sku; nebo
  18. 18. 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}} });
  19. 19. Remarketingové kódy pomocí časovače – relevantnější uživatelé
  20. 20. 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
  21. 21. Postup 1. Získat z URL adresy parametr UTM_SOURCE
  22. 22. Postup 2. Pomocí vyhledávací tabulky určit adresu
  23. 23. 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>
  24. 24. 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>
  25. 25. Počasí v Google Analytics
  26. 26. 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/
  27. 27. Sledování přehrání videí v Google Analytics
  28. 28. 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/
  29. 29. 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!
  30. 30. Velké díky klientům za poskytnutí dat!

×