jquery - 如何让 Google Analytics 跟踪 AJAX 调用的页面？

Question

我正在使用 AJAX 调用我网站上的页面，但由于某种原因，Google Analytics 未记录页面访问。我需要做些什么来强制它注册 AJAX 触发页面吗？

我正在使用最新的通用分析代码，如下所示:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXXX-1', 'mywebsite.ext');
  ga('send', 'pageview');

</script>

我正在使用 JQuery AJAX 调用包含上述代码片段的页面，如下所示:

<script>
//<![CDATA[             
$(document).ready(function(){

        $.ajax({
                url : "http://www.mywebsite.ext",
                type: "GET",
                async: false,
                data : { fromajax : "y" },
                success: function(data, textStatus, jqXHR)
                {
                        // alert("success - Data: " + data + "\ntextStatus: " + textStatus);
                },
                error: function (jqXHR, textStatus, errorThrown)
                {
                        alert("error \ntextStatus: " + textStatus + "\nerrorThrown: " + errorThrown + "\njqXHR: " + jqXHR);
                }
        });

});
//]]>

我确信该页面正在被调用，因为我有一些日志语句写入数据库。我还知道 Analytics 代码正在运行，因为我正在使用实时概览对其进行测试。

总而言之，我有一个页面调用 http://www.mywebsite.ext使用 AJAX 且目标页面 ( http://www.mywebsite.ext ) 包含一些似乎不会跟踪页面的 Universal Analytics 代码。如果您从浏览器正常访问该页面，则该页面可以正常跟踪。

我从线程中发现我可以使用虚拟文件夹调用“ga”函数。因此，我取消了 AJAX 调用，而是修改了 Universal Analytics，如下所示:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXXX-1', 'mywebsite.ext');
ga('send', 'pageview', '/localfolder/page');
ga('send', 'pageview');

</script>

我现在遇到的问题是它调用 ga('send', 'pageview', '/localfolder/page');但不是 ga('send', 'pageview');

但我知道事件之间有一个最小间隔: Google Analytics Event Tracking - Minimal Interval between the events

因此我添加了一个 setTimeout(function(){},2000);事件之间和最后一个事件仍未被调用。我什至达到了 9 秒。

Answer 1

加载 Google Analytics(分析)的旧标准是异步方法:

var _gaq=[["_setAccount","UA-#######-#"],["_trackPageview"]];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;
g.src=("https:"==location.protocol?"//ssl":"//www")+".google-analytics.com/ga.js";
s.parentNode.insertBefore(g,s)}(document,"script"));

该位跟踪初始页面加载，但不跟踪后续 AJAX 调用。每当您想要跟踪页面加载时，请添加以下代码片段:

// "_trackEvent" is the pageview event, 
_gaq.push(['_trackPageview', '/some-page']);

再次使用

_trackPageview，但这次我们提供已加载的 AJAX 地址的 URL。使用上面的小 JavaScript 片段可以让您跟踪页面浏览量，就像重新加载整个页面一样。我建议将此代码段与 MooTools 的历史记录插件一起使用。

结合 Ajax，您的代码应该类似于:

jQuery(document).ajaxComplete(function(e, xhr, settings){
  var d = document.location.pathname + document.location.search + document.location.hash;
  _gaq.push(['_trackPageview', d]);
});

<小时/>

如果您想使用Universal Analytics 代码，虚拟页面加载的语法会有所不同。

这是在 UA 中跟踪虚拟综合浏览量的语法:

ga(‘send’, ‘pageview’, ‘path to your virtual page’);

示例:

<a href=”http://www.example.com/gu/dw/seo-beginners-guide.pdf” onClick=”ga(‘send’, ‘pageview’, ‘/virtual/guides/download/seo-beginners-guide.pdf’);”> Download SEO Beginners Guide</a> 

因此，当用户点击“下载 SEO 初学者指南”链接时，UA 将生成一个名为“/virtual/guides/download/seo-beginners-guide.pdf”的虚拟页面 View 。

来源:
http://davidwalsh.name/ajax-analytics
https://stackoverflow.com/a/7762559/3582159
http://www.optimizesmart.com/event-tracking-guide-google-analytics-simplified-version/