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,164
Kudos
 
1,164
Kudos

Now read this

SaaS Metrics in the command line

So I have this Terminal. How do I get SaaS Metrics in it? With chartmogul-cli! With quick commands you can get metrics for a specified period. For example, all metrics (MRR, ARR, etc.) since the beginning of 2016. $ chartmogul all... Continue →