如何扩展谷歌分析以跟踪AJAX等（根据H5BP文档）

Question

我正在尝试google analytics augments在extend.mdH5BP文件中安装已识别的文件（https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md）

它指出“经过优化”的Google Analytics（分析）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）。这可以从相对协议的URL //www.google- analytics.com/analytics.js以及最新版本的文档中看到。不幸的是，您提到的文档似乎尚未更新，因为在H5BP上提供的用于优化GA代码源的链接本身已在UA代码下进行了更新，而H5BP源现在正在使用该链接。

因此，您扩展_gaq对象使用范围的其他源代码将无法正常工作，因为您没有使用ga.js具有处理_gaq从GA
推送到对象的数据的函数，但是未analytics.js使用UA 的for
UA（不会将任何此类对象初始化为_gaq或具有用于处理推送到的数据的函数_gaq。

但是，在升级自身以使用analytics.js（UA）之前，H5BP拥有GA版本的脚本，如下所示（我得到了这个，这是由一个曾经与H5BP一起工作过的朋友提供的）：

<!-- 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成为分析的未来。我提到的旧代码不再有效（或不久将停止工作，具体取决于Google）。在UA升级中心了解有关此内容的更多信息。

请记住，当前的H5BP使用UA（analytics.js）代码，这是Google提供的优化形式，如此处所示。

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

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

如果您想知道指定函数代表的参数，可以在这里阅读。这就是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，操作将是错误消息，并且标签将指向发生错误的位置（行号，文件名等）。

跟踪页面的滚动也非常相似：

$(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，动作将是窗口，高度和文档以及时间。如果您想将滚动作为互动事件进行跟踪（这意味着如果希望用户在滚动时作为非退回用户进行跟踪），则可以删除该行{'nonInteraction':1}

希望有帮助！:)