使用 Google Analytics 跟踪 AJAX 请求答案

【问题标题】：Using Google Analytics to track AJAX requests使用 Google Analytics 跟踪 AJAX 请求
【发布时间】：2011-12-16 20:44:29
【问题描述】：

我正在更改网站的很大一部分以使用 jQuery Address 的深度链接 AJAX 功能。我正在使用 mysite.com/#!/page1/subpage/ 等 URI。

我读过很多关于使用_gaq.push() 函数跟踪流量的文章，但我想知道是否可以用更传统的方式来做...

每个 AJAX 请求都会调用一个 PHP 函数，该函数构建一个页面并在 <HTML> 包装器中返回它，这让我可以轻松定义自定义页面标题等。

如果我将分析代码放在该页面上，调用该页面的 jQuery 会触发它来跟踪访问吗？

【问题讨论】：

标签： jquery ajax google-analytics jquery-address

【解决方案1】：

您可以使用 jQuery 的 AJAX 事件来全局侦听 AJAX 请求，然后将索引推送到 _gaq 数组（这似乎是最易于维护的方法）：

$(document).on('ajaxComplete', function (event, request, settings) {
    _gaq.push(['_trackPageview', settings.url]);
});

请注意，.on() 是 jQuery 1.7 中的新内容，在这种情况下与 .bind() 相同。

另外请注意，我没有测试为全局 AJAX 事件传递的参数的内容。

更新

您还可以使用$.globalEval() 解析加载在 AJAX 响应正文中的脚本：http://api.jquery.com/jquery.globalEval/

success: function(data) {

    var dom = $(data);

    dom.filter('script').each(function(){
        $.globalEval(this.text || this.textContent || this.innerHTML || '');
    });

    $('#mydiv').html(dom.find('#something').html());

}

来源：jQuery - script tags in the HTML are parsed out by jQuery and not executed

【讨论】：

【解决方案2】：

其他答案已过时（截至 2013 年）- Google 建议使用他们的新 Universal Analytics

您可以像这样异步跟踪页面浏览量：

ga('send', 'pageview', '/my-page');

见：https://developers.google.com/analytics/devguides/collection/analyticsjs/pages#overriding

【讨论】：

有什么不同？你也可以随时拨打_gaq.push(['_trackPageview'])...

【解决方案3】：

我使用的系统涉及将 html 请求为纯文本，首先解析 html 以将所有脚本标签更改为 div，分离这些 div，附加页面，然后循环遍历 div（实际上是脚本）并附加它们将内容添加到脚本标签或使用该 div 上的 src 创建脚本标签。这与 history.js 框架示例的执行方式非常相似。

$.get(urlToLoad).promise().done(function(html) {
    var outHTML = html;
    outHTML = outHTML.replace(/<script/ig, "<div class='iscript'").replace(/<\/script/ig, '</script');
    outHTML = $(outHTML);
    var scripts = outHTML.filter('div.iscript').detach();
    $content.html(outHTML);
    scripts.each(function() {
      var $this = $(this), s = document.createElement("script");
      if ($this.attr('src') != "") {
        s.src = $this.attr('src');
      } else {
        s.nodeValue = $this.text();
      }
      $content[0].appendChild(s); // jquery's append removes script tags
    });
}).always(function() {
    $contentclone.replaceWith($content);
    $content.slideDown();
    $contentclone.remove();
});

使用此方法，您可以在每个页面上添加执行跟踪的脚本。我个人更喜欢以类似于 Jasper 建议的方式在全局页面上执行此操作。

【讨论】：