Google Tag Manager pro vývojáře

Michal Blažek
Michal BlažekPerformance Advertising Specialist and co-founder of Marketing Makers at Marketing Makers
Google Tag Manager pro vývojáře
@blazekmichal
Google Tag Manager pro vývojáře
Google Tag Manager pro vývojáře
O čem to dneska bude?
Co to je?
Jak správně naimplementovat?
Tipy na užitečné tagy, proměnné a triggery?
Jak pracovat s událostmi?
Jak využít GTM pro testování a opravy webu
Jak využít GTM pro implementaci GDPR
Co to je?
Systém pro správu značek (většinou
marketingových) - spojovací prvek
mezi marketérem, analytikem,
vývojářem
Teorie: Vývojář má méně práce,
marketér/analytik větší flexibilitu
Praxe – takto to často dopadá
Osvědčila se mi implementace
Hezky vysvětleno na
https://www.simoaha
va.com/analytics/dat
a-layer/
Marketér/analytik má
vždy vše v
dataLayeru.
O DataLayer se musíte starat!
Když do dataLayeru
něco pošlete, bude to
tam, dokud to nezměníte
nebo neobnovíte stránku.
Např. můžete
dataLayer.push({
'pouzity_klic' : undefined
});
Struktura GTM
Značky (tags)
Není nutné řešit updates
a spousta dalších, ale…
Značky (tags) – chybí některé podstatné značky, takže custom html
Není tam Facebook, Sklik, AdForm, iBillboards, affiliate
programy, srovnáče, Smartsupp
Takže řešení přes custom HTML, kde je možné cokoliv
– nejvíce konfliktů
Pokud chce firma tag v
GTM, musí být tag vendor.
Tagy je možné na webu
blacklistovat.
Custom HTML tag - haleluuja
Adhoc oprava chyb
Korporát
Testování
Chytré skripty - počasí, používání blockerů,
využívání anonymního okna, GDPR opatření
Vlastní posluchače
● Copy posluchač
● Skórování uživatelů (if tato událost, pak dej skóre)
● Posluchač práce s formuláři nebo jakýmikoliv prvky
Vybrané proměnné
Vybrané proměnné - podrobněji
GA settings – slide 26
Vestavěné triggery
Ale jsou tu limitace…
Výsledek JS error triggeru v GA
Následně zkoumám jaká stránka, jaké zařízení, jaký browser
Limitace vestavěných triggerů
● Posluchač kliknutí nefunguje, pokud kliknete otevřít v novém okně nebo
pravým tlačítkem.
● Posluchač odeslání formuláře funguje defacto pouze na formy, které způsobí
reload stránky
● Posluchače kliknutí a odeslání formuláře jsou závislé na povoleném event.
progation (tip – je možné místo return false nebo e.stopprogation a místo dát
jenom preventDefault – více https://www.simoahava.com/gtm-tips/fix-
problems-with-gtm-listeners/
● Vždy je nutné pořádně testovat
● Jistotou jsou pouze správně nastavené události
Nejčastější nastavení - události
dataLayer.push({
'event':'nazev', // nebo i univerzální gaevent
'eventCategory': 'KATEGORIE',
'eventAction': 'AKCE',
'eventLabel': 'ŠTÍTEK',
'eventValue': HODNOTA,
'eventNonInteraction': true, // má událost zrušit bounce
rate? default je false
'eventCallback': function() {
// zde se musí přesměrovat nebo stát jiná akce
},
'eventTimeout': 1000
});
// tučně je bez čeho by to nefungovalo, ostatní volitelné, ale
vhodné
Alternativa – využít atributy a posluchač
https://jsfiddle.net/michalmarketingmakers/u4a0mqkr/2/ - easy
příklad pro kliknutí
Užitečné vlastní události
Cokoliv považujeme za žádoucí nebo nežádoucí
Formuláře – interakce a odeslání
404 error
User login
Registrace
Copy, změna okna, hover nad telefonem atd.
Enhanced Ecommerce
Enhanced Ecommerce
https://develo
pers.google.co
m/tag-
manager/enha
nced-
ecommerce
Enhanced Ecommerce
Rozšířený elektronický obchod
Zde pracujete s ecommerce objektem
Doporučuji všechno posílat jako událost od impression,
productClick, detail až po purchase – nespoléhat na to, že si
to GA tag vezme při svém načtení.
Takto získáte skvělou kontrolu a navíc můžete data v
případě potřeby upravovat.
Dynamický retargeting Google, Facebook atd.
Google i FB ve všech typech retargetingu chce produkty posílat jako
pole.
a) Je možné scrapovat pomocí vlastní proměnné z Enhanced
Ecommerce
b) vývojář pushne produkty jako ['product1', 'product2', 'product3‘]
c) Pagetype je možné vytvořit pomocí regex table nebo je zaslán – liší
se u českého rtgt (retail), slovenského (custom), vzdělávání (edu)
nebo FB.
<script>dataLayer.push({ 'google_tag_params': {
'ecomm_prodid': ['24','454'], 'ecomm_pagetype: 'checkout' }
});</script>
Debugging – preview mode GTM a GA debug
GDPR - GA settings tag v Google Tag Manager
GDPR - – AnonymizeIp true
function ipadresauzivatele () {
$ip = $_SERVER['REMOTE_ADDR'];
if ($ip == „“195.555.555.1" || $ip == „“195.555.575.14" || $ip
== "83.157.211.22" ) { echo '<script>dataLayer.push({ "userip": "in"
})</script>'; } else { echo '<script>dataLayer.push({ "userip":
"out" })</script>'; }
}
add_action( 'wp_footer', 'ipadresauzivatele' );
1b – EU cookie
GDPR - HitTimestamp
Řešení od Simo Ahavy -
https://www.simoahava.com/analytics/improve-data-
collection-with-four-custom-dimensions/
Výsledek: 2015-04-03T18:55:27.466+03:00
GDPR – I cookie lištu si můžete nasadit přes GTM
Hezké řešení -
https://cookieconsent.insites
.com/download/
Jenom bych doporučil uložit
k sobě – nevíte, jak se to
bude měnit (a pozor na
problémy v IE 11 -
https://github.com/insites/c
ookieconsent/issues/326)
GDPR – Opt-in nebo opt-out
Více
GDPR - Opt-in nebo opt-out
Další informace v cookie liště - V B2C prokliklo 0,16 %, v B2B
0,57 %.
Další zdroje
● https://www.simoahava.com/analytics/data-layer/
● https://stackoverflow.com/questions/34212960/how-to-properly-use-datalayer-push-to-
update-values-of-nested-objects-in-an
● https://www.simoahava.com/gtm-tips/use-eventtimeout-eventcallback/
● https://www.simoahava.com/gtm-tips/track-javascript-errors-events/
● https://www.simoahava.com/gtm-tips/gtm-container-snippet-in-the-head/
● https://www.simoahava.com/gtm-tips/remember-to-flush-unused-data-layer-variables/
● https://chrome.google.com/webstore/detail/gtm-
sonar/iiihoahkpncaheicjfemhjkkfamcahcd?hl=en - GTM sonar
● https://javascript.info/bubbling-and-capturing
● https://www.lunametrics.com/blog/2017/11/02/find-personally-identifiable-data-google-
analytics/
● https://www.privacyshield.gov/welcome
● https://marketingmakers.net/gdpr-pro-ppc-analytiku-a-automatizaci-8-praktickych-
doporuceni-pro-nase-klienty/ a https://marketingmakers.net/cookies-a-gdpr-vyjadreni-
uoou-a-dalsi-doporuceni-pro-nase-klienty/
MÁTE JAKÉKOLIV
OTÁZKY?
Marketing Makers - “Co nemůžete změřit, raději nikdy nedělejte!
Prezentaci vypracoval: Michal Blažek
michal@marketingmakers.net, 728 729 312
Twitter: blazkmichal
Marketing Makers s.r.o., Domažlická 1053/15, 130 00 Praha 3 - Žižkov,
IČ: 04174836, DIČ: CZ04174836
MarketingMakers.net | Facebook | Twitter: MarketingMakers
Google Tag Manager pro vývojáře
1 of 36

