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 cannot hide it, but at least do something like Google, not 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 will pass this through a decorator, for example. 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, let's evaluate the closure

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

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

Note that the parameters a and m have no input values ​​and are more like result variables.

This will be approximately (not to worry about the scope of the variable, etc.) equivalent

 (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, this code essentially consists in creating a new script tag with a line:

 a = document.createElement('script'), 

Then finds the first script tag

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

He then sets up a new script tag for asynchronous execution (more information on async execution can be obtained in Understanding Asynchronous Code in Layman Terms , if You Need It)

 a.async = 1; 

The 1 in the line above is equivalent to true , it is used by 1 only because it is shorter.

After this src of this script tag is installed

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

Please note that the protocol is not specified above in the protocol (http or https). This will load the script into the current browser protocol.

And finally, it is inserted before the first script tag, so the browser can start downloading it.

  m.parentNode.insertBefore(a, m) 

So, to summarize :

• We create a script tag
• We set it for asynchronous loading async=true
• We insert this script tag before the first script tag in the document

---

Features related to google analytics.

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

defines a global function called ga that pushes its arguments into an Array queue (named q )

Then with the lines

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

he pushes these "events" in the queue array.

When the script loads, it checks the GoogleAnalyticsObject value that was previously set to specify the ga name with the line

  window['GoogleAnalyticsObject'] = 'ga'; 

Hope this helps

Answer 2

Google has posted an invalid version of this code:

 <!-- Google Analytics --> <script> /** * Creates a temporary global ga object and loads analytics.js. * Parameters o, a, and m are all used internally. They could have been * declared using 'var', instead they are declared as parameters to save * 4 bytes ('var '). * * @param {Window} i The global context object. * @param {HTMLDocument} s The DOM document object. * @param {string} o Must be 'script'. * @param {string} g Protocol relative URL of the analytics.js script. * @param {string} r Global name of analytics object. Defaults to 'ga'. * @param {HTMLElement} a Async script tag. * @param {HTMLElement} m First script tag in document. */ (function(i, s, o, g, r, a, m){ i['GoogleAnalyticsObject'] = r; // Acts as a pointer to support renaming. // Creates an initial ga() function. // The queued commands will be executed once analytics.js loads. i[r] = i[r] || function() { (i[r].q = i[r].q || []).push(arguments) }, // Sets the time (as an integer) this tag was executed. // Used for timing hits. i[r].l = 1 * new Date(); // Insert the script tag asynchronously. // Inserts above current tag to prevent blocking in addition to using the // async attribute. 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'); // Creates a default tracker with automatic cookie domain configuration. ga('create', 'UA-XXXXX-Y', 'auto'); // Sends a pageview hit from the tracker just created. ga('send', 'pageview'); </script> <!-- End Google Analytics --> 

https://developers.google.com/analytics/devguides/collection/analyticsjs/tracking-snippet-reference

Zlatin string explanation is still valid.

Answer 3

The code is minimized. Using http://jsbeautifier.org/ , you can return this (sort) and make it more readable. Basically this is a small feature that adds another javascript (www.google-analytics.com/analytics.js) to dom using the same protocol, http or https.

 (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'); 

Answer 4

i['GoogleAnalyticsObject']=r; This sets the 'ga' property to the 'GoogleAnalyticsObject' window '

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

This part assigns the ga property of the window as a function (or itself, if it already exists). The function then assigns the q property as an empty array and adds all the arguments to the functions to it. Then it assigns the current timestamp to property l (it is multiplied by 1 to force it as an integer).

The following lines simply create a script tag and assign some attributes to it, such as source and async = true, and then add this script tag to the document.

Answer 5

The code runs through the minifier and looks like it is pretty typed:

 (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'); 

You might have to look at your analytics.js file to find out exactly what this is doing, but as it is very likely to be reduced as well, you won’t get much.

If you want to do the same, you can use a minifier code like JSMin. It replaces any inconspicuous spaces and newlines, among other things, to reduce bandwidth.