這裡我要來說明如何將 google analytics tracking code 加入 rails 4 。

為什麼不能直接加入 js file 當中?

在 rails 4 當中,預設使用 Turbolinks RubyGem 。Turbolinks 使用 Ajax 將頁面上所有的 a tag 做處理,當觸發 click 事件的時候,並不會刷新頁面,而是透過 Ajax 僅改動<body>裡面的內容,並利用 js 改動 URL 做出好像換頁的效果。

所以 js 這種引入在<head>內的資源是不會在換頁時被刷新的。當然 ga 也包含在裡面,但如果使用者換頁,我們當然希望 js 能被重新執行,這樣才可以追蹤使用者的行為。

分解 Tracking Code

首先我們必須先找出翻頁時我們需要執行的 code :

<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', 'UA-XXXXXXXX-X', 'auto');
  ga('send', 'pageview');

</script>

其中ga('send', 'pageview');這段是我們希望在翻頁時執行的 code ,所以可以先將其他的部分放如 js file 裡面,然後創立一個 partial _ga_pageview.html.erb

<script>
    ga('send', 'pageview', '<%= request.path %>');
</script>

剛剛說過<body>是唯一會被刷新的部分,所以將這個 partial 埋在</body>的前面就可以確保每次都會被執行,另外,使用<%= request.path %>將正確的 URL 送出,以確保 ga 偵測到正確的網址。

Reference