Deconstructing the Google Analytics tracking script

What does the Google Analytics script actually do? It’s pretty convoluted at first glance.

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', window.ga_id, 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('send', 'pageview');

After beautifying it with jsbeautifier it’s still not clear what the script actually does.

      (function(i, s, o, g, r, a, m) {
          i['GoogleAnalyticsObject'] = r;
          i[r] = i[r] || function() {
              (i[r].q = i[r].q || []).push(arguments)
          }, i[r].l = 1 * new Date();
          a = s.createElement(o),
              m = s.getElementsByTagName(o)[0];
          a.async = 1;
          a.src = g;
          m.parentNode.insertBefore(a, m)
      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');
      ga('create', window.ga_id, 'auto');
      ga('require', 'linkid', 'linkid.js');
      ga('send', 'pageview');

Firstly, there’s a function that invokes itself.

This:

      (function(i, s, o, g, r, a, m) {
      })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

Could be written as this:

function gaScript(windowObject, documentObject, scriptString, googleAnalyticsUrl, gaString, a, m) { ... }

gaScript(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

Interestingly, the arguments passed to the function spell out i, s, o, g, r, a, m, is a “term for a word or phrase without a repeating letter” (source), which I guess makes sense, given that the script looks like it has the bare minimum of characters possible.

The script is passing the window and document objects to the function, and also the strings ‘script’ and ‘ga’, and the URL of what looks like another tracking script. It seems like a and m are optional arguments.

So what’s it doing with those arguments?

window.GoogleAnalyticsObject now equals ‘ga’.

window['GoogleAnalyticsObject'] = 'ga';

Next, window.ga becomes a function that makes window.ga.q an array containing the window, document, and the other arguments passed to the function.

          window['ga'] = window['ga'] || function() {
              window['ga'].q = window['ga'].q || []
              window['ga'].q.push(arguments)
          }

So, window.ga.q now equals [window,document,'script','//www.google-analytics.com/analytics.js','ga'].

Now window.ga.l becomes the value of the current date.

          window['ga'].l = 1 * new Date();

Now those unused parameters a and m come in handy. No writing var in this script. a becomes a script element <script></script> which hasn’t yet been added to the DOM. m now equals the first script in the DOM.

Making a.async truthy ensures the script will be executed asynchronously as soon as it’s added to the DOM. In this case, it’s pulling in the analytics.js script from www.google-analytics.com as soon as it’s added to the DOM.

          a = document.createElement('script'),
          m = document.getElementsByTagName('script')[0];
          a.async = true;
          a.src = '//www.google-analytics.com/analytics.js';

Then the script element a is added to the DOM just before m, the first script in the DOM.

m.parentNode.insertBefore(a, m)

Finally, there are a few calls to the globally available ga object to register the visitor and send a pageview to Google Analytics.

    ga('create', window.ga_id, 'auto');
    ga('require', 'linkid', 'linkid.js');
    ga('send', 'pageview');

An unminified and less convoluted version of the script might look like this:

function gaScript(){
          window.GoogleAnalyticsObject = 'ga';

          window.ga = window.ga || function() {
              window.ga.q = window.ga.q || []
              window.ga.q.push(arguments)
          }

          window.ga.l = 1 * new Date();

          a = document.createElement('script'),
          m = document.getElementsByTagName('script')[0];
          a.async = true;
          a.src = '//www.google-analytics.com/analytics.js';
}(a, m)

So the answer to the question “what does the Google Analytics tracking script actually do?”, is that it creates a global ga function, and asynchronously loads the full Google Analytics tracking script analytics.js, so that one can make requests like ga('send', 'pageview').

Thanks for reading!

 
1,161
Kudos
 
1,161
Kudos

Now read this

How to do inbound sales

1. Need leads Get a steady flow of potential customers signing up to try your software. These are inbound leads. 2. Send a personal hello When a person shows an interest in your software, reach out with an email or call. Start a... Continue →