竞争条件和同步使用 Google Analytics 异步 (_gaq)

Question

我有一个网站正在使用 Google Analytics 较新的异步跟踪方法 (_gaq)。我遇到的问题是我想建立一些特定的链接跟踪，并且担心我会创建竞争条件。

基本上，它是一个新闻网站，因此它的标题链接到各地的故事。一个故事的标题可能会出现在一个页面上的 3 个不同位置，并出现在数百个其他页面上。因此，为了了解我们的受众如何与网站互动，我们必须跟踪每个特定标题块的使用方式，而不仅仅是目的地。由于跟踪单个页面的这两个规定，仅跟踪引用的页面是不够的，我们必须跟踪单个链接。

所以如果我有一个链接。

<a href="http://www.blah.com" onclick="_gaq.push('_trackEvent','stuff')">Here</a>

由于 _gaq.push() 是异步调用，那么页面更改是否有可能在 Google 完成点击跟踪之前发生？如果是这样，有没有办法防止这种情况，或者我对 Google Analytics 异步功能的方式有误解（http://code.google.com/apis/analytics/docs/tracking/asyncUsageGuide.html）。

Answer 1

你说得对。如果浏览器在发送事件的 GA 跟踪信标（gif hit）之前离开页面，则不会记录该事件。然而，这对于异步代码来说并不新鲜，因为发送跟踪信标的过程是异步的；旧代码在这方面的工作方式相同。如果跟踪确实那么重要，您可以执行以下操作：

function track(link) {
  if (!_gat) return true;
  _gaq.push(['_trackEvent', 'stuff']);
  setTimeout(function() {location.href=link.href'}, 200);
  return false;
}

...

<a href="example.com" onclick="return track(this);"></a>

如果 GA 已加载，则单击链接时将阻止浏览器转到下一页（最好不要让用户等待那么长时间）。然后，它发送事件并等待 200 毫秒，将用户发送到他们单击的链接的 href。这增加了事件被记录的可能性。您可以通过延长超时时间来进一步增加可能性，但这也可能会损害此过程中的用户体验。这是一个你必须尝试的平衡。

Answer 2

我也遇到了这个问题，并且决心找到一个真正的解决方案。

将函数推入队列怎么样？

  // Log a pageview to GA for a conversion
  _gaq.push(['_trackPageview', url]);
  // Push the redirect to make sure it happens AFTER we track the pageview
  _gaq.push(function() { document.location = url; });

Answer 3

来自 Google 通用分析文档（新版本因为这个问题的大多数其他答案）。您现在可以轻松指定回调。

var trackOutboundLink = function(url) {
   ga('send', 'event', 'outbound', 'click', url, {'hitCallback':
     function () {
     document.location = url;
     }
   });
}

为了清楚起见，我建议使用此语法，这样可以更清楚地显示您要发送的属性并更轻松地添加更多属性：

            ga('send', 'event', {
                'eventCategory': 'Homepage',
                'eventAction': 'Video Play',
                'eventLabel': label,
                'eventValue': null,

                'hitCallback': function()
                {
                    // redirect here
                },

                'transport': 'beacon',

                'nonInteraction': (interactive || true ? 0 : 1)
            });

[这里有一个 所有可能的 ga 调用的完整参数列表。]

此外，我还添加了 transport 参数设置为 beacon （实际上不需要，因为它会在适当的情况下自动设置）：

这指定了发送点击的传输机制。
选项为“beacon”、“xhr”或“image”。默认情况下，analytics.js
将尝试根据命中大小找出最佳方法
浏览器功能。如果您指定“beacon”和用户的浏览器
不支持navigator.sendBeacon方法，会回退
为“image”或“xhr”，具体取决于命中大小。

因此，当使用 navigator.beacon 导航不会中断跟踪。不幸的是，微软对信标的支持不存在，因此您仍然应该将重定向放在回调中。

Answer 4

在事件处理程序中，您应该设置点击回调：

_gaq.push(['_set', 'hitCallback', function(){
  document.location = ...
}]);

向您发送数据

_gaq.push(['_trackEvent'

并停止事件事件处理

e.preventDefault();
e.stopPropagation();

Answer 5

我正在尝试一种新方法，我们自己构建 utm.gif 的 URL，并请求它，然后只有在收到响应（gif）后，我们才会向用户发送：

用法：

  trackPageview(url, function() { document.location = url; });

代码（来自 CrumbleCookie ：http://www.dannytalk.com/read-google-analytics-cookie -脚本/)

/** 
 * Use this to log a pageview to google and make sure it gets through
 * See: http://www.google.com/support/forum/p/Google%20Analytics/thread?tid=5f11a529100f1d47&hl=en 
 */
function trackPageview(url, fn) {
  var utmaCookie = crumbleCookie('__utma');
  var utmzCookie = crumbleCookie('__utmz');

  var cookies = '__utma=' + utmaCookie + ';__utmz=' + utmzCookie;

  var requestId = '' + (Math.floor((9999999999-999999999)*Math.random()) + 1000000000);
  var hId = '' + (Math.floor((9999999999-999999999)*Math.random()) + 1000000000);

  var utmUrl = 'http://www.google-analytics.com/__utm.gif';
  utmUrl += '?utmwv=4.8.9';
  utmUrl += '&utmn=' + requestId;
  utmUrl += '&utmhn=' + encodeURIComponent(window.location.hostname);
  utmUrl += '&utmhid=' + hId;
  utmUrl += '&utmr=-';
  utmUrl += '&utmp=' + encodeURIComponent(url);
  utmUrl += '&utmac=' + encodeURIComponent(_gaProfileId); 
  utmUrl += '&utmcc=' + encodeURIComponent(cookies);

  var image = new Image();
  image.onload = function() { fn(); };
  image.src = utmUrl;
}

/**
 *  @author:    Danny Ng (http://www.dannytalk.com/read-google-analytics-cookie-script/)
 *  @modified:  19/08/10
 *  @notes:     Free to use and distribute without altering this comment. Would appreciate a link back :)
 */

// Strip leading and trailing white-space
String.prototype.trim = function() { return this.replace(/^\s*|\s*$/g, ''); }

// Check if string is empty
String.prototype.empty = function() {
    if (this.length == 0)
        return true;
    else if (this.length > 0)
        return /^\s*$/.test(this);
}

// Breaks cookie into an object of keypair cookie values
function crumbleCookie(c)
{
    var cookie_array = document.cookie.split(';');
    var keyvaluepair = {};
    for (var cookie = 0; cookie < cookie_array.length; cookie++)
        {
        var key = cookie_array[cookie].substring(0, cookie_array[cookie].indexOf('=')).trim();
        var value = cookie_array[cookie].substring(cookie_array[cookie].indexOf('=')+1, cookie_array[cookie].length).trim();
        keyvaluepair[key] = value;
    }

    if (c)
        return keyvaluepair[c] ? keyvaluepair[c] : null;

    return keyvaluepair;
}

Answer 6

使用 onmousedown 而不是 onclick 也可能有帮助。它并没有消除竞争条件，但它让 GA 领先一步。还有人担心有人点击链接并在松开鼠标按钮之前将其拖走，但这可能是一个可以忽略不计的情况。