【Rails】Turbolinksが原因でGoogle Analyticsが正常に動かない時の対処法 #Ruby

Ruby on RailsでWebアプリを作っていたら、Turbolinksでどハマりしてしまったのでメモ。

Google AnalyticsがTurbolinksの影響で正常に動かない場合の対処法を備忘録としてまとめてみました。

Rails5で作ったWebアプリのGoogle Analyticsが正常に動かない

力価計算.comという小児薬の服用量を計算するWebアプリを作ったのですが、Google Analyticsが正常に動いてないことに気づきました。

ページ遷移したときにGoogle AnalyticsのPVがカウントされない

Webアプリ上でページ遷移した時に、PVのカウントがされていない。

例えば、トップページから計算ページへに移動するとき、トップページのPVは測定できるのに計算ページのPVが測れていませんでした。

Google Analyticsが正常に動かなかった原因はTurbolinks

Google Analyticsが正常に動かなかった原因は、Turbolinksだったことが発覚。

Turbolinksはページの表示速度が早くなるというメリットがありますが、どうやらJavascriptの動きを邪魔してしまうことがあるらしい。

Google AnalyticsのコードはJavascriptで書かれているので、TurbolinksがGoogle Analyticsのコードの動きを邪魔してしまったようでした。

Turbolinksが原因でGoogle Analyticsが正常に動かない場合の対処法

解決法は、以下の通りです。

1：application.html.erbにGoogle Analyticsのコードを貼り付ける

まず以下のコードをapplication.html.erbにコピペ。

application.html.erb

<% if Rails.env.production? %>
 <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=#{ENV['Your Google 
  Analytics Tracking Code']}"></script>
  <script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('Your Google Analytics Tracking Code');
 </script>
<% end %>

2：application.jsにturbolinks対策のコードを貼り付け

次に、以下のコードをapplication.jsに貼り付けます。

Your Google Analytics Tracking Codeには、自分のトラッキングコード（UA-xxxxxxxx-xxx）を書いてください。

application.html.js

document.addEventListener('turbolinks:load', function(event){
  if(typeof(gtag) == 'function'){
    gtag('config', 'Your Google Analytics Tracking Code', {
      'page_title' : event.target.title,
      'page_path': event.data.url.replace(window.location.protocol + "//" + window.location.hostname, "")
    });
  }
})

参照：https://github.com/turbolinks/turbolinks/issues/73

これで解決するはず。

ちなみに最初の行にあるturbolinks:load は、Turbolinksによってページが表示されるタイミングで発生するイベントです。

これでも動かなかった場合

実は僕の場合、これでも動かなかったのですが、rails assets:precompileのコマンドをターミナルで打ち込んだら正常に動くようになりました。

あと、最初はgoogle-analytics-railsというgemでGoogleアナリティクスを導入していたのですが、どうしても正常に動きませんでした。

なので、google-analytics-railsを使っていて、Google アナリティクスが動かない場合は、先ほど紹介したような感じで普通にGoogle Analyticsのトラッキングコードを貼り付けると良いと思います。

まとめ

Turbolinksは便利だけど厄介ですね。

少しずつ勉強していこうとと思います。