- 更新日: 2016年11月24日
- Rails
Google AnalyticsのRails Turbolinks対応
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 コードを取得できるかと思います。
1 2 3 4 5 6 7 8 9 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
production 環境のみ有効にさせる。
Turbolinks 遷移でページビューを送信する JavaScript(CoffeeScript)作成
Turbolinks のページ遷移によりページがロードされたタイミングで、ページビュー(pageview)を送る(send)ように JavaScript で制御するコードを作成します。Turbolinks 5 では、turbolinks:load というイベント名を指定します。
app/assets/javascript/google_analytics.js.coffee
1 2 3 4 |
$(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’ という単語でフィルターをかけます。
画像は Firefox の開発者ツール。Google Chrome でも同様に確認できます。google-analytics.com 宛てに GET リクエストを送信しているのが分かります。また、アナリティクス管理画面のリアルタイム・サマリーでアクセス中のページを確認できればOKです。
最初、私はブラウザに Google Analytics 解析を遮断する拡張を入れていたのを忘れていて、動作確認でアナリティクスが動かない…と少々はまってしまいました。その類の拡張機能を入れている場合は、いったん無効にして動作確認を行います。
以上で Turbolinks 5 での Google Analytics 対応は終了です。
- – 参考リンク –
- Google AnalyticsをRails 4のTurbolinksに対応させる – Qiita
- Rails 4.x で TurbolinksとGoogleアナリティクスを共存させるには | Workabroad.jp
- Using Google Analytics with Rails 5 and Turbolinks 5
- ブログを Turbolinks 5 で高速化 & デザイン変更
- Rails の関連記事
- RailsでMySQLパーティショニングのマイグレーション
- Rails ActiveRecordでdatetime型カラムのGROUP BY集計にタイムゾーンを考慮する
- RailsプラグインGemの作成方法、RSpecテストまで含めたrails pluginの作り方
- RailsでAMPに対応するgemをリリースしました
- Railsでrequest.urlとrequest.original_urlの違い
- Railsでwheneverによるcronバッチ処理
- Railsアプリにソーシャル・シェアボタンを簡単設置
- Rails監視ツール用にErrbitをHerokuで運用
- Facebook APIバージョンのアップグレード手順(Rails OmniAuth)
- window.NREUMがHTMLヘッダー部に自動挿入されるのはNew Relic用
Leave Your Message!