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 コードを取得できるかと思います。

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

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

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

app/views/layouts/application.html.erb

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

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

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

app/assets/javascript/google_analytics.js.coffee

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 の機能全体を網羅されています。
スポンサーリンク
 
Twitterを使っていますのでフォローお願いたします!ブログの更新情報もつぶやいてます^^
(英語学習用)

Leave Your Message!