如何扩展谷歌分析来跟踪 AJAX 等(根据 H5BP 文档)
-
21-12-2019 - |
题
我正在尝试安装 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 未定义。
这些增强措施打算如何实施?有人可以提供一个工作示例来显示所有扩展的完整实现吗?
谢谢
解决方案
您尝试添加的代码将不起作用,因为 _gaq
是一个用于在旧版 Google Analytics (GA) 版本中推送跟踪信标的数组。但是,您似乎正在使用的最新版本的 HTML5 BoilerPlate (H5BP) 已经进行了自我更新,以利用 Universal Analytics (UA),这是 Google 发布的 GA 的下一个版本。这可以从协议相关的URL看出 //www.google-analytics.com/analytics.js
以及最新版本的文档。不幸的是,似乎 你提到的医生 尚未更新,因为 H5BP 上给出的链接 来源 优化的 GA 代码本身已更新为 UA 这就是 H5BP 源现在使用的。
因此,您的附加源代码扩展了 _gaq
对象将无法工作,因为您没有使用 ga.js
它具有处理推送到的数据的功能 _gaq
来自 GA 的对象,但是 analytics.js
对于 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 成为分析的未来。我提到的旧代码不再有效(或者将在不久的将来停止工作,具体取决于谷歌)。阅读更多相关信息,请访问 UA升级中心.
请记住,当前的 H5BP 使用 UA (analytics.js) 代码,这是 Google 提供的优化形式,如发现 这里.
这解释了为什么中提到的脚本 extend.md
不适用于您似乎正在开发的 H5BP,这是通过实现旧代码的一种可能的解决方法。您需要的是一种跟踪 AJAX 等的方法。使用您已有的脚本。为此,每次 AJAX 请求完成时,您只需记录一个 虚拟页面浏览量。 你可以找到类似的场景 这里. 。询问者将跟踪应用于模式的打开。您可以应用相同的技术来跟踪 AJAX 调用以及页面或部分页面的检索。这 虚拟地址 正如我在答案中所指出的,就您而言, /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
, 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
, ,操作将是窗口、高度和文档以及时间。如果您想将滚动作为交互式事件进行跟踪(这意味着如果您希望用户在滚动时作为非弹跳用户进行跟踪),您可以删除该行 {'nonInteraction':1}
希望有帮助!:)
其他提示
我的网站上有几个 ajax 调用。我使用 Google Analytics Universal
$.ajax({
...
success: function (data) {
ga('send','pageview','/virtual/....');
},
...
});
使用 /virtual/
如果我想在有或没有 ajax 调用的情况下分隔日期,可以使过滤更容易