Google Tag Manager a analytika ve WordPress
Download as PPTX, PDF
0 likes710 views
Prezentace z pedn叩邸ky na meetupu wppivo.cz. Z叩klady webov辿 analytiky, jak dostat GTM do WordPress a jak mit odes鱈l叩n鱈 formul叩哲 a dal邸鱈 z叩kladn鱈 men鱈.
![https://lynt.cz + https://webcheck.cz @smitka
Jak komunikovat s dataLayer
Jednoduch辿 vlo転en鱈 prvku do pole.
Pro nkter辿 funkcionality je teba pou転鱈vat definovan辿 n叩zvoslov鱈
https://developers.google.com/tag-manager/devguide#datalayer
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'jmeno': 'hodnota',
});
</script>](https://image.slidesharecdn.com/wpagtm-210129051610/85/Google-Tag-Manager-a-analytika-ve-WordPress-10-320.jpg)
![https://lynt.cz + https://webcheck.cz @smitka
Pro komunikovat pes dataLayer?
M哲転eme do analytiky dostat dal邸鱈 u転iten叩 data:
V p鱈pad e-shopu informace o produktech a n叩kupn鱈m procesu (Enhanced Ecommerce)
Meta informace o str叩nce (kategorie, post_type, 404?, autor, )
Vlastn鱈 ud叩losti kliknut鱈 na nco, odesl叩n鱈 formul叩e,...
Uk叩zka odesl叩n鱈 CF7 (https://contactform7.com/dom-events/):
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
"event": "formSubmission",
"formID": event.detail.contactFormId
});
});
</script>](https://image.slidesharecdn.com/wpagtm-210129051610/85/Google-Tag-Manager-a-analytika-ve-WordPress-11-320.jpg)
![https://lynt.cz + https://webcheck.cz @smitka
Uk叩zka posl叩n鱈 dat, vyzvednut鱈 a pou転it鱈
<script>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
<?php
echo sprintf( "'wp_postType':'%s',",
get_post_type() );
?>
});
</script>](https://image.slidesharecdn.com/wpagtm-210129051610/85/Google-Tag-Manager-a-analytika-ve-WordPress-12-320.jpg)
![https://lynt.cz + https://webcheck.cz @smitka
Lynt Auto Trackova ud叩lost鱈
function(){
var CLASS = 0, CATEGORY = 1, ACTION = 2, LABEL = 3;
var index = ACTION;
var el = {{Click Element}};
var depth = 3;
var reg= /.*gtm-([a-zA-Z0-9_]+)-([a-zA-Z0-9_]+)-([a-zA-Z0-9_]+).*/;
for(i=0; i<depth && el; i++){
result = reg.exec(el.className)
if(result) return result[index];
el = el.parentElement;
}
return false;
}](https://image.slidesharecdn.com/wpagtm-210129051610/85/Google-Tag-Manager-a-analytika-ve-WordPress-18-320.jpg)
![https://lynt.cz + https://webcheck.cz @smitka
Measurement Protocol
https://developers.google.com/analytics/devguides/collection/pr
otocol/v1/parameters
Pos鱈l叩n鱈 offline akc鱈 do GA. Je poteba sb鱈rat identifik叩tor u転ivatele
(posledn鱈 2 叩sti z cookie _ga -
GA1.2.112936803.1596617851 )
$data['ga_id'] = empty($_COOKIE['_ga'])?'':preg_replace('/^GAd+.d+.(d+.d+)$/', '1', $_COOKIE['_ga']);
https://github.com/lynt-smitka/lynt-leads/blob/37187af497cad6d70acee5b5d4634c85922dd175/lynt-leads.php#L300](https://image.slidesharecdn.com/wpagtm-210129051610/85/Google-Tag-Manager-a-analytika-ve-WordPress-29-320.jpg)
More Related Content
What's hot (17)
Similar to Google Tag Manager a analytika ve WordPress (20)
More from Vladim鱈r Smitka (10)
Google Tag Manager a analytika ve WordPress
- 1. https://lynt.cz + https://webcheck.cz @smitka GTM je kamar叩d a jak se s n鱈m kamar叩dit ve WordPressu
- 2. https://lynt.cz + https://webcheck.cz @smitka Z叩kladn鱈 analytika co chceme? Mit n叩v邸tvnost (kolik, odkud) Sledovat c鱈le (nap. odesl叩n鱈 popt叩vky, kliknut鱈 na nco) Integrovat dal邸鱈 slu転by (Google Ads, Sklik, FB Pixel, HotJar) N叩stroje: Google Tag Manager Google Analytics (pro b転n辿 projekty Universal Analytics) Google Search Console Roz邸鱈en鱈 Google Tag Assistant
- 3. https://lynt.cz + https://webcheck.cz @smitka Google Tag Manager - GTM Jeden k坦d, kter箪 e邸鱈 spou邸tn鱈 v邸ech dal邸鱈ch S叩m o sob nepou転鱈v叩 転叩dn辿 cookies ani dal邸鱈 sledov叩n鱈 (pr箪) Obas blokovan箪 AdBlocky Tagy (Znaky) samotn箪 v箪konn箪 k坦d Triggery (Pravidla) podm鱈nky, kdy se m叩 jak箪 tag spustit Variables (Promnn辿) r哲zn辿 extrahovan辿 kousky dat (m哲転e to b箪t i javascriptiov箪 k坦d) dataLayer vrstva na v箪mnu informac鱈 mezi webem a GTM
- 4. https://lynt.cz + https://webcheck.cz @smitka Google (Universal) Analytics - GA Hit, Session, N叩v邸tva, U転ivatel Hit = interakce se str叩nkou pageview, event (ud叩lost) Pageview = pos鱈l叩 se pi naten鱈 str叩nky, reload je dal邸鱈 pageview Session (N叩v邸tva) = 30 minut neinnosti, jin箪 zdroj, p哲lnoc User (U転ivatel) = Cookie/prohl鱈転e sma転u cookies, jsem nov箪 u転ivatel Hloubka, d辿lka Hloubka = poet str叩nek za jednu n叩v邸tvu D辿lka = as mezi prvn鱈m a posledn鱈m hitem nen鱈 zapo鱈t叩na doba na posledn鱈 str叩nce! Bounce Bounce = okam転it辿 opu邸tn鱈 Nepesn叩 metrika (One page web, Dlouh辿 video/l叩nek) Bounce rate - vhodn箪 pro porovn叩v叩n鱈 mezi kan叩ly D辿lka n叩v邸tvy = 0s (kaz鱈 ostatn鱈 metriky)
- 5. https://lynt.cz + https://webcheck.cz @smitka Universal Analytics vs Google Analytics 4 UA je zalo転en辿 na relac鱈ch/jednotliv箪ch n叩v邸tv叩ch GA4 je zalo転eno na ud叩lostech konkr辿tn鱈ho u転ivatele za 2 (nebo 14) ms鱈c哲 zpt* nap鱈 za鱈zen鱈mi a nap鱈 platformami user journey Omezen鱈 GA4 (zat鱈m) Filtry Dimenze a metriky u produkt哲 Atribuce Napojen鱈 na dal邸鱈 Google slu転by (nap. Search Console)
- 6. https://lynt.cz + https://webcheck.cz @smitka Jak dostat GTM do WP? Vlo転it m鱈c鱈 k坦d, kter箪 se zkl叩d叩 ze 2 叩st鱈. Programov箪m z叩sahem (nic slo転it辿ho) Pomoc鱈 pluginu https://cs.wordpress.org/plugins/duracelltomi- google-tag-manager/ (pos鱈l叩 nkter辿 u転iten辿 vci v dataLayeru)
- 7. https://lynt.cz + https://webcheck.cz @smitka M鱈c鱈 k坦d D哲le転it叩 叩st, lze vlo転it pes wp_head Skoro* nepotebn叩 叩st, od WP5.5 wp_body_open * Oven鱈 Search Console, z叩kladn鱈 trackov叩n鱈 pes Custom Image Tag pi vypnut辿m JS, st鱈転nosti v Tag Assistantu
- 8. https://lynt.cz + https://webcheck.cz @smitka Uk叩zka vlo転en鱈 https://github.com/NasWP/naswp-kit-atomic/blob/master/wp- content/themes/naswp-kit-atomic/classes/class-naswp-gtm.php ablona mus鱈 m鱈t <?php wp_body_open(); ?> Bez toho to lze e邸it zn叩silnn鱈m body_class() PageBuildery maj鱈 typicky vlastn鱈 hook pro vlo転en鱈 za <body> Oxygen: ct_before_builder Elementor: elementor/page_templates/canvas/before_content Beaver: fl_before_builder
- 9. https://lynt.cz + https://webcheck.cz @smitka
- 10. https://lynt.cz + https://webcheck.cz @smitka Jak komunikovat s dataLayer Jednoduch辿 vlo転en鱈 prvku do pole. Pro nkter辿 funkcionality je teba pou転鱈vat definovan辿 n叩zvoslov鱈 https://developers.google.com/tag-manager/devguide#datalayer <script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ 'jmeno': 'hodnota', }); </script>
- 11. https://lynt.cz + https://webcheck.cz @smitka Pro komunikovat pes dataLayer? M哲転eme do analytiky dostat dal邸鱈 u転iten叩 data: V p鱈pad e-shopu informace o produktech a n叩kupn鱈m procesu (Enhanced Ecommerce) Meta informace o str叩nce (kategorie, post_type, 404?, autor, ) Vlastn鱈 ud叩losti kliknut鱈 na nco, odesl叩n鱈 formul叩e,... Uk叩zka odesl叩n鱈 CF7 (https://contactform7.com/dom-events/): <script> document.addEventListener( 'wpcf7mailsent', function( event ) { window.dataLayer = window.dataLayer || []; window.dataLayer.push({ "event": "formSubmission", "formID": event.detail.contactFormId }); }); </script>
- 12. https://lynt.cz + https://webcheck.cz @smitka Uk叩zka posl叩n鱈 dat, vyzvednut鱈 a pou転it鱈 <script> window.dataLayer = window.dataLayer || []; window.dataLayer.push({ <?php echo sprintf( "'wp_postType':'%s',", get_post_type() ); ?> }); </script>
- 13. https://lynt.cz + https://webcheck.cz @smitka Jak nastavit GTM Lynt metodika
- 14. https://lynt.cz + https://webcheck.cz @smitka Plugin GTM4WP (Duracell Tomi)
- 15. https://lynt.cz + https://webcheck.cz @smitka Jak nastavit GMT GTM4WP https://github.com/zjuul/gtm4wp_container Mapov叩n鱈 50+ promnn箪ch dataLayeru pos鱈lan箪ch z pluginu
- 16. https://lynt.cz + https://webcheck.cz @smitka Co je dobr辿 sledovat? PageType (post, page, homepage, 404, search) Poet v箪sledk哲 hled叩n鱈 (hled叩n鱈 bez v箪sledku) Kategorie, p鱈padn tagy Autor Klik叩n鱈 na CTA Odesl叩n鱈 formul叩e
- 17. https://lynt.cz + https://webcheck.cz @smitka Sledov叩n鱈 klik叩n鱈 C鱈l zavol叩n鱈 ud叩losti v GA Cesty: Z webu - Vlo転en鱈 ud叩losti do dataLayeru Z GTM run nastaven鱈 trigger哲 na kliknut鱈 na element s ID/Class/Textem/URL Z GTM Lynt Auto Trackova oznaen鱈 element哲 t鱈dou gtm-<category>-<action>-<label> Pozor na rozd鱈ly
- 18. https://lynt.cz + https://webcheck.cz @smitka Lynt Auto Trackova ud叩lost鱈 function(){ var CLASS = 0, CATEGORY = 1, ACTION = 2, LABEL = 3; var index = ACTION; var el = {{Click Element}}; var depth = 3; var reg= /.*gtm-([a-zA-Z0-9_]+)-([a-zA-Z0-9_]+)-([a-zA-Z0-9_]+).*/; for(i=0; i<depth && el; i++){ result = reg.exec(el.className) if(result) return result[index]; el = el.parentElement; } return false; }
- 19. https://lynt.cz + https://webcheck.cz @smitka Odesl叩n鱈 formul叩e Dkovac鱈 str叩nka jednoduch辿 Ajax hl叩邸ka nutno napsat vlastn鱈 integraci Vt邸ina rozumn箪ch formul叩哲 pos鱈l叩 po odesl叩n鱈 javascriptov箪 event Tag na zachycen鱈 js eventu a vygenerov叩n鱈 vlastn鱈ho eventu do DL Trigger zachycuj鱈c鱈 event v DL Tagy na posl叩n鱈 ud叩losti do GA, spu邸tn鱈 konverzn鱈ch k坦d哲 Pokud ne, lze sledovat Ajax, nebo teba viditelnost prvku s potvrzen鱈m odesl叩n鱈
- 20. https://lynt.cz + https://webcheck.cz @smitka Funnel u v鱈cekrokov箪ch formul叩哲 Ka転d箪 krok m叩 svou URL => jednoduch辿 V URL mn鱈 jen GET parametry => pou転it鱈 za鱈n叩 na / regexp => st叩le vcelku jednoduch辿 Ajax bez zmny v URL: Z event哲 nelze dlat Funnel (v GA4 ano) Mohu vyhodnocovat ud叩losti => n叩ronj邸鱈 run鱈 pr叩ce M鱈sto event哲 budu pos鱈lat virtu叩ln鱈 pageview
- 21. https://lynt.cz + https://webcheck.cz @smitka Virtu叩ln鱈 PageView Mohou n叩m lehce zkreslovat celkov箪 poet PageViews (lze odfiltrovat pomoc鱈 segment哲).
- 22. https://lynt.cz + https://webcheck.cz @smitka Dal邸鱈 integrace Google Ads Pipraven辿 tagy p鱈mo v GTM Je poteba Conversion Linker (propojova konverz鱈)
- 23. https://lynt.cz + https://webcheck.cz @smitka Dal邸鱈 integrace - Sklik Nutno vlo転it standardn鱈 k坦dy jako vlastn鱈 HTML tag
- 24. https://lynt.cz + https://webcheck.cz @smitka Dal邸鱈 integrace Facebook Pixel Nejjednodu邸邸鱈 je pou転鱈t komunitn鱈 邸ablonu (Simo Ahava)
- 25. https://lynt.cz + https://webcheck.cz @smitka GTM debug Je teba doplnk Google Tag Assistant
- 26. https://lynt.cz + https://webcheck.cz @smitka GA z叩kladn鱈 checklist
- 27. https://lynt.cz + https://webcheck.cz @smitka UTM parametry Nikdy nepou転鱈vat v r叩mci webu (teba na bannery)! Pokud chci trackovat bannery v r叩mci webu pou転iju eventy! Je dobr辿 si pipravit metodiku a t辿 se dr転et UTM builder: https://ga-dev-tools.appspot.com/campaign-url-builder/ https://tools.lynt.cz/utm.php
- 28. https://lynt.cz + https://webcheck.cz @smitka Uk叩zka metodiky pro UTM parametry
- 29. https://lynt.cz + https://webcheck.cz @smitka Measurement Protocol https://developers.google.com/analytics/devguides/collection/pr otocol/v1/parameters Pos鱈l叩n鱈 offline akc鱈 do GA. Je poteba sb鱈rat identifik叩tor u転ivatele (posledn鱈 2 叩sti z cookie _ga - GA1.2.112936803.1596617851 ) $data['ga_id'] = empty($_COOKIE['_ga'])?'':preg_replace('/^GAd+.d+.(d+.d+)$/', '1', $_COOKIE['_ga']); https://github.com/lynt-smitka/lynt-leads/blob/37187af497cad6d70acee5b5d4634c85922dd175/lynt-leads.php#L300
- 30. https://lynt.cz + https://webcheck.cz @smitka Vyhodnocen鱈 popt叩vky Prototypov箪 plugin Lynt Leads https://github.com/lynt-smitka/lynt-leads
- 31. https://lynt.cz + https://webcheck.cz @smitka GTM zaj鱈mav辿 zdroje Men鱈 Core Web Vitals re叩ln箪ch n叩v邸tvn鱈k哲 https://www.simoahava.com/analytics/track-core-web-vitals-in-ga4-with- google-tag-manager/ Pr哲vodce trackov叩n鱈m formul叩哲 https://www.analyticsmania.com/post/google-tag-manager-form-tracking/ Generov叩n鱈 JSON-LD (pokud nen鱈 mo転nost je tam d叩t staticky) https://moz.com/blog/using-google-tag-manager-to-dynamically-generate- schema-org-json-ld-tags Cookie Consent managers: https://www.onetrust.com/ https://www.cookiebot.com/en/
- 32. https://lynt.cz + https://webcheck.cz @smitka Uff! A to je v邸e D鱈ky za pozornost a sledujte lynt.cz a m na twitteru @smitka