Here's my list of 10 JavaScript (related) concepts that I think all web analysts should understand at least on a basic level. A solid grasp of JavaScript is a base requirement for anyone working with the web browser.
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
10. function (number1, number2) {
someGlobalProperty.set(number1 * number2);
return number1 * number2;
}
AVOID SIDE EFFECTS!
11. function () {
var timeNow = new Date();
return function() {
return "Time at initialization was ": timeNow;
}
}
understand scope,
utilize closures
12. 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!
13. function() {
return function() {
window.dataLayer.push({โจ
'event' : 'commandComplete'
});โจ
};
}
Modify state in closures, e.g.
using hitCallback
32. @SimoAhava from @ReaktorNow | #MeasureCamp | 10 Sep 2016
4. Race conditions
โฆlast one over the finish line is a failed requestโฆ
33. async in the script tag means
the resource is downloaded
asynchronously
34. 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.
35. 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.
36.
37. 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
38. <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
51. 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
66. 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
67. function() {โจ
return jQuery({{Click Element}}).closest('.content-sidebar-wrap');
}
jQuery is excellent for
abstracting many difficult issues
with working js in the browser
68. 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
69. you can load it in a custom html
tag, but remember the race condition
75. itโs a message bus, and gtm
processes the messages as they come,
and in sequence
76. 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