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

Question

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

它指出，"优化"的谷歌分析JS片段包括以下代码：

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

并且应当在定义_gaq之后添加诸如track jquery AJAX requests、track javascript errors和track page scroll之类的附加增强。

事实上，当前版本的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

您试图添加的代码将不起作用，因为在旧的Google Analytics(GA)版本中，_gaq是一个用于将跟踪信标推送到的数组。但HTML5 BoilerPlate(H5BP)在其最新版本中，你似乎正在使用它，它已经更新了自己，以使用通用分析(UA)，这是谷歌发布的下一个GA版本。这可以从与协议相关的URL//www.google-analytics.com/analytics.js以及最新版本的文档中看出。不幸的是，你提到的文档似乎没有更新，因为H5BP中给出的优化GA代码源的链接本身已经更新为UA代码，这就是H5BP源现在使用的代码。

因此，扩展使用_gaq对象的附加源代码将不起作用，因为您使用的不是具有处理从GA推送到_gaq对象的数据的功能的ga.js，而是用于UA的analytics.js，它不将任何此类对象初始化为_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]);
});
}

等等使用CCD_ 17将起作用。

还要记住，你目前使用的H5BP代码是最好的，因为谷歌正在逐步淘汰GA，以使通用分析成为分析的未来。我提到的旧代码不再工作(或者在不久的将来将停止工作，具体取决于谷歌)。在UA升级中心了解更多信息。

请记住，当前的H5BP使用UA(analytics.js)代码，这是谷歌提供的优化形式，如这里所示。

这就解释了为什么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()方法是一个回调，每次jQueryAJAX调用完成时都会触发它。记住这里的单词jQuery。这只适用于jQueryAJAX请求。xhr通常代表XMLHttpRequest。我认为它假设一个人知道什么是jQueryAJAX调用，我对此不是很了解。

要使用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}行

希望能有所帮助！：)

Answer 2

我的站点上有几个ajax调用。使用Google Analytics Universal我使用

$.ajax({
...
success: function (data) {
ga('send','pageview','/virtual/....');
},
...
});

如果我想在有或没有ajax调用的情况下分开日期，使用/virtual/可以更容易地进行筛选