More Related Content

Similar to Google Tag Manager pro vývojáře(20)

Tag managementTag management
Tag management
Pavel Šabatka859 views
MergadoFest - Luděk Volejník: Mergado pro pokročiléMergadoFest - Luděk Volejník: Mergado pro pokročilé
MergadoFest - Luděk Volejník: Mergado pro pokročilé
Mergado technologies s. r. o.280 views
Petr Heinz - Čisté testy, dobré testyPetr Heinz - Čisté testy, dobré testy
Petr Heinz - Čisté testy, dobré testy
Anna Kovárová124 views

More from Michal Blažek(13)

Google Tag Manager pro vývojáře

  • 1. Google Tag Manager pro vývojáře @blazekmichal
  • 4. O čem to dneska bude? Co to je? Jak správně naimplementovat? Tipy na užitečné tagy, proměnné a triggery? Jak pracovat s událostmi? Jak využít GTM pro testování a opravy webu Jak využít GTM pro implementaci GDPR
  • 5. Co to je? Systém pro správu značek (většinou marketingových) - spojovací prvek mezi marketérem, analytikem, vývojářem Teorie: Vývojář má méně práce, marketér/analytik větší flexibilitu
  • 6. Praxe – takto to často dopadá
  • 7. Osvědčila se mi implementace Hezky vysvětleno na https://www.simoaha va.com/analytics/dat a-layer/ Marketér/analytik má vždy vše v dataLayeru.
  • 8. O DataLayer se musíte starat! Když do dataLayeru něco pošlete, bude to tam, dokud to nezměníte nebo neobnovíte stránku. Např. můžete dataLayer.push({ 'pouzity_klic' : undefined });
  • 10. Značky (tags) Není nutné řešit updates a spousta dalších, ale…
  • 11. Značky (tags) – chybí některé podstatné značky, takže custom html Není tam Facebook, Sklik, AdForm, iBillboards, affiliate programy, srovnáče, Smartsupp Takže řešení přes custom HTML, kde je možné cokoliv – nejvíce konfliktů Pokud chce firma tag v GTM, musí být tag vendor. Tagy je možné na webu blacklistovat.
  • 12. Custom HTML tag - haleluuja Adhoc oprava chyb Korporát Testování Chytré skripty - počasí, používání blockerů, využívání anonymního okna, GDPR opatření Vlastní posluchače ● Copy posluchač ● Skórování uživatelů (if tato událost, pak dej skóre) ● Posluchač práce s formuláři nebo jakýmikoliv prvky
  • 14. Vybrané proměnné - podrobněji GA settings – slide 26
  • 16. Výsledek JS error triggeru v GA Následně zkoumám jaká stránka, jaké zařízení, jaký browser
  • 17. Limitace vestavěných triggerů ● Posluchač kliknutí nefunguje, pokud kliknete otevřít v novém okně nebo pravým tlačítkem. ● Posluchač odeslání formuláře funguje defacto pouze na formy, které způsobí reload stránky ● Posluchače kliknutí a odeslání formuláře jsou závislé na povoleném event. progation (tip – je možné místo return false nebo e.stopprogation a místo dát jenom preventDefault – více https://www.simoahava.com/gtm-tips/fix- problems-with-gtm-listeners/ ● Vždy je nutné pořádně testovat ● Jistotou jsou pouze správně nastavené události
  • 18. Nejčastější nastavení - události dataLayer.push({ 'event':'nazev', // nebo i univerzální gaevent 'eventCategory': 'KATEGORIE', 'eventAction': 'AKCE', 'eventLabel': 'ŠTÍTEK', 'eventValue': HODNOTA, 'eventNonInteraction': true, // má událost zrušit bounce rate? default je false 'eventCallback': function() { // zde se musí přesměrovat nebo stát jiná akce }, 'eventTimeout': 1000 }); // tučně je bez čeho by to nefungovalo, ostatní volitelné, ale vhodné
  • 19. Alternativa – využít atributy a posluchač https://jsfiddle.net/michalmarketingmakers/u4a0mqkr/2/ - easy příklad pro kliknutí
  • 20. Užitečné vlastní události Cokoliv považujeme za žádoucí nebo nežádoucí Formuláře – interakce a odeslání 404 error User login Registrace Copy, změna okna, hover nad telefonem atd.
  • 23. Enhanced Ecommerce Rozšířený elektronický obchod Zde pracujete s ecommerce objektem Doporučuji všechno posílat jako událost od impression, productClick, detail až po purchase – nespoléhat na to, že si to GA tag vezme při svém načtení. Takto získáte skvělou kontrolu a navíc můžete data v případě potřeby upravovat.
  • 24. Dynamický retargeting Google, Facebook atd. Google i FB ve všech typech retargetingu chce produkty posílat jako pole. a) Je možné scrapovat pomocí vlastní proměnné z Enhanced Ecommerce b) vývojář pushne produkty jako ['product1', 'product2', 'product3‘] c) Pagetype je možné vytvořit pomocí regex table nebo je zaslán – liší se u českého rtgt (retail), slovenského (custom), vzdělávání (edu) nebo FB. <script>dataLayer.push({ 'google_tag_params': { 'ecomm_prodid': ['24','454'], 'ecomm_pagetype: 'checkout' } });</script>
  • 25. Debugging – preview mode GTM a GA debug
  • 26. GDPR - GA settings tag v Google Tag Manager
  • 27. GDPR - – AnonymizeIp true function ipadresauzivatele () { $ip = $_SERVER['REMOTE_ADDR']; if ($ip == „“195.555.555.1" || $ip == „“195.555.575.14" || $ip == "83.157.211.22" ) { echo '<script>dataLayer.push({ "userip": "in" })</script>'; } else { echo '<script>dataLayer.push({ "userip": "out" })</script>'; } } add_action( 'wp_footer', 'ipadresauzivatele' );
  • 28. 1b – EU cookie
  • 29. GDPR - HitTimestamp Řešení od Simo Ahavy - https://www.simoahava.com/analytics/improve-data- collection-with-four-custom-dimensions/ Výsledek: 2015-04-03T18:55:27.466+03:00
  • 30. GDPR – I cookie lištu si můžete nasadit přes GTM Hezké řešení - https://cookieconsent.insites .com/download/ Jenom bych doporučil uložit k sobě – nevíte, jak se to bude měnit (a pozor na problémy v IE 11 - https://github.com/insites/c ookieconsent/issues/326)
  • 31. GDPR – Opt-in nebo opt-out Více
  • 32. GDPR - Opt-in nebo opt-out Další informace v cookie liště - V B2C prokliklo 0,16 %, v B2B 0,57 %.
  • 33. Další zdroje ● https://www.simoahava.com/analytics/data-layer/ ● https://stackoverflow.com/questions/34212960/how-to-properly-use-datalayer-push-to- update-values-of-nested-objects-in-an ● https://www.simoahava.com/gtm-tips/use-eventtimeout-eventcallback/ ● https://www.simoahava.com/gtm-tips/track-javascript-errors-events/ ● https://www.simoahava.com/gtm-tips/gtm-container-snippet-in-the-head/ ● https://www.simoahava.com/gtm-tips/remember-to-flush-unused-data-layer-variables/ ● https://chrome.google.com/webstore/detail/gtm- sonar/iiihoahkpncaheicjfemhjkkfamcahcd?hl=en - GTM sonar ● https://javascript.info/bubbling-and-capturing ● https://www.lunametrics.com/blog/2017/11/02/find-personally-identifiable-data-google- analytics/ ● https://www.privacyshield.gov/welcome ● https://marketingmakers.net/gdpr-pro-ppc-analytiku-a-automatizaci-8-praktickych- doporuceni-pro-nase-klienty/ a https://marketingmakers.net/cookies-a-gdpr-vyjadreni- uoou-a-dalsi-doporuceni-pro-nase-klienty/
  • 35. Marketing Makers - “Co nemůžete změřit, raději nikdy nedělejte! Prezentaci vypracoval: Michal Blažek michal@marketingmakers.net, 728 729 312 Twitter: blazkmichal Marketing Makers s.r.o., Domažlická 1053/15, 130 00 Praha 3 - Žižkov, IČ: 04174836, DIČ: CZ04174836 MarketingMakers.net | Facebook | Twitter: MarketingMakers

