javascript - Google Analytics Code Explanation

Question

Can someone explain this code 'step by step','line by line'? I would like to learn more about Asynch code and how Google loads their script, how to 'hide' javascrippt from users (I know that I can't hide it but at least make it something like Google does, not to show all code in one file)

<script>
  (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', 'UA-xxxxxxxx-x', 'xxxxxx.com');
  ga('send', 'pageview');
</script>

Answer 1

First of all, I would pass this through a beautifier, e.g. http://jsbeautifier.org/

 (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', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

After that lets evaluate the closure

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

by replacing each of the named parameters: i, s, o, g, r with their corresponding values window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'

Note that a and m parameters do not have input values and are more like result variables.

This would be roughly (not bothering about variable scope, etc.) equivalent to

(function (i, s, o, g, r, a, m) {
     window['GoogleAnalyticsObject'] = 'ga';
     window['ga'] = window['ga'] || function () {
         (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 = 1;
     a.src = '//www.google-analytics.com/analytics.js';
     m.parentNode.insertBefore(a, m)
 })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

In short what this code does in essence, is that it creates a new script tag with the line:

a = document.createElement('script'),

Then finds the first script tag

m = document.getElementsByTagName('script')[0];

Then it sets the newly created script tag to asynchronous execution (More insight on async execution could be obtained at Understanding Asynchronous Code in Layman's terms should you need it)

a.async = 1;

1 in the line above is equivalent to true, it is used 1 just because it is shorter.

After that the src of this script tag is set

 a.src = '//www.google-analytics.com/analytics.js';

Note that above no protocol (http or https) is specified in the URL. This would allow for the script to be loaded in the current browser protocol.

And finally it is inserted before the first script tag, so the browser could start loading it.

 m.parentNode.insertBefore(a, m)

So to summarize:

1. We create a script tag
2. We set it to load asynchronously async=true
3. We insert this script tag, before the first script tag in the document

---

Specifics related to google analytics.

 window['ga'] = window['ga'] || function () {
     (window['ga'].q = window['ga'].q || []).push(arguments)
 }, window['ga'].l = 1 * new Date();

defines global function named ga that pushes its arguments in a queue Array (named q)

Then with the lines

 ga('create', 'UA-xxxxxxxx-x', 'xxxxxx.com');
 ga('send', 'pageview');

it pushes these "events" in the queue Array.

When the script is loaded, it checks the value of GoogleAnalyticsObject, which earlier was set to point to the name of ga with the line

 window['GoogleAnalyticsObject'] = 'ga';

Hope this helps