如何让Google Analytics跟踪AJAX调用的网页?

时间:2014-06-13 06:30:52

标签: jquery ajax google-analytics

我使用AJAX在我的网站上调用了一个页面,但出于某种原因,Google Analytics并未注册页面访问。我是否必须做些什么来强制它注册AJAX触发的页面?

我使用最新的Universal anaytics代码如下:

<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);
                }
        });

});
//]]>

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

总而言之,我有一个使用AJAX调用http://www.mywebsite.ext的页面,而目标页面(http://www.mywebsite.ext)包含一些似乎无法跟踪该页面的通用分析代码。如果您通常从浏览器访问该页面,则可以很好地跟踪该页面。

我从线程中发现我可以用虚拟文件夹调用“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秒钟。

5 个答案:

答案 0 :(得分:20)

用于加载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 Code ,虚拟页面加载的语法则不同。

这是在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”的虚拟网页浏览。

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

答案 1 :(得分:1)

HTML

<a class="ajax-load" href="home.html" >Home</a>

的Javascript

jQuery(document).ready(function($) {
    $(".ajax-load").click(function(event) {
        event.preventDefault();
        var href = $(this).attr("href");
        $.ajax({
            url: href,
            type: 'post',
            dataType: 'html',

        })
        .done(function(response) {
            $(".somediv").html(response);
            // now send page view
            ga('send','pageview','/virtual/....');
        })
        .fail(function() {
            // show error dialog
        })
    });
});

答案 2 :(得分:1)

此答案仅适用于新的GA代码段

推荐的答案对我不起作用,这是对我有用的this answer的略微修改版本

if ("ga" in window) {
    tracker = ga.getAll()[0];
    if (tracker) {
        tracker.set("page", '/some-page');
        tracker.send("pageview");
    }
}

答案 3 :(得分:0)

您可能遇到问题,因为那些接收Ajax的人不会期待或处理Javascript。

Google将此协议作为解决方案:

POST /收集HTTP / 1.1 主持人:www.google-analytics.com

payload_data

详细信息如下:

https://developers.google.com/analytics/devguides/collection/protocol/v1/devguide#proxy-server-tracking

您需要使用脚本语言来使用POST或GET方法。如果您想出答案和工作解决方案,请告诉我!我正竭尽所能让它发挥作用。

答案 4 :(得分:0)

只需在您的AJAX请求结束时这样做:

gtag('config', 'GA_MEASUREMENT_ID', {'page_path': '/new-page.html'});

来源: https://developers.google.com/analytics/devguides/collection/gtagjs/single-page-applications