What is the name of the Google Analytics async template and where is it used?

Question

The Google Analytics async code uses a very clear design pattern to execute javascript code.

The code is library dependent, and it does not know if the library is loaded or not. If the library has not loaded yet, it simply queues all the commands in an Array object. When the library loads, it simply creates the _gaq object and executes all the commands in the sequence in which it was included. Then it overwrites the push function, so future commands are executed immediately.

The idea is to get teams to work very fast when they are queued. The code is really evaluated only after loading the library.

They also load the library with async=true . This has virtually no effect on the actual page load time.

The commands look the same as the synchronization versions, but the first line is the name of the function, and the following parameters are the parameters of the function. You can also embed functions in this array, and the functions will be executed in sequence, as well as with zero context. Therefore, if you need to do something synchronously with the library, you can press a function to do it inside _gaq.

I think this is a very smart solution, but I have never seen it before. Does anyone know the name of this design pattern, or where is it used in addition to the Google Analytics tracking code?

Answer 1

I called it "the sequence of asynchronous functions", but this is not a completely memorable name and, of course, not a formal name for a design pattern.

The interesting thing is that although I did not see this particular model before, since Google adopted it for Google Analytics, it was widely used by different platforms seeking to fill asynchronous juice (Disqus comes to mind.)

This blog post is the most in-depth look at the asynchronous Google Analytics syntax I've read, and contains a fairly detailed explanation of how the template can be replicated:

From the blog post:

 var GoogleAnalyticsQueue = function () { this.push = function () { for (var i = 0; i < arguments.length; i++) try { if (typeof arguments[i] === "function") arguments[i](); else { // get tracker function from arguments[i][0] // get tracker function arguments from arguments[i].slice(1) // call it! trackers[arguments[i][0]].apply(trackers, arguments[i].slice(1)); } } catch (e) {} } // more code here… }; // get the existing _gaq array var _old_gaq = window._gaq; // create a new _gaq object window._gaq = new GoogleAnalyticsQueue(); // execute all of the queued up events - apply() turns the array entries into individual arguments window._gaq.push.apply(window._gaq, _old_gaq); 

He also notes that although not many browsers support the async attribute, the injection method used does asynchronously load the script in most browsers and includes a useful diagram:

Answer 2

All he does is push data into a global array

 var _qaq = _qaq || []; _qaq.push(stuff); 

This basically allows you to accumulate data to work before loading the library.

The main reason this template is not used is because other libraries usually need resources to load before they can do anything. It wouldn't make sense to start jQuery command buffering.

This is not a template that just stores data in a global scope and says that this is some elses work to handle this, I don't care when you process it.

However, this is a smart way to deal with the fact that you don't know when something is loaded or ready, the usual alternative is the DOMReady block.

Answer 3

A good record of javascript download scripts is available here http://friendlybit.com/js/lazy-loading-asyncronous-javascript/

And as far as I remember, the syntax of ga.js async was inspired by Steve Souders . You can see ControlJS , one of his projects

Answer 4

In 2014, Ilya Grigorik wrote a message entitled Script-injected "async scripts", which is considered harmful . This post refers to this question and uses the phrase "asynchronous function queue" as the name of the design pattern used in Google Analytics.

The Async feature queue differs from later design patterns, such as Fetch Injection , which do not require or require a globally defined queue. Here is an example implementation of Fetch Injection implemented in the Fetch Inject module and used to asynchronously load resources in a document:

Note: The Fetch Injection design pattern is able to load CSS in addition to JavaScript in parallel, eliminating CSSOM blocking behavior and web font loading, which significantly reduces perceived delay. Script execution order is fully preserved using an easy-to-use API, which simplifies the management of loading complex resource groups with full program control.