logo标签列表

Rails 4与Google Analytics的Turbolinks集成

ruby-on-railsrubygoogle-analyticsruby-on-rails-4turbolinks
25

我想知道在Rails 4中实现Turbo链接的同时如何最好地实现Google Analytics跟踪代码。一般的片段代码会起作用吗？我还看到了一个宝石包，但我不确定它是做什么的。

你能否接受我的答案？看起来它帮助了一些人。 - vladCovaliov
8个回答
28

我喜欢vladCovaliov的解决方案，因为大多数新帐户默认使用通用分析（在我看来也更好）。然而，我认为这个答案需要与其他建议结合起来，注释掉初始页面视图，使用page:change事件，跟踪页面视图，而不是事件。

例如，在你的<head>中：

<% if Rails.env.production? %>
  <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-X', 'auto');
    //ga('send', 'pageview');
  </script>
<% else %>
  <script>
    function ga () {
      var params = Array.prototype.slice.call(arguments, ga.length);
      console.log("GoogleAnalytics: " + params);
    };
  </script>
<% end %>

然后在通过资源管道加载的js文件中：

$(document).on('page:change', function() {
  ga('send', 'pageview', window.location.pathname);
});

这将为每个使用Turbolinks或不使用Turbolinks的加载的页面记录一个页面浏览量。请注意，window.location.pathname是必需的，否则您可能会在所有后续页面加载中获取第一个加载的页面的URL。（如果您想要剥离RESTful URL中的:id路径段，则这也为您提供了一个不错的位置来编辑报告的URL。）

您还可以轻松调用：

ga('send', "event", category, action, label, count);

报告您网站中其他有趣的JavaScript事件。

