【问题标题】:How do I get Google Analytics to track pages called by AJAX?如何让 Google Analytics 跟踪由 AJAX 调用的页面?
【发布时间】:2014-06-13 06:30:51
【问题描述】:

我正在使用 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>

我正在对包含上述 sn-p 的页面使用 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 代码正在运行,因为我正在使用实时概览对其进行测试。

总而言之,我有一个使用 AJAX 调用 http://www.mywebsite.ext 的页面,并且目标页面 (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 秒。

【问题讨论】:

  • 据我记得,您需要在 GA 中创建一个自定义事件,然后在您的 ajax 调用中将该事件推送到 GA 的消息队列中。

标签: jquery ajax google-analytics


【解决方案1】:

此答案仅适用于新的 GA sn-ps

赞成的答案对我不起作用,这里是 this answer 的略微修改版本,适用于我

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

【讨论】:

    【解决方案2】:

    加载 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 调用。每当您想跟踪页面加载时,请添加以下 sn-p:

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

    _trackPageview 再次使用,但这次我们提供了已加载的 AJAX 地址的 URL。使用上面的小 JavaScript sn-p 可以让您跟踪页面浏览量,就像重新加载整个页面一样。我建议将此 sn-p 与 MooTools 的 History 插件一起使用。

    结合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”的虚拟网页浏览。

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

    【讨论】:

    • 感谢 GlabbichRulz。我正在尝试遵循您的解决方案,由于我使用的是通用分析代码,因此我在这里查看了您的语法:ga('send', 'event', ''event category', 'event action', 'event label', event value , {'nonInteraction': 1});我应该在 Universal Analytics sn-p 之后添加这个: ga('send', 'pageview');如果是这样,我要为事件类别和操作添加什么,因为我只想跟踪整个页面。
    • 您必须将其添加到$(document).ready() 函数中,直接在$.ajax({}); 函数之后或之前。如果您只想跟踪成功的页面加载,也可以在成功函数中调用它。
    • 好的,感谢您澄清这一点。但是查看语法,它如何知道在 AJAX 调用中跟踪 URL?参数没有说明这一点。我也不需要声明一些东西来识别“ga”吗?
    • 对不起,我认为我的回答并没有真正回答你的问题。我现在更新了它,我认为现在应该更清楚了:)
    • 好的,谢谢,所以根据您的说法,我需要调用 ga('send', 'pageview', 'path to your virtual page');。如果这个函数跟踪页面视图,那么我是否正确地假设我实际上不需要进行 AJAX 调用?另外我确定如果我调用这个函数,“ga”将不会被识别。我如何确保它被认可,我需要再次声明吗?
    【解决方案3】:

    只需在您的 AJAX 请求结束时执行此操作:

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

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

    【讨论】:

      【解决方案4】:

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

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

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

      有效载荷数据

      详情在这里:

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

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

      【讨论】:

      • 感谢您,但解决方案已继续,我不再使用 AJAX。现在的问题是我似乎无法将多个跟踪事件发送到分析。
      【解决方案5】:

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

      【讨论】:

        猜你喜欢
        • 2010-10-13
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多