Editor's Notes

  1. Co je Google Tag Manager? - systém pro správu značek - spojovací prvek mezi marketérem, analytikem, vývojářem Vývojář - méně práce, Marketér - větší flexibilita Realita - často nepořádek Vývojář - nemá kontrolu, marketér může nasadit cokoliv, může spustit měřící tagy ještě před načtením obsahu Marketér - často nemá od vývojáře správně vytvořený dataLayer, takže dělá různé kompromisy
  2. Ideální implementace deklarace datové vrstvy první push kód GTM další pushe udržovaný dataLayer - už něco nepotřebuji, odeberu to
  3. Jelikož například u sledování událostí, když jedna událost má label a další ne, tak byste si tam toto pořád vedli. Hlavně u enhanced ecommerce – práce s produkty – mazat - https://www.simoahava.com/gtm-tips/remember-to-flush-unused-data-layer-variables/
  4. Rekordman si přes custom html načetl i jQuery knihovnu. gtm - whitelist and blacklist - https://developers.google.com/tag-manager/devguide#security
  5. Oprava chyb - např. nemáte zatím přístupy a řešili jsme překlep ze slevy 15 % na 5 % Korporát - česká pobočka neměla přístup k webu, ale mohla cokoliv dělat v GTM Testování - optimize, jakýkoliv javascript, vývoj CSS, když web spravuje jiná společnost
  6. Více k: Custom JavaScript, DataLayer Variable (zanořování), GA Settings, Lookup Table, RegEx table
  7. Custom event
  8. Custom event
  9. A ještě mohu testovat jestli je GTM na stránce
  10. A ještě mohu testovat jestli je GTM na stránce
  11. Ehnanced ecommerce je možné dát i na neshopový projekt
  12. Anonymizeip – vždy máme na true – ale šlo by I vázat na souhlas Doporučuji na true a false vracet return true; return false allowAdFeatures je lookup table
  13. Těch IP adres můžou být i desítky Pomůže vám to zjistit, co dělají interní uživatelé na webu – například to, co nemůžou nalézt na intranetu – kontaktní údaje často interní uživatelé hledají na veřejném webu, jelikož je zpravidla více user friendly než intranet Vylučujete nebo zahrnujete vlastní dimenzi
  14. EU cookie je proměnná 1st party cookie – někdo klikne na a podle ní se následně Pokud je souhlas poskytnut, tak spustíme retargetingové tagy a allowGAFeatures Výhodou je, že se to dá takto nasadit na desítky webů
  15. Vždy se hodí vědět, kdy přesně nastala nějaká důležitá akce A za druhé dokážeme přesně říci, kdy dal uživatel souhlas s používáním cookies
  16. Vždy se hodí vědět, kdy přesně nastala nějaká důležitá akce A za druhé dokážeme přesně říci, kdy dal uživatel souhlas s používáním cookies
  17. Vždy se hodí vědět, kdy přesně nastala nějaká důležitá akce A za druhé dokážeme přesně říci, kdy dal uživatel souhlas s používáním cookies
  18. Vždy se hodí vědět, kdy přesně nastala nějaká důležitá akce A za druhé dokážeme přesně říci, kdy dal uživatel souhlas s používáním cookies
  19. Ale