Rails 4 turbolinks 与谷歌分析答案

【问题标题】：Rails 4 turbolinks with Google AnalyticsRails 4 turbolinks 与谷歌分析
【发布时间】：2013-09-27 12:51:14
【问题描述】：

我想知道在 Rails 4 中实现 Google Analytics 跟踪代码和 turbo 链接的最佳方法是什么。普通的 sn-p 会起作用吗？我也看到过a gems，但我不确定它的作用。

【问题讨论】：

您能接受我的回答吗？看起来它帮助了一些人

标签： ruby-on-rails ruby google-analytics ruby-on-rails-4 turbolinks

【解决方案1】：

我喜欢 vladCovaliov 的解决方案，因为似乎大多数新帐户默认使用 Universal Analytics（我认为这也是更好的功能）。但是，我认为这个答案需要与注释掉初始浏览量、使用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 加载的每个页面的综合浏览量。请注意，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() {
即使使用 jquery-turbolinks，如果我将其更改为 $(document).ready，它也会增加向 Google Analytics（分析）报告的综合浏览量。第一次点击是 2 次，第二次是 4 次，第三次是 8 次，以此类推。轻踩。（P.S.我可能做错了什么！）
window.location.pathname 部分是我正在寻找的。非常感谢！
大家好，我很久以前实现了这段代码，想知道为什么我的站点搜索没有被跟踪。我最终将答案中的最后一个代码 sn-p 更改为：ga('send', 'pageview', window.location.pathname + window.location.search); window.location.search 在发送到 Google Analytics 的 URL 中包含搜索查询。
Rails 5 的注释替换页面：用 turbolinks:load 更改

【解决方案2】：

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

像往常一样将 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 重新加载。

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

生产检查是可选的，但如果您正在积极开发，这是避免 GA 跟踪 localhost 命中的好方法。另一个好处是您不必担心会弄乱 page:change 或 page:load 绑定，并且您可以确信它可以在 GA 可跟踪的任何浏览器上运行，而不必担心双击或任何奇怪的事情.

【讨论】：

【解决方案3】：

我认为更好的主意是使用新的 Universal Analytics（来自 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) 事件实时显示，但在事件选项卡中，它们仅在 24h + 后出现

3) 您帐户的属性必须是“通用的”才能使此解决方案起作用

通用分析文档：

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

【讨论】：

我认为没有必要在每个 Turbolinks 页面加载时加载 Analytics，所以我阅读了 page tracking with Universal analytics 并做了一些测试，得出的结论是，除了最后一行之外，你应该把所有内容都放在在中，使其仅加载一次，然后将 ga('send', 'pageview') 放入中。 GA_URL 参数可以替换为“auto”，因为“pageview”调用将始终正确确定 URL - 即使使用 Turbolinks。
@hannes_l 这对我不起作用。它只是在每次后续 Turbolinks 页面更改时发送原始 URL。但是，我在您链接到的文档中注意到，您可以执行 ga('send', 'pageview', '<%= request.path %>'); 来覆盖 URL - 确实对我有用。
是的，你是对的。我可能过度解释了我读到的关于如何计算当前路径的内容。因此，将您的最后一个 sn-p 放在中并将其他所有内容放在中似乎是一个好主意——至少这就是我现在要做的。

【解决方案4】：

快速浏览source 显示，这个 gem 所做的唯一事情就是向资产管道添加一些 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();

仅此而已。您可以使用 gem 或手动将类似 code-sn-p 的内容添加到您的 javascript-assets。

【讨论】：

【解决方案5】：

我很欣赏 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。

【讨论】：

【解决方案6】：

这个解决方案对我来说效果最好：http://reed.github.io/turbolinks-compatibility/google_analytics.html。

至少需要 Turbolinks v2.1.0 或更高版本。

【讨论】：

【解决方案7】：

我们刚刚采用了 Google 提供的标准 sn-p，将其翻译为 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

【讨论】：

【解决方案8】：

根据这个site，只需要稍作修改即可。 Turbolinks 的问题在于它只更新网站的一部分，因此，谷歌分析通常不会感知到页面发生了变化。因此，您必须通过将以下 CoffeeScript 添加到 assets/javascript 文件夹中的文件来手动通知它：

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

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

【讨论】：