薬・働き方・プログラミングがメインテーマ

週刊 薬剤師日記

Programing

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

投稿日:

 

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

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

 

 

スポンサーリンク

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

 

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

 

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

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

 

より詳しく言うと、トップページ(https://rikika-keisan.com)から計算ページ(https://rikika-keisan.com/calculator)に移動するとき、計算ページ(https://rikika-keisan.com/calculator)のPVが測れていなかったのだ。

 

【起こったこと】

https://rikika-keisan.com( 計測可)

↓ページ遷移

https://rikika-keisan.com/calculator(計測不可)

 

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

なぜGoogle Analyticsが正常に動かなかったかというと、原因はTurbolinksだった。

 

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

 

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

 

 

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

 

解決法は、以下の通り。

 

TurbolinksありでGoogle Analyticsを動かす方法

次のコードをコピペすればOK。

 

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

application.html.erbのhead内に、以下のコードを貼り付ける。

Your Google Analytics Tracking Codeには、自分のトラッキングコード(UA-xxxxxxxx-xxx)を書く。

 


<% 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)を書く。

 

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は便利だけど厄介。

少しずつ勉強しておこうと思う。

RELATED

-Programing

Copyright© 週刊 薬剤師日記 , 2019 All Rights Reserved.