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