Rails 4 turbolinks with Google Analytics

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

我喜欢

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

这将记录您加载的有或没有涡轮链接的每个页面的页面浏览量。请注意，window.location.pathname是必需的，否则您可以获取为所有后续页面加载加载的第一个页面的 URL。（这也为您提供了一个编辑报告的URL的好地方，例如，如果您想从RESTful URL中删除:id路径段。

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

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

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

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

像往常一样将 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 跟踪本地主机命中的好方法。另一个好处是你不必担心弄乱page：change或page：load绑定，你可以确信它可以在任何可以被GA跟踪的浏览器上运行，而不必担心双重点击或任何奇怪的事情。

我认为更好的主意是使用新的通用分析（来自分析.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>

请注意在正文中呈现此代码，而不是在头部呈现。涡轮连杆仅取代车身。

还要小心：

1） GA_URL需要与您网页的网址匹配

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

3）您帐号的媒体资源必须是"通用"的，此解决方案才能正常工作

通用分析文档：

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

快速浏览源代码显示，这个 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-assets 中。

我很

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

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

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

我们只是采用了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

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

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

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

相关内容

最新更新

热门标签：