Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

JavaScript v GTM - Measure Camp Brno 2017

848 Aufrufe

Veröffentlicht am

Prezentace o využití JavaScriptu v GTM na Measure Campu v Brně.

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

JavaScript v GTM - Measure Camp Brno 2017

  1. 1. ÚPLNÉ ZÁKLADY JAVASCRIPTU PRO GOOGLE TAG MANAGER ZA MARKETING MAKERS MICHAL BLAŽEK @BLAZEKMICHAL
  2. 2. PROČ JS V GTM Kde je to v pořádku? Tvorba cookies, kódy zbožáků, timestamp a další vlastní dimenze. Kde je prasárna – sledování věcí z webu, které by měl poslat vývojář. Proč? • Programátor je neschopný nebo nestíhá • Programátor je drahý • Platforma není rozšiřitelná – každá úprava je problém • Požadavek na rychlou implementaci • Často B2B podniky nebo korporáty s IT v zahraničí ALE! Když to jen trochu půjde, nechte to dělat vývojáře klienta!
  3. 3. LIMITACE Blokování GTM Nevíte, zda programátor neudělal změnu na webu Nepřesnost – váš skript se načítá zevnitř GTM – musí se tedy nejdřív načíst GTM a až poté začne skript fungova Doporučuji skripty pouštět při gtm.load Riziko můžete limitovat opatrností – vždy testujte, zda využívaná funkce existuje if(fbq), if(ga), if(window.jQuery) atd. Veškeré své skripty dokumentujte a oznamte to i programátorovi.
  4. 4. SEZNAM RETARGETING
  5. 5. ZASLÁNÍ NÁZVU PRODUKTU DO FB PIXELU
  6. 6. IDENTIFIKACE CÍLOVÝCH SKUPIN Na základě aktivity uživatele na web určíme, do jaké cílové skupiny uživatel patří, a to uložíme do cookies. Víme, že uživatel patřící k nějaké skupině se musí přihlásit do jiného systému než ostatní atd. var typ = ""; $("a[href*='stranka1.organizace.cz']").click(function() { typ = "typ1"; dataLayer.push({ 'event': 'identifikace', 'typ': typ }); });
  7. 7. HEUREKA PIXEL Z (ENHANCED) ECOMMERCE <script> var _hrq = _hrq || []; _hrq.push(['setKey', ‚xxx']); _hrq.push(['setOrderId', '{{transaction id}}']); var xs = []; var field = {{transaction products}}; for (var i=0;i<field.length;i++) { var namehr = field[i].name; var cenahr = field[i].price; var mnostvihr = field[i].quantity; // console.log(cenahr + " " + namehr + " " + mnostvihr); _hrq.push(['addProduct', namehr, cenahr, mnostvihr ]); } _hrq.push(['trackOrder']); (function() { var ho = document.createElement('script'); ho.type = 'text/javascript'; ho.async = true; ho.src = 'https://im9.cz/js/ext/1-roi-async.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ho, s); })(); </script>
  8. 8. CJ – KONVERZE – IFRAME KONVERZNÍ PIXELY
  9. 9. PŘEČTENÍ ID TRANSAKCE Z THANK YOU PAGE A ÚPRAVA PRVKŮ var idtransakce; idtransakce = $('.tableDefault:not(".tableOrderDetail") tr td').eq(1).text(); Pomocí jednoduchého jQuery můžete vyřešit i další problémy – zde drobná ukázka: https://www.w3schools.com/jquery/tryit.asp?filename=tryjqu ery_dom_html_set Např. Když programátor omylem nasadil slevu 30 % místo 20 %. Takto jsme opravili o víkendu.
  10. 10. MĚŘENÍ E-MAILŮ MIMO KONTAKTNÍ FORMULÁŘE http://www.michalblazek.cz/post/121534340593/merit- konverze-z-emailu-analytics • změna e-mailu na základě zdroje • kopírování obsahu http://www.michalblazek.cz/post/160155873078/m%C4%9B% C5%99te-akce-s-telefonn%C3%ADm-%C4%8D%C3%ADslem- a-e-mailem-na-webu • další akce nad telefonním číslem/mailem http://www.michalblazek.cz/post/142138534943/sledovani- odeslani-google-forms-v-google-analytics
  11. 11. ONCE USER-ID – ALWAYS USER-ID – SIMO AHAVA https://www.simoahava.com/gtm-tips/once-userid-always- userid/ Super skript. Ale! Pozor na ochranu soukromí uživatele. Uživatel vám nedal souhlas se sledováním, když není přihlášený. Řešte s právníkem klienta.
  12. 12. FILTRY - ZMĚNA
  13. 13. FILTRY - ZMĚNA <script> // Skript byl výrazně zjednodušen proti prezentovanému. Principem je // využití .change – změny pole $( "#filter-country") .change(function () { $( "#filter-country option:selected" ).each(function() { if( $( this ).val() === '' ) { zeme = ""; } else { zeme += $( this ).text() + " "; } }); dataLayer.push({ "zeme": zeme, "event": "filter" }); }); </script>
  14. 14. PRVKY, KTERÉ SE PŘIDAJÍ DO WEBU AŽ PO NAČTENÍ Je možné odposlechnout podobnými skripty. Sledujeme změnu DOM. $("body").on('DOMSubtreeModified', "mydiv", function() { dataLayer.push({ "event": "newsletter" }); }); https://stackoverflow.com/questions/15657686/jquery-event- detect-changes-to-the-html-text-of-a-div
  15. 15. FB – ADDTOCART A DALŠÍ UDÁLOSTI
  16. 16. FB – VLASTNÍ UDÁLOSTI http://www.michalblazek.cz/post/145113577553/vlastni- udalosti-facebook-pixel
  17. 17. ENHANCED ECOMMERCE FUNNEL PRO SLUŽBU • Kód byl skryt. Pokud jej chcete, napište mi a pošlu více info. • V GTM je vytvořený tag, který se spouští při daných eventech. • Např. • Nejedná se o spam – uživatel doscrolloval do 75 % • Vysoce zaujatý návštěvník – uživatel klikl na CTA tlačítka • Posílá se do Analytics jakou checkout action step • https://developers.google.com/ta g-manager/enhanced- ecommerce#checkoutstep
  18. 18. SKLIK KONVERZNÍ KÓD BEZ GTM http://www.michalblazek.cz/post/131553058703/sklik- konverze-contact-form-7-wordpress Využívejte hooky formulářů a funkcí
  19. 19. VYUŽITÍ IF, INDEXOF // Užitečné, když například nemáte naimplementovaný správně pagetype. // Na základě obsahu URL můžete určit. Můžete využít i pro content // grouping var path = document.location.pathname; var title = document.getElementsByTagName("title")[0].innerHTML; // if path contains /e/orders/, consider it as pageType=basket if (path.indexOf("/e/orders/") > -1) { event.pageType = "basket"; } if (title.indexOf("404") > -1) { event.pageType="error"; }
  20. 20. JSON STRINGIFY – JSON PARSE // Do cookies můžete uložit pouze text. Abyste objekt uložili do // cookies, musíte jej změnit na text. var kosik = { "basketItems": basketitemshelp, "basketTotal": total, "email": useremail }; setCookie("persoo_kosik", JSON.stringify(kosik), 360); var obsahkosiku = JSON.parse(obsahkosikuHelp);
  21. 21. SCROLL TRACKING http://scrolldepth.parsnip.io/
  22. 22. YOUTUBE TRACKING http://www.lunametrics.com/blog/2015/05/11/updated- youtube-tracking-google-analytics-gtm/
  23. 23. DOTAZY?  MICHAL BLAŽEK MICHAL@MARKETINGMAKERS.NET 728 729 312
  24. 24. DĚKUJI ZA POZORNOST MICHAL BLAŽEK MICHAL@MARKETINGMAKERS.NET 728 729 312

×