{"id":126866,"date":"2025-03-11T18:46:25","date_gmt":"2025-03-11T18:46:25","guid":{"rendered":"https:\/\/peraltafinancing.com\/analytics\/10-javascript-concepts-for-web-analytics-implementation\/"},"modified":"2025-03-11T18:46:25","modified_gmt":"2025-03-11T18:46:25","slug":"10-javascript-concepts-for-web-analytics-implementation","status":"publish","type":"post","link":"https:\/\/fivemor.com\/?p=126866","title":{"rendered":"10 JavaScript Concepts For Web Analytics Implementation"},"content":{"rendered":"


\n<\/p>\n

\n

I\u2019ve already written extensively<\/a> about JavaScript in web analytics implementation. Suffice to say, understanding at least the basics<\/em> is absolutely necessary to survive in the technical medium of the web browser.<\/p>\n

\n

<\/p>\n

\"10<\/p>\n

<\/a><\/p>\n<\/div>\n

This article expands on a conference talk I gave at MeasureCamp IX, London<\/a> a short while ago. I\u2019ve always been quite single-minded about the importance of JavaScript in web analytics development, and it was a pleasure for me to get some of that off my chest. So I want to go over the ten concepts introduced in my conference talk with a little more detail, especially in the context of Google Tag Manager<\/a>.<\/p>\n

\n

<\/p>\n

\"table<\/p>\n

<\/a><\/p>\n<\/div>\n


\n X<\/span><\/p>\n

\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n

\n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n

<\/span><\/p>\n

Get the basics right<\/h2>\n

JavaScript is not the quirky animation tool from two decades ago anymore – it\u2019s a programming language if there ever was one. It hides a lot of complexity under its seemingly simple syntax, though in the web browser much of this complexity is either abstracted or removed entirely thanks to how the client-server infrastructure of the web works.<\/p>\n

To get up to speed with JavaScript, I typically recommend the following resources. Codecademy<\/a> especially is something you might want to devote time and effort to. It has lots of different tracks, and some that are extremely useful for web (analytics) developers.<\/p>\n

1. Codecademy<\/h3>\n
\n

<\/p>\n

\"codecademy\"\/<\/p>\n

<\/a><\/p>\n<\/div>\n

Codecademy is an amazing<\/em> resource. The courses are free, fully interactive, and the service keeps track of your progress as you learn new skills along the way. Codecademy has lots of tracks for web developers, but I want to highlight the following as the bare minimum<\/em> for web analytics:<\/p>\n

I recommend making it habitual to always have a course active in Codecademy. Programming is not a skill you develop in silos – each new language and discipline you learn helps you become a better developer overall.<\/p>\n

2. Books<\/h3>\n
\n

<\/p>\n

\"Great<\/p>\n

<\/a><\/p>\n<\/div>\n

You might argue that books are not the best way to keep up-to-date with web technologies, but the following volumes have stood the test of time (with the exception of the last one which is brand new) marvellously, and even if some of the code samples might be outdated, the ideas behind the solutions remain as topical as ever.<\/p>\n

Zakas\u2019 volume is a great, if somewhat intimidating, foray into how JavaScript and the web browser interact. Needless to say, it is a goldmine for understanding the technical stack you\u2019re working with when implementing web analytics solution. It\u2019s the book I would most recommend you to read once you have the basics of JavaScript down.<\/p>\n

3. Sandbox<\/h3>\n

The only way you can really learn something is by doing it. All creative skills, programming included, need honing. The best way to learn programming is to actively practice it. So in addition to taking courses and learning by reading, remember to also create<\/em> stuff! A great way to do it is to deploy Google Tag Manager on your own website. If you don\u2019t have one, you can now create one with your new-fangled skills!<\/p>\n

Play around with the JavaScript Console<\/a> of your web browser\u2019s developer tools. Implement scripts in Google Tag Manager, and see how they interact with your website. Use tools like JS Lint<\/a> to understand what issues your code might have.<\/p>\n

Whatever you do, just keep coding.<\/p>\n

\n

<\/p>\n

\"1.<\/p>\n

<\/a><\/p>\n<\/div>\n

In the context of Google Tag Manager, functions are arguably the most useful little things when customizing implementations. That\u2019s because the Custom JavaScript Variable<\/a> is basically a function call that you use to resolve a value.<\/p>\n

The Custom JavaScript Variable has a very deliberate syntax when using Google Tag Manager, and some of the restrictions might sound odd to you, so I want to go over them with some detail in this chapter.<\/p>\n

Anonymous function with a return statement<\/h3>\n

The Custom JavaScript Variable requires an anonymous function<\/strong> with a return<\/code> statement<\/strong>. An anonymous function is exactly that: it\u2019s a function without a named identifier that you could use to refer to it. Now, you can argue that it does have a name since the Variable itself has a name, but that\u2019s GTM\u2019s proprietary way of resolving the Custom JavaScript Variable and has nothing to do with the underlying JavaScript syntax.<\/p>\n

The Custom JavaScript Variable doesn\u2019t take any parameters, either. All values you want to process through it need to come from the internal data model of Google Tag Manager (GTM\u2019s \u201cVariables\u201d), need to be created on the spot (local scope), or need to be available in the global namespace (global scope).<\/p>\n

Finally, all Custom JavaScript Variables need a return<\/code> statement. They must always return some value, as they are invoked in situations where a value is required.<\/p>\n

So this is the minimum viable Custom JavaScript Variable you could create.<\/p>\n

When invoked with the {{Variable}} syntax, this function would return undefined<\/code>.<\/p>\n

Avoid side effects<\/h3>\n

Since the Custom JavaScript Variable is a value-returning function which does not accept parameters, it should only be used for input\/output operations. Thus, the purpose of the Custom JavaScript Variable is to take some value, modify it, and then return the modified value.<\/p>\n

A function has side effects if it does something else except the input\/output operation described in the previous paragraph. Typical side effects occur when a function is used to modify something in the global scope, or it\u2019s used to set some value elsewhere, or, in the context of Google Tag Manager, it\u2019s used to manipulate the Data Layer.<\/p>\n

You should avoid side effects because Google Tag Manager can\u2019t guarantee that the Custom JavaScript Variable is only resolved once per activation. In fact, in Preview mode, Custom JavaScript Variables can be resolved dozens of times per dataLayer.push()<\/code>, which can lead to a confusing experience.<\/p>\n

\n
function<\/span>() {\n  \/\/ AVOID THIS:\n<\/span>  window<\/span>.dataLayer.push({'event'<\/span> : 'JavaScript executed'<\/span>});\n  return<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n
The main problem with side effects is that they\u2019re hard to trace if problems arise. Since the Custom JavaScript Variables are resolved at arbitrary times, having them modify the global scope can be hazardous and can easily lead to unwanted race conditions.<\/p>\n
Understand scope, utilize closures<\/h3>\n
JavaScript in the web has two types of scope: local and global.<\/p>\n
Local scope<\/strong>, also known as function scope, is what variables are restricted to when declared within a function. When you declare a variable in a function, it will only exist for the duration of the function call (though see the part about closures below), after which the garbage collector comes and whisks it away. Locally scoped variables cannot be referred to or invoked from outside the current function context.<\/p>\n
\n
function<\/span>() {\n  \/\/ These variables all have local scope\n<\/span>  var<\/span> hello = \"Hi, \"<\/span>;\n  var<\/span> myname = \"Simo!\"<\/span>;\n  return<\/span> hello + myname;\n}\n<\/code><\/pre>\n<\/div>\n
Global scope<\/strong>, on the other hand, comprises variables that are declared as properties of the window<\/code> object. If you don\u2019t use the var<\/code> keyword when declaring a variable in a function, it is automatically elevated into global scope.<\/p>\n
When a variable is in global scope, you can refer to it anywhere. For example, the ubiquitous document<\/code> property of the browser\u2019s Document Object Model can be used anywhere since it\u2019s actually a global property of the window<\/code> object:<\/p>\n
\n
window<\/span>.document<\/span> === document<\/span>; \/\/ true\n<\/span><\/code><\/pre>\n<\/div>\n
Closures<\/strong> are an exception to how locally scoped variables are ephemeral and inaccessible from the outside. When you create a closure, you are actually creating a simple interface<\/em> that lets you access the locally scoped variable from outside the function!<\/p>\n
\n
function<\/span>() {\n  var<\/span> timeNow = new<\/span> Date<\/span>(); \/\/ Locally scoped\n<\/span>  return<\/span> function<\/span>() {\n    return<\/span> \"Time then was: \"<\/span> + timeNow;\n  };\n}\n<\/code><\/pre>\n<\/div>\n
The closure is the return function() {...}<\/code> statement. Because the function is declared within same context, it has access to the locally scoped timeNow<\/code> variable. And because the function is the target of the return<\/code> statement, you can actually call this returned function in code! In the example below, the Custom JavaScript Variable we just created above is named Time Then<\/strong>.<\/p>\n
\n
var<\/span> timeThen = {{Time Then}}();\nconsole.log(timeThen);\n<\/code><\/pre>\n<\/div>\n
The parentheses at the end of the Custom JavaScript Variable are significant. If you simply had {{Time Then}}<\/code>, the variable assignment would store the return value of the Custom JavaScript Variable (the closure) into the timeThen<\/code> variable. The console.log()<\/code> command would simply output the function description itself, and not the result. By adding the parentheses, you\u2019re telling the browser to actually invoke<\/strong> the function returned by the Custom JavaScript Variable. Since the timeNow<\/code> is only created once (when the Custom JavaScript Variable is first resolved), the closure will always return the same date-time string.<\/p>\n
Modify state when you are in control of resolution<\/h3>\n
There is one exception to Custom JavaScript Variables having side effects. When you are in full control of when the function is resolved, it\u2019s fine to cause side effects, since you don\u2019t have to worry about the function resolving an unknown number of times or in unknown contexts.<\/p>\n
One such example is when using a closure in a callback<\/em>. Callbacks (more on these later) are execution milestones which take place after some other process has completed. So if you indicate the closure of a Custom JavaScript Variable as the value of a callback, you can rest assured that the function is only called once – when the main process has completed.<\/p>\n
\n
function<\/span>() {\n  \/\/ Return a function to be used by hitCallback\n<\/span>  return<\/span> function<\/span>() {\n    \/\/ It's OK to modify state here!\n<\/span>    window<\/span>.dataLayer.push({'event'<\/span> : 'tagHasFired'<\/span>});\n  };\n}\n<\/code><\/pre>\n<\/div>\n
This process is exemplified in the hitCallback<\/a> feature of the Google Analytics tracker. The hitCallback function is called after the request to Google Analytics has completed. Thus, you can use the closure of a Custom JavaScript Variable to perform some state-altering thing in the hitCallback field itself! This is very useful if you want to chain tags in a sequence, for example.<\/p>\n
FURTHER READING<\/h3>\n
Take a look at the following articles for more information on how functions work:<\/p>\n
\n
    <\/p>\n
    \"2.<\/p>\n
    <\/a><\/p>\n<\/div>\n
In JavaScript, you have five value-carrying data types:<\/p>\n
\n
var<\/span> something = 5<\/span>; \/\/ number\n<\/span>var<\/span> something = \"five\"<\/span>; \/\/ string\n<\/span>var<\/span> something = true<\/span>; \/\/ boolean\n<\/span>var<\/span> something = {five: 5<\/span>}; \/\/ object\n<\/span>var<\/span> something = function<\/span>() { return<\/span> 5<\/span>; }; \/\/ function\n<\/span><\/code><\/pre>\n<\/div>\n
It gets slightly messier than this, since there are actually lots of different types of objects (all JavaScript data types are actually an extension of \u201cobject\u201d in its fundamental sense):<\/p>\n
\n
var<\/span> something = {five: 5<\/span>}; \/\/ Object\n<\/span>var<\/span> something = [5<\/span>,5<\/span>,5<\/span>]; \/\/ Array\n<\/span>var<\/span> something = new<\/span> Date<\/span>(); \/\/ Date\n<\/span><\/code><\/pre>\n<\/div>\n
And finally we have some mystic pseudo-types which don\u2019t carry any value:<\/p>\n
\n
var<\/span> something = undefined<\/span>; \/\/ undefined\n<\/span>var<\/span> something = null<\/span>; \/\/ null\n<\/span><\/code><\/pre>\n<\/div>\n
Dynamic type<\/h3>\n
Unlike some other programming languages (e.g. Java), type is dynamic<\/em> in JavaScript. That means that you can reassign a variable with a completely different type without having to worry about type conversion.<\/p>\n
\n
var<\/span> something = 5<\/span>;\nsomething = \"five\"<\/span>;\n<\/code><\/pre>\n<\/div>\n
The above is possible in JavaScript, because the variable assignment itself doesn\u2019t coerce the assigned value to any specific type. This can be a weakness in the code, because it requires you to test for type to avoid errors.<\/p>\n
\n
\/\/ Works because something is a number\n<\/span>var<\/span> something = 5<\/span>;\nvar<\/span> somethingMultiplied = something * 2<\/span>;\n\n\/\/ Won't work because something is suddenly a string\n<\/span>something = \"five\"<\/span>;\nsomethingMultiplied = something * 2<\/span>; \/\/ NaN: Not a Number\n<\/span>\n\/\/ So you need to test\n<\/span>if<\/span> (typeof<\/span> something === 'number'<\/span>) {\n  somethingMultiplied = something * 2<\/span>;\n}\n<\/code><\/pre>\n<\/div>\n
The further apart your variables are from their execution context, the messier it can get with all the type checks. So try to avoid exploiting dynamic type, and do your best to maintain type when creating and reassigning variables.<\/p>\n
Loose type<\/h3>\n
JavaScript also does type conversion for you when needed. This means that the following is possible:<\/p>\n
\n
var<\/span> something = \"5\"<\/span>;\nvar<\/span> somethingMultiplied = something * 2<\/span>; \/\/ 10\n<\/span><\/code><\/pre>\n<\/div>\n
In the multiplication, JavaScript expects something<\/code> to resolve to the number type. Even though something<\/code> is a string, JavaScript detects the number within and automatically converts the variable to a number for the multiplication statement. The variable something<\/code> itself is not modified, but the value held by it is converted automatically to make resolving somethingMultiplied<\/code> possible.<\/p>\n
Note that there are some embarrassing exceptions. The plus operator (+) is not only used for mathematical statements but also for concatenating strings. So if you try to add a number to a string, you\u2019ll end up with a concatenated string rather than a number!<\/p>\n
\n
var<\/span> a = \"5\"<\/span>;\nvar<\/span> b = 6<\/span>;\nvar<\/span> c = a + b; \/\/ \"56\"!\n<\/span>\n\/\/ You need to use parseInt() to manually convert to number:\n<\/span>c = parseInt<\/span>(a) + b; \/\/ 11\n<\/span><\/code><\/pre>\n<\/div>\n
Weird stuff<\/h3>\n
I\u2019ll just leave this list here. It\u2019s just a handful off the odd behavior you get when working with loose and dynamic type.<\/p>\n
\n
typeof<\/span> NaN<\/span>; \/\/ number\n<\/span>NaN<\/span> === NaN<\/span>; \/\/ false\n<\/span>typeof<\/span> NaN<\/span>; \/\/ number\n<\/span>isNaN<\/span>(NaN<\/span>); \/\/ true\n<\/span>isNaN<\/span>(null<\/span>); \/\/ false\n<\/span>typeof<\/span> null<\/span>; \/\/ object\n<\/span>null<\/span> instanceof<\/span> Object<\/span>; \/\/ false\n<\/span>typeof<\/span> undefined<\/span>; \/\/ undefined\n<\/span>undefined<\/span> === null<\/span>; \/\/ false\n<\/span>undefined<\/span> == null<\/span>; \/\/ true\n<\/span>{simo: true<\/span>} === {simo: true<\/span>}; \/\/ false\n<\/span><\/code><\/pre>\n<\/div>\n
Undefined and Google Analytics<\/h3>\n
Remember that the undefined<\/code> type has a special function<\/a> in Google Analytics (and Google Tag Manager). If you refer to a variable which returns undefined<\/code>, that particular setting, field, or parameter is automatically dropped from the request to Google Analytics.<\/p>\n
In Google Tag Manager, undefined<\/code> can also be used to purge values from the Data Layer<\/a>. This is extremely useful on single-page apps, where variables persist their values throughout the visit.<\/p>\n
\n
window<\/span>.dataLayer.push({\n  event: 'GAEvent'<\/span>,\n  eventData : {\n    cat: 'Category value'<\/span>,\n    act: 'Action value'<\/span>,\n    lab: undefined<\/span>,\n    val: undefined<\/span>\n  }\n});\n<\/code><\/pre>\n<\/div>\n
FURTHER READING<\/h3>\n
The following articles shed more light on data types in JavaScript:<\/p>\n
\n
    <\/p>\n
    \"3.<\/p>\n
    <\/a><\/p>\n<\/div>\n
When looking for things that can slow down the site, slow or poorly performing HTTP requests are usually the easy culprit to blame.<\/p>\n
Thanks to asynchronous loading, most HTTP requests are done in such a way that they don\u2019t block the page from rendering, but async itself doesn\u2019t guarantee a smooth ride.<\/p>\n
Let\u2019s take Google Tag Manager as an example. This is a typical container snippet:<\/p>\n
\n
(function<\/span>(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start'<\/span>:new<\/span> Date<\/span>().getTime(),event:'gtm.js'<\/span>});var<\/span> f=d.getElementsByTagName(s)[0<\/span>],j=d.createElement(s),dl=l!='dataLayer'<\/span>?'&l='<\/span>+l:''<\/span>;j.async=true<\/span>;j.src='\/\/www.googletagmanager.com\/gtm.js?id='<\/span>+i+dl;f.parentNode.insertBefore(j,f);})(window<\/span>,document<\/span>,'script'<\/span>,'dataLayer'<\/span>,'GTM-W92WQQ'<\/span>);\n<\/code><\/pre>\n<\/div>\n
\n
    <\/p>\n
    \"gtm<\/p>\n
    <\/a><\/p>\n<\/div>\n
In other words, the minified code creates a new script<\/code> HTML element, which instructs the browser to request for a file in Google\u2019s servers, and the request is done asynchronously.<\/p>\n
The script<\/code> element, then, turns into an HTTP request, since the src<\/code> attribute in the tag signals the browser to make an HTTP request to the URL value of the attribute.<\/p>\n
\n
    <\/p>\n
    \"gtm.js<\/p>\n
    <\/a><\/p>\n<\/div>\n
So just by creating the script<\/code> tag, the browser automatically executed an HTTP request to the given endpoint, and the result of this request is the gtm.js<\/strong> retrieved in the browser for immediate execution.<\/p>\n
There are lots of elements that can produce an HTTP request. All scripts, images, and HTML files need to be retrieved from the web server, and the main channel of data transfer is the HTTP request. The following HTML tags (with the given attributes) also invoke HTTP requests:<\/p>\n
\n
input src<\/span>=\"url\"<\/span>>\ninput usemap<\/span>=\"url\"<\/span>>\nins cite<\/span>=\"url\"<\/span>>\nlink href<\/span>=\"url\"<\/span>>\nobject classid<\/span>=\"url\"<\/span>>\nobject codebase<\/span>=\"url\"<\/span>>\nobject data<\/span>=\"url\"<\/span>>\nobject usemap<\/span>=\"url\"<\/span>>\nq cite<\/span>=\"url\"<\/span>>\nscript src<\/span>=\"url\"<\/span>>script<\/span>>\naudio src<\/span>=\"url\"<\/span>>\nbutton formaction<\/span>=\"url\"<\/span>>\ncommand icon<\/span>=\"url\"<\/span>>\nembed src<\/span>=\"url\"<\/span>>\nhtml manifest<\/span>=\"url\"<\/span>>\ninput formaction<\/span>=\"url\"<\/span>>\nsource src<\/span>=\"url\"<\/span>>\nvideo poster<\/span>=\"url\"<\/span>>\nvideo src<\/span>=\"url\"<\/span>>\na href<\/span>=\"url\"<\/span>>\napplet codebase<\/span>=\"url\"<\/span>>\narea href<\/span>=\"url\"<\/span>>\nbase href<\/span>=\"url\"<\/span>>\nblockquote cite<\/span>=\"url\"<\/span>>\nbody background<\/span>=\"url\"<\/span>>\ndel cite<\/span>=\"url\"<\/span>>\nform action<\/span>=\"url\"<\/span>>\nframe longdesc<\/span>=\"url\"<\/span>>\nframe src<\/span>=\"url\"<\/span>>\nhead profile<\/span>=\"url\"<\/span>>\niframe longdesc<\/span>=\"url\"<\/span>>\niframe src<\/span>=\"url\"<\/span>>\nimg longdesc<\/span>=\"url\"<\/span>>\nimg src<\/span>=\"url\"<\/span>>\nimg usemap<\/span>=\"url\"<\/span>><\/code><\/pre>\n<\/div>\n
Yeah. That\u2019s quite a bunch.<\/p>\n
Note that HTTP requests can be created manually using e.g. XMLHttpRequest<\/code> or jQuery.ajax()<\/code>. In fact, when you send hits to Google Analytics, you\u2019re actually using HTTP requests created by the analytics.js<\/strong> library.<\/p>\n
\n
    <\/p>\n
    \"GET<\/p>\n
    <\/a><\/p>\n<\/div>\n
FURTHER READING<\/h3>\n
Here\u2019s more information on HTTP requests:<\/p>\n
\n
    <\/p>\n
    \"4.<\/p>\n
    <\/a><\/p>\n<\/div>\n
The difference between asynchronous<\/strong> and synchronous<\/strong> loading is subtle but significant.<\/p>\n
JavaScript in the web browser is single-threaded<\/strong>. That means that only one process can ever be running at a time, and thus every single line of JavaScript must be executed completely before the browser can proceed to the next line. If you make a synchronous<\/strong> HTTP request, it means that the browser will wait until the entire request (download, execution, render) is taken to completion before the browser proceeds to the next line of code in the page. It\u2019s said that synchronous operations are thus blocking<\/strong>.<\/p>\n
To counter this potentially devastating blow to page render and user experience, asynchronous loading was introduced to make the \u201cexpensive\u201d part of the process, the download, happen so that it doesn\u2019t block the browser.<\/p>\n
So, when a request is made asynchronously, the browser initiates the download but then proceeds to the next line of code while the download goes on in the background<\/em>. Only after the file is completely downloaded, does the browser return execution to this initial process, rendering the downloaded asset in the browser.<\/p>\n
The problem with asynchronous execution is that even though you can pinpoint the exact moment when the request is initiated, as it\u2019s governed by the order of the lines of code in the page template, you\u2019ll never know the exact moment when it completes. And this can lead to something called a race condition<\/strong>.<\/p>\n
So let\u2019s say I have the following two lines of code in the page template:<\/p>\n
\n
script async<\/span> src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"<\/span>>script<\/span>>\nscript async<\/span>=\"\"<\/span> src<\/span>=\"https\/\/www.googletagmanager.com\/gtm.js?id=GTM-XXXXX\"<\/span>>script<\/span>><\/code><\/pre>\n<\/div>\n
The browser starts loading the jQuery library before GTM, so I might expect jQuery to available to GTM as soon as the latter has finished downloading. But that\u2019s not necessarily the case! The actual download of jQuery can end long after<\/em> GTM has completed, because the jQuery library is more often than not quite a bulky thing. Also, if the CDN providing the jQuery library has latency, it might affect when jQuery becomes available.<\/p>\n
So, if in Google Tag Manager I try to use jQuery, there can be a race condition<\/strong> where GTM expects jQuery to be available but it isn\u2019t.<\/p>\n
\n
<\/span>\nscript src<\/span>=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js\"<\/span>>script<\/span>>\nscript async<\/span>=\"\"<\/span> src<\/span>=\"https\/\/www.googletagmanager.com\/gtm.js?id=GTM-XXXXX\"<\/span>>script<\/span>>\n\n<\/span>\nscript>\n  (function<\/span>() {\n    var<\/span> el = document<\/span>.createElement('script'<\/span>);\n    el.src = 'https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js'<\/span>;\n    el.async = true<\/span>;\n    el.addEventListener('load'<\/span>, function<\/span>() {\n      window<\/span>.dataLayer.push({event: 'jQueryLoaded'<\/span>});\n    });\n    document<\/span>.head.appendChild(el);\n  })();\nscript<\/span>>\n\n<\/span>\nscript>\n  (function<\/span>() {\n    var<\/span> el = document<\/span>.createElement('script'<\/span>);\n    el.src = 'https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.1.0\/jquery.min.js'<\/span>;\n    el.async = true<\/span>;\n    el.addEventListener('load'<\/span>, function<\/span>() {\n      window<\/span>['google_tag_maanger'<\/span>][{{Container ID}}].onHtmlSuccess({{HTML ID}});\n    });\n    document<\/span>.head.appendChild(el);\n  })();\nscript<\/span>><\/code><\/pre>\n<\/div>\n
It\u2019s better to be safe than sorry, so when working with potential race conditions, make sure to always check if the resources you are trying to use actually exist.<\/p>\n
\n
if<\/span> (typeof<\/span> jQuery !== 'undefined'<\/span>) {\n  \/\/ Use jQuery\n<\/span>} else<\/span> {\n  \/\/ Use something else\n<\/span>}\n<\/code><\/pre>\n<\/div>\n
FURTHER READING<\/h3>\n
Here are some useful links on race conditions, callbacks, and such.<\/p>\n
\n
    <\/p>\n
    \"5.<\/p>\n
    <\/a><\/p>\n<\/div>\n
Single-page web applications<\/a> (SPA) utilize something called the History API<\/a> to provide a multi-page experience with only one initial page load in the web server. Subsequent transitions from page-to-page are commonly done using the History API, by withdrawing content from the server without initiating a page refresh, and manually creating history entries in the web browser. Common frameworks for SPAs are e.g. React<\/a>, AngularJS<\/a>, and Backbone.js<\/a>.<\/p>\n
SPAs have significant implications for web analytics. For example, an SPA can suffer from the rogue referrer<\/a> problem, where URL query parameters that are used for campaign settings are overwritten by a subsequent page view hit. For Google Tag Manager, the problem of persistence rears its ugly head, where variables maintain the values you set earlier, leading to these values bleeding into subsequent tags.<\/p>\n
Browser history is manipulated because when content is dynamically loaded, the site needs to tell the web browser that the user has entered a new page without the benefit of the page reload doing this automatically. Otherwise you wouldn\u2019t be able to link to dynamic content, nor would the Back and Forward buttons of the browser find your dynamic content.<\/p>\n
The two interfaces you\u2019ll run into most often are pushState<\/code> and replaceState<\/code>. The former creates a new history entry in the web browser, and the latter replaces the current entry entirely. Here are examples of how to use them:<\/p>\n
\n
window<\/span>.history.pushState(\n  {pageType: 'formThankYou'<\/span>},\n  'Form Success'<\/span>,\n  '\/thank-you\/'<\/span>\n);\n<\/code><\/pre>\n<\/div>\n
When you run this command, the URL changes to \/thank-you\/ without a page reload. The first two parameters add additional information about the state. If you now click the Back button of the browser, you are taken to the URL where you called pushState<\/code>.<\/p>\n
\n
window<\/span>.history.replaceState(\n  {pageType: 'formThankyou'<\/span>},\n  'Form Success'<\/span>,\n  '\/thank-you\/'<\/span>\n);\n<\/code><\/pre>\n<\/div>\n
When you execute this command, it actually replaces<\/em> the current page in the browser history. In other words, when you click the browser\u2019s Back button, you are taken to the page you were on before<\/em> you entered the page from where you called replaceState<\/code>.<\/p>\n
Note that if you simply add #someHash<\/strong> in the URL, it\u2019s the equivalent of calling pushState<\/code> without the benefit of the other parameters in the interface (e.g. the state object).<\/p>\n
In Google Tag Manager, you have a really<\/strong> useful Trigger type called the History Change<\/a> Trigger. It goes off whenever one of the following History events occur:<\/p>\n
To combat the race condition, we can use tools like callbacks<\/strong>, promises<\/strong> or, in GTM, Tag Sequencing<\/a>. You can always resort to synchronous downloading if you\u2019re really concerned about race conditions, but remember that this can have a detrimental impact on user experience.<\/p>\n
I\u2019ve gone over this code in an earlier article<\/a>, but suffice to say that the end result of all this code is this:<\/p>\n