How to detect if Google Analytics is loaded and able to track custom Events

Question

We're having some issues when we're loading an iframe with a video player that sends playback Events to Google Universal Analytics (analytics.js) loaded inside that iframe (on another domain). The GA tracker is not being loaded on iOS devices and because of that, no event tracking is being sent to GA.

On Android and other devices including desktop it works just fine, but not on iOS unless I changed the third-party cookies setting that comes default on iOS Safari.

I did a test using a cookie-less method for Google Analytics (https://github.com/Foture/cookieless-google-analytics) and that way iOS devices were able to correctly send track Events to GA. However, I want to use that method only as a fallback when the regular GA method don't work, because the UserId that is created via the Fingerprint method is not very unique on mobile devices.

So I need a way to detect when the regular GA method is able to track events and if is not able, either because the tracker was not loaded or cookies are disabled, then use the cookie-less method to load GA and track the events.

Thanks!

score 2 · Answer 1 · answered Feb 24 '16 at 13:29

2

You should use check JavaScript window.ga && ga.loaded variables before using ga() method to track events:

if(window.ga && ga.loaded) { {
    // if yes, rely on GA to follow link
    ga('send', 'event', 'outbound', 'click', url, {
        'transport': 'beacon',
        'hitCallback': function(){document.location = url;}
    });
} else {
    // if not, follow link ourselves
    document.location = url;
}

Se more on https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/

answered Feb 24 '16 at 13:29

CralDk

21
2

It is interesting that `ga.loaded`is not officially documented, but Google also uses it in examples e.g. here https://developers.google.com/analytics/devguides/collection/analyticsjs/enhanced-ecommerce – mikep Feb 17 '20 at 11:25
I rather used custom solution to be not dependent on undocumented `ga.loaded`. I have updated JS analytics code... `(function(i,s,o,g,r,a,m){ ... a.onload = function(){ i[r].isLoaded = true } ... }` and then I can test `ga.isLoaded`. – mikep Feb 17 '20 at 11:32

score 1 · Answer 2 · answered Apr 29 '15 at 18:04

You could try using a (seemingly) undocumented property on the ga object: ga.loaded.

The only reference to this property I could find in the official documentation is in an example describing the use of hitCallback for E-Commerce tracking:

// Called when a link to a product is clicked.
function onProductClick() {
   // Truncated Google Analytics example for brevity.
   // [...]
}

<a href="/next-page.html" onclick="onProductClick(); return !ga.loaded;">Android Warhol T-Shirt</a>

You could thus try something similar to:

if (typeof ga !== 'undefined' && ga.hasOwnProperty('loaded') && ga.loaded === true) {
   // ga successfully loaded. Custom Events available
   // ...
} else {
   // ga not loaded, fallback to another tracking implementation.
   // ...
}

While Google's ecommerce tracking docs still contain that tidbit of code referencing `ga.loaded`, it does not seem to actually be a thing (or at least not in all configurations using universal analytics). It seems to be sufficient to test for `typeof window.ga == "function"` — Mahmoud Al-Qudsi, Nov 21 '18 at 01:41

How to detect if Google Analytics is loaded and able to track custom Events

2 Answers2