javascript - 如何扩展谷歌分析以跟踪 AJAX 等(根据 H5BP 文档)

Question

我正在尝试安装 google analytics augments在 extend.md 中确定H5BP 文件 (https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md)

它指出“优化的”谷歌分析 JS 代码段包括以下代码:

var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];

以及额外的增强，例如 track jquery AJAX requests , track javascript errors和 track page scroll应在 _gaq 之后添加被定义为。

事实上，当前版本的 H5BP 中包含的代码片段并没有引用 _gaq。作为变量:

        (function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
        function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
        e=o.createElement(i);r=o.getElementsByTagName(i)[0];
        e.src='//www.google-analytics.com/analytics.js';
        r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
        ga('create','UA-XXXXX-X');ga('send','pageview');

这在尝试使用任何 H5BP 扩展时会产生未定义的错误。例如。

if (typeof _gaq !== "undefined" && _gaq !== null) {
    $(document).ajaxSend(function(event, xhr, settings){
        _gaq.push(['_trackPageview', settings.url]);
    });
}

由于 _gaq 未定义，因此无法正常工作。

这些增强功能是如何实现的？有人可以提供一个工作示例来显示所有扩展的完整实现吗？

谢谢

Answer 1

您尝试添加的代码将不起作用，如 _gaq是用于将跟踪信标推送到旧 Google Analytics (GA) 版本的数组。但是，您似乎正在使用的最新版本的 HTML5 BoilerPlate (H5BP) 已经自我更新以利用 Google 发布的下一个 GA 版本 Universal Analytics (UA)。这可以从相对协议(protocol)的 URL //www.google-analytics.com/analytics.js 中看出。以及最新版本的文档。不幸的是，似乎 doc you mentioned尚未更新，正如 H5BP 中提供的 source 的链接优化的 GA 代码，本身已更新为 UA 的代码这就是 H5BP 源现在使用的。

因此，您的附加源代码扩展了 _gaq 的使用。对象将不起作用，因为您没有使用 ga.js它具有处理推送到 _gaq 的数据的功能来自 GA 的对象，但 analytics.js对于 UA，它不会初始化任何此类对象，如 _gaq或具有处理推送到 _gaq 的数据的功能.

但是，在升级自身以使用 analytics.js 之前(UA)，H5BP 有一个 GA 版本的脚本，像这样(我得到了这个，由曾经与 H5BP 合作的 friend 提供):

<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
    <script>
        var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; //here the _gaq was initialised
        (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
        g.src='//www.google-analytics.com/ga.js';
        s.parentNode.insertBefore(g,s)}(document,'script'));
    </script>

理想情况下，这应该替换您提到的代码行，即

(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
    function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
    e=o.createElement(i);r=o.getElementsByTagName(i)[0];
    e.src='//www.google-analytics.com/analytics.js';
    r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
    ga('create','UA-XXXXX-X');ga('send','pageview');

如果你这样做了，那么你对代码的使用

if (typeof _gaq !== "undefined" && _gaq !== null) {
$(document).ajaxSend(function(event, xhr, settings){
    _gaq.push(['_trackPageview', settings.url]);
});
}

等等使用 _gaq将工作。

还请记住，您当前使用的 H5BP 代码是最好的，因为 Google 正在逐步淘汰 GA，以使 Universal Analytics 成为分析的 future 。我提到的旧代码不再有效(或将在不久的将来停止工作，具体取决于 Google)。在 UA Upgrade Center 上阅读更多相关信息.

请记住，当前的 H5BP 使用 UA (analytics.js) 代码，这是 Google 提供的优化形式，如发现 here .

这就解释了为什么 extend.md 中提到的脚本不适用于您似乎正在使用的 H5BP，这是通过实现旧代码的一种可能的解决方法。您需要的是一种使用现有脚本跟踪 AJAX 等的方法。为此，每次 AJAX 请求完成时，您都可以简单地记录一个虚拟网页浏览量。你可以找到类似的场景 here .在那里，询问者将跟踪应用于模式的打开。您可以应用相同的技术来跟踪页面或部分页面的 AJAX 调用和检索。在您的情况下，我在答案中指定的 VURL 可以是 /virtual/ajax/url-of-page-retrieved-via-ajax .

如果您不希望发送虚拟浏览量，您还可以为每个 AJAX 请求发送自定义事件。阅读有关 UA 中的事件跟踪的更多信息 here .

如果你想知道你指定的函数的参数代表什么，你可以阅读 here .这是 extend.md 中的脚本你提到的文件被拿走了。修改脚本以与 UA 一起使用的尝试可能如下所示:

(function ($) {
  // Log all jQuery AJAX requests to Google Analytics
  $(document).ajaxSend(function(event, xhr, settings){ 
    ga('send','pageview',settings.url.pathname);
  });
})(jQuery);

ajaxSend()方法是每次 jQuery AJAX 调用完成时触发的回调。记住这个词 jQuery这里。这仅适用于 jQuery AJAX 请求。 xhr一般代表 XMLHttpRequest。我认为它假设人们知道 jQuery AJAX 调用是什么，我对此不是很了解。

要使用 UA 跟踪 Javascript 错误，类似的脚本将是:

(function(window){
var undefined,
    link = function (href) {
        var a = window.document.createElement('a');
        a.href = href;
        return a;
    };
window.onerror = function (message, file, line, column) {
    var host = link(file).hostname;
    ga('send','event',
        (host == window.location.hostname || host == undefined || host == '' ? '' : 'external ') + 'error',
        message, file + ' LINE: ' + line + (column ? ' COLUMN: ' + column : ''),
        {'nonInteraction': 1});
    };
}(window));

这同样收集:事件类别将是 host+error , Action 将是错误消息，label 将指向错误发生的位置(行号、文件名等)。

跟踪页面滚动也很相似:

$(function(){
var isDuplicateScrollEvent,
    scrollTimeStart = new Date,
    $window = $(window),
    $document = $(document),
    scrollPercent;

$window.scroll(function() {
        scrollPercent = Math.round(100 * ($window.height() + $window.scrollTop())/$document.height());
        if (scrollPercent > 90 && !isDuplicateScrollEvent) { //page scrolled to 90%
//If you want to track for page scroll for some other percentage of scroll, you
//can edit the number 90, or write additional conditional ga('send',...) calls
//inside this block and vary the label accordingly, specifying the percentage
//of scroll.
            isDuplicateScrollEvent = 1;
            ga('send','event','scroll',
            'Window: ' + $window.height() + 'px; Document: ' + $document.height() + 'px; Time: ' + Math.round((new Date - scrollTimeStart )/1000,1) + 's',
            {'nonInteraction':1}
        );
        }
    });
});

在这里，事件类别将为 scroll , Action 将是 thw 窗口、高度和文档以及时间。如果您想将滚 Action 为交互式事件进行跟踪(这意味着如果您希望用户在滚动时被跟踪为非弹跳用户)，您可以删除行 {'nonInteraction':1}
希望有帮助! :)