web-dev-qa-db-ja.com

Rails GoogleAnalyticsを使用した4つのターボリンク

Rails 4.通常のスニペットは機能しますか？私も見ました このための宝石 ですが、それが何をするのかわかりません。

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

新しいUniversalAnalytics（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>

このコードを頭ではなく本体にレンダリングするように注意してください。ターボリンクはボディを置き換えるだけです。

また、注意してください：

1）GA_URLはページのURLと一致する必要があります

2）イベントはリアルタイムで表示されますが、[イベント]タブでは、24時間以上後にのみ表示されます。

3）このソリューションが機能するには、アカウントのプロパティが「ユニバーサル」である必要があります

ユニバーサルアナリティクスのドキュメント：

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

13
vladCovaliov

私はvladCovaliovのソリューションが好きです。なぜなら、ほとんどの新しいアカウントはデフォルトでユニバーサルアナリティクスを使用しているように見えるからです（これも私の意見ではよりよく機能しています）。ただし、この回答は、最初のページビューをコメントアウトし、page:changeイベントを使用し、eventsではなくページビューを追跡する他の提案と組み合わせる必要があると思います。

たとえば、<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を取得できます。 （これにより、たとえば、RESTfulURLから:idパスセグメントを削除したい場合に、報告されたURLを編集するのに最適な場所が得られます。）

その後、簡単に電話をかけることもできます。

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

サイト内の他の興味深いjavascriptイベントのイベントを報告します。

28
scottwb

私はいくつかのウェブサイトで見た別のアプローチを採用しましたが、それは合理的なようです。

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アクティブに開発している場合にローカルホストのヒットを追跡しないための良い方法です。もう1つの特典は、ページをいじることを心配する必要がないことです。バインディングを変更またはpage：loadすることで、ダブルヒットや奇妙なことを心配することなく、GA）で追跡可能なすべてのブラウザで動作することを確信できます。

14
AntelopeSalad

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を使用するか、このコードスニペットのようなものを手動でjavascript-assetsに追加することができます。

6
klaffenboeck

Scottwbの回答に感謝しますが、残念ながらRails 5. In 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アナリティクスIDに置き換えることを忘れないでください。

3
Sebastian Knopp

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
1
tddrmllr

このソリューションは私にとって最適に機能しました： http://reed.github.io/turbolinks-compatibility/google_analytics.html 。

少なくともTurbolinksv2.1.0以降が必要です。

1
nates

これによると site 、わずかな変更を加えるだけで済みます。 Turbolinksの問題は、Webサイトの一部のみを更新するため、GoogleAnalyticsはページが変更されたことを認識しないことが多いことです。したがって、assets/javascriptフォルダー内のファイルに次のCoffeeScriptを追加して、手動で通知する必要があります。

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

注：これは私のコードではありません。以前にリンクされたWebサイトから直接取得されています。

0
amb110395