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.
2. Simo Ahava
Senior Data Advocate, Reaktor
Google Developer Expert, Google Analytics
Blogger, developer, www.simoahava.com
Twitter-er, @SimoAhava
Google+:er, +SimoAhava
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