如何检测 Google Analytics 是否已加载并能够跟踪自定义事件

Question

我们在加载带有视频播放器的 iframe 时遇到了一些问题，该视频播放器将播放事件发送到该 iframe（在另一个域上）中加载的 Google Universal Analytics (analytics.js)。 GA 跟踪器没有加载到 iOS 设备上，因此，没有事件跟踪被发送到 GA。

在 Android 和包括桌面设备在内的其他设备上它工作得很好，但在 iOS 上却不行，除非我更改了 iOS Safari 上默认的第三方 cookie 设置。

我对 Google Analytics (https://github.com/Foture/cookieless-google-analytics) 使用无 cookie 方法进行了测试，这样 iOS 设备能够正确地将跟踪事件发送到 GA。但是，我只想在常规 GA 方法不起作用时将该方法用作后备，因为通过指纹方法创建的 UserId 在移动设备上不是很唯一。

所以我需要一种方法来检测常规 GA 方法何时能够跟踪事件，如果不能，要么是因为未加载跟踪器或 cookie 被禁用，然后使用 cookie-less 方法来加载 GA 和跟踪事件。

谢谢！

Answer 1

在使用 ga() 方法跟踪事件之前，您应该使用检查 JavaScript window.ga && ga.loaded 变量：

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;
}

更多信息请关注https://hacks.mozilla.org/2016/01/google-analytics-privacy-and-event-tracking/

Answer 2

您可以尝试在 ga 对象上使用（看似）未记录的属性：ga.loaded。

我在官方文档中能找到的唯一对这个属性的引用是在一个描述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>

因此，您可以尝试类似的方法：

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.
   // ...
}