Digital Analytic & SEO Acceleration
Your SlideShare is downloading.
×
![function() {
var jsonLd = document.querySelector('script[type*="ld+json"]');
return jsonLd ? JSON.parse(jsonLd.innerHTML) ...](https://image.slidesharecdn.com/measurecamp2016-10jsconcepts-160909104149/85/measurecamp-ix-london-10-javascript-concepts-for-web-analysts-10-320.jpg?cb=1473512973)
![Number: 5
String: "five"
Boolean: true
Array: [1, 2, 3]
Object: {name: "Simo"}
Misc: undefined, null…](https://image.slidesharecdn.com/measurecamp2016-10jsconcepts-160909104149/85/measurecamp-ix-london-10-javascript-concepts-for-web-analysts-15-320.jpg?cb=1473512973)
![typeof [1,2,3]; // "object"
Array.isArray([1,2,3]); // true
typeof undefined; // "undefined"
typeof null; // "object"
und...](https://image.slidesharecdn.com/measurecamp2016-10jsconcepts-160909104149/85/measurecamp-ix-london-10-javascript-concepts-for-web-analysts-18-320.jpg?cb=1473512973)
![if (window['Storage']) {
localStorage.setItem('subscribe', 'true');
sessionStorage.setItem('subscribe', 'true');
} else {
...](https://image.slidesharecdn.com/measurecamp2016-10jsconcepts-160909104149/85/measurecamp-ix-london-10-javascript-concepts-for-web-analysts-48-320.jpg?cb=1473512973)
Check these out next
MeasureCamp IX (London) - 10 JavaScript Concepts for web analysts
- 1. Reaktor Mannerheimintie 2 00100, Helsinki Finland tel: +358 9 4152 0200 www.reaktor.com info@reaktor.com Confidential ©2015 Reaktor All rights reserved 10 javascript conceptsFor advanced (web) analytics implementation Simo Ahava Senior Data Advocate
- 2. Simo Ahava Senior Data Advocate, Reaktor Google Developer Expert, Google Analytics Blogger, developer, www.simoahava.com Twitter-er, @SimoAhava Google+:er, +SimoAhava
- 3. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 Get the basics right
- 4. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 Get the basics right Great JavaScript learning resources
- 5. http://www.codecademy.com/
- 6. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 1. Functions
- 7. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 1. Functions …multi-purpose, multi-use…
- 8. function (number1, number2) { someGlobalProperty.set(number1 * number2); return number1 * number2; } AVOID SIDE EFFECTS!
- 9. function () { var timeNow = new Date(); return function() { return "Time at initialization was ": timeNow; } } understand scope, utilize closures
- 10. function() { var jsonLd = document.querySelector('script[type*="ld+json"]'); return jsonLd ? JSON.parse(jsonLd.innerHTML) : {}; } function() { return {{JSON-LD}}.author.name || undefined; } Leverage return values for max flexibility!
- 11. function() { return function() { window.dataLayer.push({ 'event' : 'commandComplete' }); }; } Modify state in closures, e.g. using hitCallback
- 12. http://www.w3schools.com/js/js_function_closures.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures http://www.simoahava.com/analytics/variable-guide-google-tag-manager/#6 further reading
- 13. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 2. Data types
- 14. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 2. Data types …stay loose…
- 15. Number: 5 String: "five" Boolean: true Array: [1, 2, 3] Object: {name: "Simo"} Misc: undefined, null…
- 16. var five = "5"; five = 5; dynamic type
- 17. var five = "5"; var ten = five * 2; // ten === 10 loose type
- 18. typeof [1,2,3]; // "object" Array.isArray([1,2,3]); // true typeof undefined; // "undefined" typeof null; // "object" undefined === null; // false undefined == null; // true typeof NaN; // "number" isNaN(NaN); // true isNaN(null); // false NaN === NaN; // false weird stuff…
- 19. window.dataLayer.push({ 'event' : 'GAEvent', 'eventData' : { 'cat' : 'Category Value', 'act' : 'Action Value', 'lab' : undefined, // PURGE 'val' : undefined // PURGE } }); use undefined to reset data layer variables
- 20. http://www.w3schools.com/js/js_datatypes.asp https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures http://www.simoahava.com/gtm-tips/undefined-dimensions-wont-get-sent/ further reading
- 21. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 3. HTTP requests
- 22. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 3. HTTP requests …loading resources without blocking the browser…
- 23. the container snippet is a script loader
- 24. it injects a script element into the dom
- 25. which, in turn, downloads the gtm library
- 26. <a href=url> <applet codebase=url> <area href=url> <base href=url> <blockquote cite=url> <body background=url> <del cite=url> <form action=url> <frame longdesc=url>, <frame src=url> <head profile=url> <iframe longdesc=url>, <iframe src=url> <img longdesc=url>, <img src=url>, <img usemap=url> all these html elements invoke an http request <input src=url>, <input usemap=url> <ins cite=url> <link href=url> <object classid=url>, <object codebase=url>, <object data=url>, <object usemap=url> <q cite=url> <script src=url> <audio src=url> <button formaction=url> <command icon=url> <embed src=url> <html manifest=url> <input formaction=url> <source src=url> <video poster=url>, <video src=url>
- 27. GA does both get and post depending on payload size
- 28. http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp http://www.w3schools.com/tags/ref_httpmethods.asp https://developers.google.com/analytics/devguides/collection/protocol/v1/reference#transport further reading
- 29. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 4. Race conditions
- 30. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 4. Race conditions …last one over the finish line is a failed request…
- 31. async in the script tag means the resource is downloaded asynchronously
- 32. Synchronous: The web browser reads, requests, and executes from top-to-bottom, left-to-right. Asynchronous: The web browser reads and requests from top-to-bottom, left-to-right. Execution depends on when the requests complete respectively.
- 33. Synchronous: The web browser reads, requests, and executes from top-to-bottom, left-to-right. Asynchronous: The web browser reads and requests from top-to-bottom, left-to-right. Execution depends on when the requests complete respectively. Race condition: When the browser expects a proper sequence for executing commands, but this sequence cannot be guaranteed.
- 34. var jQLoad = document.createElement('script'); jQLoad.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'; jQLoad.addEventListener('load', function() { window.dataLayer.push({ 'event' : 'jQueryComplete' }); }); document.head.appendChild(jQLoad); use callbacks to establish sequence
- 35. <script> (function() { var el = document.createElement('script'); el.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'; el.addEventListener('load', function() { google_tag_manager[{{Container ID}}].onHtmlSuccess({{HTML ID}}); }); document.head.appendChild(el); })(); </script> tag sequencing can be used but it’s tricky
- 36. http://callbackhell.com/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise http://www.simoahava.com/analytics/understanding-tag-sequencing-in-google-tag-manager/ further reading
- 37. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 5. History manipulation
- 38. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 5. History manipulation …avoiding the dreaded page refresh…
- 39. window.history.pushState( { pageType: 'formThankYou' }, 'Form Success', '/thank-you/' ); pushstate creates a new history entry in the web browser
- 40. window.location = '#thank-you'; changing location to #hash does the same thing
- 41. window.history.replaceState( { pageType: 'formThankYou' }, 'Form Success', '/thank-you/' ); replacestate replaces the current history state
- 42. you can create triggers in gtm that react to these changes
- 43. https://developer.mozilla.org/en-US/docs/Web/API/History_API http://www.w3schools.com/js/js_window_history.asp http://www.simoahava.com/analytics/google-tag-manager-history-listener/ further reading
- 44. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 6. Browser storage
- 45. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 6. Browser storage …introducing state to a stateless environment…
- 46. function() { return function(name, value, ms, path, domain) { if (!name || !value) { return; } var d; var cpath = path ? '; path=' + path : ''; var cdomain = domain ? '; domain=' + domain : ''; var expires = ''; if (ms) { d = new Date(); d.setTime(d.getTime() + ms); expires = '; expires=' + d.toUTCString(); } document.cookie = name + "=" + value + expires + cpath + cdomain; } } browser cookies are useful for simple storage
- 47. {{Simo Cookie Solution}}('subscribe', 'true', 1800000, '/', 'simoahava.com'); browser cookies are useful for simple storage
- 48. if (window['Storage']) { localStorage.setItem('subscribe', 'true'); sessionStorage.setItem('subscribe', 'true'); } else { {{JS - setCookie}}('subscribe', 'true'); } // TO FETCH localStorage.getItem('subscribe'); sessionStorage.getItem('subscribe'); HTML5 STORAGE IS MORE flexible BUT CAN BE DIFFICULT TO MANAGE
- 49. http://www.w3schools.com/js/js_cookies.asp https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API http://www.simoahava.com/analytics/two-ways-to-persist-data-via-google-tag-manager/ further reading
- 50. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 7. DOM traversal
- 51. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 7. DOM traversal …needles in haystacks…
- 52. sometimes you need to retrieve an element without direct access to it
- 53. function() { return {{Click Element}} .parentElement .parentElement .parentElement .parentElement .parentElement; } clumsy
- 54. function() { var el = {{Click Element}}; while (el.className !== 'content-sidebar-wrap' && el.tagName !== 'BODY') { el = el.parentElement; } return el.tagName !== 'BODY' ? el : undefined; } better
- 55. http://www.w3schools.com/js/js_htmldom_navigation.asp http://domenlightenment.com/ http://www.simoahava.com/analytics/node-relationships-gtm/ further reading
- 56. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 8. CSS selectors
- 57. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 8. CSS selectors …magnet for the needles…
- 58. the most useful operator in gtm triggers
- 59. css selectors let you identify elements on the page based on their unique position in the dom
- 60. http://www.w3schools.com/cssref/css_selectors.asp http://www.simoahava.com/analytics/matches-css-selector-operator-in-gtm-triggers/ further reading
- 61. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 9. jQuery
- 62. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 9. jQuery …machine which sorts the magnets…
- 63. function() { var el = {{Click Element}}; while (el.className !== 'content-sidebar-wrap' && el.tagName !== 'BODY') { el = el.parentElement; return el.tagName !== 'BODY' ? el : undefined; } jQuery is excellent for abstracting many difficult issues with working js in the browser
- 64. function() { return jQuery({{Click Element}}).closest('.content-sidebar-wrap'); } jQuery is excellent for abstracting many difficult issues with working js in the browser
- 65. jQuery.post( 'http://www.simoahava.com/', // URL {subscriber: 'true'}, // Payload function() { window.dataLayer.push({'event' : 'requestComplete'}); } // Callback ); jQuery is excellent for abstracting many difficult issues with working js in the browser
- 66. you can load it in a custom html tag, but remember the race condition
- 67. https://api.jquery.com/category/traversing/ http://api.jquery.com/ further reading
- 68. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 10. dataLayer
- 69. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016 10. dataLayer …repository of semantic information - NOT just for GTM…
- 70. datalayer is a global javascript array with a modified .push()
- 71. Since it’s global, it’s easy to destroy
- 72. it’s a message bus, and gtm processes the messages as they come, and in sequence
- 73. note that .push() is the only proprietary method. others have no impact on gtm. window.dataLayer.pop(); // does nothing in GTM window.dataLayer.shift(); // does nothing in GTM window.dataLayer.splice(); // does nothing in GTM window.dataLayer.slice(); // does nothing in GTM window.dataLayer.push(); // does lots of things in GTM
- 74. https://github.com/google/data-layer-helper http://www.simoahava.com/analytics/data-layer/ further reading
- 75. simo.ahava@reaktor.com www.simoahava.com Twitter: @SimoAhava Google+: +SimoAhava
