Google Analytics and DOM ready

Question

There are a few events that are fired when certain resources have finished loading, such as https://developer.mozilla.org/en-US/docs/Web/Events/DOMContentLoaded and https://developer.mozilla.org/en-US/docs/Web/Events/load

I was wondering whether or not there is a way to find out when the Google Analytics code is loaded, i.e. what event triggers Google Analytics to load?

I'm trying to include a script without hindering the loading of more important resources, such as the HTML itself, images, stylesheets, and other scripts. Also, I need this to work independently from libraries such as jQuery.

According to Google Analytics [help](https://developers.google.com/analytics/devguides/collection/analyticsjs/): "When the code runs, it asynchronously loads the Google Analytics Tracking Code onto the page." It shouldn't hinder other resources. But if you still want to have more control over when actually GA script fires, you could use Google Tag Manager. There is possibility to set moment of script being loaded to 'DOM Ready' event. Check this out: [GTM Rules](https://support.google.com/tagmanager/answer/2644396?hl=en) — Tomek Lechowicz, Jan 07 '15 at 06:50

score 0 · Answer 1 · answered Jan 07 '15 at 08:19

The Universal Analytics uses a self-executing function:

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

This creates a script tag to load the analytics.js file. This script tag has an async attribute, async in this context meaning that this is non-blocking (also apparently creating the script tag dynamically already means that loading will be non blocking: "There are six main techniques for downloading scripts without blocking: [...] Script DOM Element – Create a script element and set its src property to the script’s URL.").

So loading of the external Google Analytics files begins after the bootstrap code has run; due to the asynchronous load (for browser that support asynch) you cannot exactly pinpoint when it's loading, but for practical purposes it doees not matter as it won't interfere with other operations.

As to Tomeks comment, you do not want to launch the bootstrap function on DOM Ready. It creates a date object that is used in the timing reports, e.g. to determine how long it take from page load to DOM ready; if you wait till DOM ready before you load the code you break the timing reports (this is also the reason that the GA code should go at the top of the page).

Google Analytics and DOM ready

1 Answers1