我必须说，我看了很多类似的问题，最终选择了这个答案，因为它非常简单。它也完美地工作！非常感谢！我正在使用 jquery-turbolinks gem，所以我用下面的代码替换了$(document).on('page:change', function() { 改为 $(document).ready(function() { - Alexander
即使使用了 jquery-turbolinks，如果我将其改为 $(document).ready，它会导致向 Google Analytics 报告的页面浏览量增加。第一次点击是 2 次浏览，第二次是 4 次，第三次是 8 次，以此类推。请小心操作。（附注：也许是我做错了什么！） - Chris Peters
window.location.pathname 部分正是我在寻找的。非常感谢！ - animatedgif
1
大家好，我很久以前实现了这段代码，但是一直想知道为什么我的网站搜索没有被跟踪。最终我将答案中的最后一段代码更改为：ga('send', 'pageview', window.location.pathname + window.location.search);其中 window.location.search 包括在发送到 Google Analytics 的 URL 中的搜索查询。 - Alexander
Rails 5 注意事项 将 page:change 替换为 turbolinks:load - athap
14

我采用了一个在某个网站上看到的不同方法，但它似乎是合理的。

像往常一样将GA添加到标题中，但要进行轻微修改，即注释掉自动发生的trackPageview事件。

<script type="text/javascript">
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-FOOBAR']);
  //_gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
</script>

因为 body 在 turbolinks 重新加载时也会重新加载，所以请将此代码添加到您的 body 中的某个位置。

<% if Rails.env.production? %>
  <script>_gaq.push(['_trackPageview']);</script>
<% end %>

生产检查是可选的，但这是一个不错的方法，如果你正在积极开发，就不必让GA跟踪localhost命中。另一个好处是你不必担心破坏page:change或page:load绑定，并且你可以确信它将在任何可被GA跟踪的浏览器上工作，而不必担心双重命中或任何奇怪的东西。

13

我认为更好的做法是使用新的通用分析（来自analytics.js文件）。

通用分析方案

  (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', "#{GA_UA}", "#{GA_URL}");
  ga('send', 'pageview');

当您想要发送事件时，您可以使用以下方法：

<script> ga('send', "event", "#{category}", "#{action}", "#{label}", "#{count}"); </script>

请注意，将此代码呈现在正文中，而不是头部。Turbo-links 仅替换正文。

还要注意：

1）GA_URL 需要与您页面的URL匹配

2）事件实时显示，但在事件选项卡中，它们仅在24小时后出现

3）为使此解决方案起作用，您帐户的属性需要为“通用”

通用分析文档：

https://support.google.com/analytics/answer/2790010?hl=en&ref_topic=2790009

3
我认为在每次Turbolinks页面加载时都加载分析工具是不必要的，因此我研究了使用通用分析进行页面跟踪，并进行了一些测试，得出结论应该将除最后一行以外的所有内容放在<head>标签中，这样它只会加载一次，然后将ga('send', 'pageview')放在<body>标签中。GA_URL参数可以替换为“auto”，因为即使使用Turbolinks，“pageview”调用也始终能正确确定URL。 - hannes_l
4
@hannes_l 这对我没用。每次 Turbolinks 页面变化时，它只是发送原始 URL。然而，我在您提供的文档中注意到，您可以使用 ga('send', 'pageview', '<%= request.path %>'); 来重写 URL——这确实对我有用。 - Tim Jones
是的，你说得对。我可能过度解释了有关当前路径如何计算的内容。因此，将您的最后一段放在<body>中，将其他所有内容放在<head>中似乎是个好主意——至少现在我是这么做的。 - hannes_l
6
快速查看源代码可以发现，这个宝石只是向资产管道添加了一些javascript代码。
# google-analytics-turbolinks/lib/assets/javascripts/google-analytics-turbolinks.js.coffee
if window.history?.pushState and window.history.replaceState
  document.addEventListener 'page:change', (event) =>

    # Google Analytics
    if window.ga != undefined
      ga('set', 'location', location.href.split('#')[0])
      ga('send', 'pageview')
    else if window._gaq != undefined
      _gaq.push(['_trackPageview'])
    else if window.pageTracker != undefined
      pageTracker._trackPageview();

那就这样了。你可以使用宝石或手动添加此代码片段到您的javascript-assets中。
3
我很感激scottwb的回答，但是很遗憾它不能在Rails 5中使用。在Rails 5中，Turbolinks事件被重命名了。'page:change'事件被重命名为'turbolinks：load'。这就是为什么他的示例不再起作用的原因。
您可以在此处找到有关它们如何重命名的概述：https://github.com/turbolinks/turbolinks/blob/master/src/turbolinks/compatibility.coffee 由于这让我花费了一些时间来弄清楚，所以我将发布适用于所有后来者的适当的Rails 5实现。
在您的<head>中放置以下代码即可。
  <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-X', 'auto');
    //ga('send', 'pageview'); //moved to an asset file because of turbolinks
  </script>

然后在你的资产管道中的js文件（例如application.js）中：

$(document).on('turbolinks:load', function() {
   ga('send', 'pageview', window.location.pathname + window.location.search);
});

请记得将“UA-XXXXXXXX-X”替换为您的Google Analytics ID。

1
1
我们只是采用了Google提供的标准片段，将其翻译成CoffeeScript，然后修改了最后一个动作，使其绑定到“ready”和“page:load”事件。我们还添加了条件语句，仅在当前访问者不在管理员时发送数据（以使我们的数据尽可能干净）。
((i, s, o, g, r, a, m) ->
  i["GoogleAnalyticsObject"] = r
  i[r] = i[r] or ->
    (i[r].q = i[r].q or []).push arguments
    return

  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
  return
) window, document, "script", "//www.google-analytics.com/analytics.js", "ga"
ga "create", 'UA-XXXXXXXX-XX', "yourdomain.com"

$(document).on 'ready page:load', ->
  ga "send", "pageview", window.location.pathname unless $('body').data('admin') is true
0
根据这个网站，你只需要进行轻微的修改。Turbolinks的问题在于它只更新网站的部分内容，因此Google Analytics经常无法感知页面已经发生了变化。因此，你必须手动添加以下CoffeeScript到你的assets/javascript文件夹中的一个文件中来通知它：

$(document).on 'page:change', ->
  if window._gaq?
    _gaq.push ['_trackPageview']
  else if window.pageTracker?
    pageTracker._trackPageview()

注意：这不是我的代码，它直接取自先前链接的网站。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接