更新日: 2016年11月24日
Rails

Google AnalyticsのRails Turbolinks対応

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

【開発記録】英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

EasyRamble は、ウェブサービス・スマホアプリの開発、子育て、健康管理、英語学習などについて綴るブログです。
Ruby, Rails, Swift & iOS, Vim, WordPress, 開発記録, 健康管理, 子育てなどのカテゴリがよく読まれています。

Rails 5（Turbolinks 5）の環境で、グーグルのアクセス解析サービス Google Analytics を使うための対応策です。Google Analytics の解析用トラッキングコードは JavaScript のコードで提供されるのですが、Rails で Turbolinks を有効にした場合、$(document).ready() や $(window).load() が発動せず、JavaScript が動作しないという問題に遭遇することがあります。

そのための対策として、Turbolinks 5より前のバージョンでは、Turbolinks が提供する page:load 等のイベントを利用していました。Turbolinks 5 では、これに代わり turbolinks:load 等のイベントを利用します。

— 環境 —
rails 5.0.0.1
turbolinks 5.0.1

Google アナリティクス解析コードを取得

まずは、Google アナリティクス管理画面で解析用コードを入手する。以下のような JavaScript コードを取得できるかと思います。

<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','https://www.google-analytics.com/analytics.js','ga');

  ga('create', '*****', 'auto');
  ga('send', 'pageview');
</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','https://www.google-analytics.com/analytics.js','ga');

ga('create', '*****', 'auto');

ga('send', 'pageview');

</script>

Turbolinks によりページ遷移した時に、ページビューが Google Analytics に送信されるように、この解析コードを少し編集します。

Google アナリティクス解析コードを編集して設置

以下のように ga(‘send’, ‘pageview’); の行を削除したコードを、ヘッダーに追記します。

app/views/layouts/application.html.erb

<head>
  <%# ... %>

  <%# Google Analytics Code %>
  <% 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','https://www.google-analytics.com/analytics.js','ga');

      ga('create', '*****', 'auto');
    </script>
  <% end %>
</head>

<head>

<%# ... %>

<%# Google Analytics Code %>

<% if Rails.env.production? %>

(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','https://www.google-analytics.com/analytics.js','ga');

ga('create', '*****', 'auto');

</script>

<% end %>

</head>

production 環境のみ有効にさせる。

Turbolinks 遷移でページビューを送信する JavaScript（CoffeeScript）作成

Turbolinks のページ遷移によりページがロードされたタイミングで、ページビュー（pageview）を送る（send）ように JavaScript で制御するコードを作成します。Turbolinks 5 では、turbolinks:load というイベント名を指定します。

app/assets/javascript/google_analytics.js.coffee

$(document).on 'turbolinks:load', ->
  if window.ga != undefined
    ga('set', 'location', location.href.split('#')[0])
    ga('send', 'pageview')

$(document).on 'turbolinks:load', ->

if window.ga != undefined

ga('set', 'location', location.href.split('#')[0])

ga('send', 'pageview')

turbolinks:load は、Turbolinks 遷移によるページ表示のタイミングで発生するイベントですので、Google Analytics 解析用であればこれを利用すると良いかと思います。

turbolinks:before-render（DOM 描画の直前）を使うコードもいくつか見つけました。こっちを使うと Turbolinks によるページ遷移の DOM 描画直前のタイミングでページビューが送信されるかと思う。

Turbolinks 5（Rails 5）での、turbolinks イベントの詳細は以下が詳しいです。

Turbolinks 5とTurbolinks Classic（2.x）の比較 – Qiita

Google Analytics の動作確認

最後にページビューが Google Analytics に無事に送信されていることを確認する。ブラウザで確認したいページにアクセスし、デベロッパーツールの Network タブを開いて、’collect’ という単語でフィルターをかけます。

screen-shot-2016-11-24-at-14-52-10

画像は Firefox の開発者ツール。Google Chrome でも同様に確認できます。google-analytics.com 宛てに GET リクエストを送信しているのが分かります。また、アナリティクス管理画面のリアルタイム・サマリーでアクセス中のページを確認できればOKです。

最初、私はブラウザに Google Analytics 解析を遮断する拡張を入れていたのを忘れていて、動作確認でアナリティクスが動かない…と少々はまってしまいました。その類の拡張機能を入れている場合は、いったん無効にして動作確認を行います。

以上で Turbolinks 5 での Google Analytics 対応は終了です。

パーフェクト Ruby on Rails は、最近読んだ Rails 本の中では一番役に立った本です。Chef や Capistrano など Rails と共によく使用される技術にも触れてあります。Ruby on Rails 4 アプリケーションプログラミングは、入門的な内容で Rails の機能全体を網羅されています。

パーフェクト Ruby on Rails

Ruby on Rails 4 アプリケーションプログラミング