如何延长谷歌分析跟踪AJAX等（根据H5BP文档） [英] How to extend google analytics to track AJAX etc (as per H5BP docs)
问题描述
我试图安装谷歌分析填充块在H5BP的 extend.md 文件中标识（<一href="https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md">https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md)
I am trying to install the google analytics augments identified in the extend.md file of H5BP (https://github.com/h5bp/html5-boilerplate/blob/v4.3.0/doc/extend.md)
据指出，优化谷歌分析JS代码段包括以下code：
It states that the "optimised" google analytics JS snippet includes the following code:
var _gaq = [['_setAccount', 'UA-XXXXX-X'], ['_trackPageview']];
和额外填充块如轨道jQuery的AJAX请求，跟踪JavaScript错误和跟踪页面滚动应在 _gaq 补充定义。
and that additional augments such as track jquery AJAX requests, track javascript errors and track page scroll should be added after _gaq is defined.
其实，片段包括H5BP的当前版本不提及 _gaq 作为一个变量：
In fact, the snippet included with the current version of H5BP does not make reference to _gaq as a variable:
(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扩展当一个未定义的错误。例如。
This creates an undefined error when trying to use any of the H5BP extensions. E.g.
if (typeof _gaq !== "undefined" && _gaq !== null) {
$(document).ajaxSend(function(event, xhr, settings){
_gaq.push(['_trackPageview', settings.url]);
});
}
作为_gaq没有定义
将无法工作。
Will not work as _gaq is not defined.
如何在这些填充块旨在实现？有人可以提供一个工作的例子，说明一个全面实施所有的扩展？
How are these augments intended to be implemented? Can someone provide a working example showing a full implementation of all the extensions?
感谢
推荐答案
在code，你正在尝试添加就不行，因为 _gaq 是使用数组推动跟踪信标在旧的谷歌分析（GA）版本。但HTML5的样板（H5BP）在其最新的版本中，你似乎可以用，已经更新了自己利用通用分析（UA），GA的下一个版本，谷歌已经发布了。这可以从协议相关的URL可以看到 // www.google-analytics.com/analytics.js ，也是文档最新的版本。不幸的是，它似乎你提到尚未更新的文档，截至H5BP为优化GA code中的源给出的链接，本身已进行了更新， $ C $下 UA ，这是什么H5BP源现在使用。
The code you are trying to add will not work, as _gaq was an array used to push the tracking beacons to in the older Google Analytics (GA) version. But the HTML5 BoilerPlate (H5BP), in its latest version you seem to be using, has updated itself to make use of Universal Analytics (UA), the next version of GA which Google has released. This can be seen from the protocol-relative URL //www.google-analytics.com/analytics.js and also the docs for the latest version. Unfortunately, it seems the doc you mentioned hasn't been updated, as the link given at the H5BP for the source of the optimised GA code, has itself been updated with code for UA and that is what the H5BP source is now using.
因此，延长了使用 _gaq 对象的额外来源$ C $ C都不行，因为你不使用的ga.js 有函数来处理推到来自乔治亚州的 _gaq 对象中的数据，但 analytics.js 的UA，它不初始化任何这样的对象，如 _gaq 或具备的功能来处理数据推送到 _gaq 。
Consequently, your additional source code extending the use of the _gaq object will not work, as you are not using ga.js which has functions to process the data pushed to the _gaq object from GA, but the analytics.js for UA, which does not initialise any such object as _gaq or have functions to process the data pushed to _gaq.
不过，升级本身使用 analytics.js （UA）之前，H5BP了GA版本的脚本，像这样（我得到这个，礼貌的朋友谁使用H5BP工作）：
But, before upgrading itself to use analytics.js (UA), H5BP had a GA version of the script, like this (I got this, courtesy of a friend who used to work with 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>
在理想情况下，C你提到这应该替换$ C $的行，即
Ideally, this should replace the lines of code you mentioned, namely
(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');
如果你这样做，那么你使用code
If you did that, then your use of the code
if (typeof _gaq !== "undefined" && _gaq !== null) {
$(document).ajaxSend(function(event, xhr, settings){
_gaq.push(['_trackPageview', settings.url]);
});
}
等，这些使用 _gaq 将工作。
还记得你目前正在使用的H5BP code是最好的，因为谷歌正在逐步淘汰GA此举使通用分析分析的未来。我刚才提到不再是旧的code工作（或将停止在不久的将来的工作，这取决于谷歌）。了解更多关于这在 UA升级中心。
Also remember that the H5BP code you are currently using is best, as Google is phasing out GA in a move to make Universal Analytics the future of analytics. The older code I have mentioned no longer works (or will stop working in the near future, depending on Google). Read more about this at UA Upgrade Center.
请记住，目前H5BP采用UA（analytics.js）code这是什么谷歌提供的，因为发现的这里。
Keep in mind that the current H5BP uses UA (analytics.js) code which is an optimised form of what Google provides, as found here.
，通过实施旧$ C解释了为什么你好像在 extend.md 提到不会对H5BP工作的脚本中工作，一个可能的解决方法$ C。你需要的是一个方法来跟踪AJAX等方面与你必须到位脚本。为此，每一个AJAX请求完成时，你可以简单地记录的虚拟综合浏览量。的你可以找到一个类似的情景<一href="http://stackoverflow.com/questions/21032351/analytics-on-a-bootstrap-modal-with-pageview-and-time-related-metrics/">here.有提问者适用跟踪到一个模式的开放。您可以使用相同的技术来跟踪AJAX调用和页面或部分页面retreives。在 VURL 的，因为我的答案所指定就可以了，你的情况， /虚拟/ AJAX / URL的页面，检索，通过阿贾克斯的。
That explains why the scripts mentioned in extend.md won't work on the H5BP you seem to be working on, an a possible workaround by implementing the old code. What you need is a way to track AJAX etc. with the script you do have in place. For that, each time an AJAX request completes, you can simply record a virtual pageview. You can find a similar scenario here. There the asker applies the tracking to the opening of a modal. You can apply the same technique to track AJAX calls and retreives of a page or partial page. The VURL as I've specified in the answer can be, in your case, /virtual/ajax/url-of-page-retrieved-via-ajax.
如果您不希望发送虚拟网页浏览，还可以将自定义的事件，每个AJAX请求。了解更多有关事件此处在UA 跟踪。
If you do not wish to send virtual pageviews, you can also send customised events for each AJAX request. Read more about event tracking in UA here.
如果你想知道你指定的立场函数的参数，你可以阅读的此处。这是在 extend.md 文件你提到拍摄的脚本。修改脚本与UA使用的尝试很可能是这样的：
If you want to know what the arguments of the function you specified stand for, you can read here. This is where the script in the extend.md file you mentioned was taken. An attempt to modify the script for use with UA would probably look like this:
(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 一般代表XMLHtt prequest。我认为它假定人知道什么是jQuery的AJAX调用是，我不是非常了解这一点。
The ajaxSend() method is a callback which is fired every time a jQuery AJAX call is completed. Remember the word jQuery here. This only works for jQuery AJAX requests. xhr generally stands for XMLHttpRequest. I think it assumes one knows what a jQuery AJAX call is, I'm not very knowledgeable about that.
要使用UA跟踪Javascript错误，一个类似的脚本是：
To track Javascript errors using UA, a similar script would be:
(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));
此收集同样：事件类别将主机+误差，行动将是错误信息，标签将指向发生错误（线路班次，文件名，等）。
This collects likewise: Event Category will be host+error, Action will be the error message, and label will point to where the error occurred (line no, filename, etc.).
跟踪页面滚动也很类似：
Tracking page scroll is also very similar:
$(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}
);
}
});
});
下面，事件类别将滚动，行动将THW窗口，高度和文档，以及时间。如果你想跟踪滚动作为一个互动活动（这意味着如果你想，如果他滚动一个用户被跟踪作为非反弹的用户），您可以删除行 {'nonInteraction'：1}
Here, Event Category will be scroll, Action will be thw Window, height and document, and time. If you want to track scroll as an interactive event (which means if you want a user to be tracked as a non-bounce user if he scrolls) you can remove the line {'nonInteraction':1}
希望帮助！ ：）
这篇关于如何延长谷歌分析跟踪AJAX等（根据H5BP文档）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
