25

我想知道在 Rails 4 中实现 Google Analytics 跟踪代码以及 turbo 链接的最佳方法是什么。正常的代码段可以工作吗？我也看到了这方面的宝石，但我不确定它的作用。

4

8 回答 8

28

我喜欢 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。（如果您想:id从 RESTful URL 中删除路径段，这也为您提供了一个编辑报告的 URL 的好地方。）

然后，您也可以轻松调用：

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

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

于 2014-07-31T03:28:29.580 回答
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因为身体会为涡轮链接重新加载。

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

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

于 2013-10-05T15:38:44.827 回答
13

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

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

通用分析文档：

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

于 2013-10-22T20:03:54.197 回答
6

快速浏览源代码显示，这个 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 或手动将类似此代码片段的内容添加到您的 javascript 资产中。

于 2013-09-22T16:29:39.030 回答
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>

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

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

请记住将“UA-XXXXXXXX-X”替换为您的 Google Analytics（分析）ID。

于 2016-09-14T08:09:01.963 回答
1

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

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

于 2014-02-04T17:25:56.067 回答
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
于 2014-09-29T21:03:33.023 回答
0

根据这个站点，您只需要稍作修改。Turbolinks 的问题在于它只更新网站的部分内容，因此，Google Analytics（分析）通常不会感知到页面已更改。因此，您必须通过将以下 CoffeeScript 添加到 assets/javascript 文件夹中的文件来手动通知它：

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

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

于 2013-09-22T16:25:49.807 回答