新舊Google event tracking 的用法

GA 的事件(ENENT)追蹤碼有分舊版和新版，因此這邊把兩個版本的程式碼都做一個記錄，這邊先介紹一下新舊版的GA程式碼差異

1.追蹤程式碼

舊版 ->在header匯入 ga.js ，程式碼長這樣：

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

新版-> 在header匯入 analytics.js ，程式碼長這樣：

<!-- Google Analytics -->
<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-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

可以先看一下你網站是已經用新版的追蹤碼還是舊的，官方已經建議不要再用舊的程式碼了，建議換到新的analytics.js追蹤碼，不過你的網站轉換成本很大，就還是用舊的程式碼去追蹤

2.新舊事件追蹤碼的差異

舊版 ->_gaq.push([‘_trackEvent’,[eventCategory], [eventAction], [eventLabel], [eventValue]);

新版 -> ga(‘send’, ‘event’, [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

3.如何使用上述的程式碼去做追蹤?

基本原則就是，只要事件追蹤碼這段script被執行到，等於事件發生了，GA那邊就會把這一次事件記錄下來，但怎樣才算事件發生？這就必須要搭配一些HTML屬性或是技巧。

常見的 HTML TAG屬性

1. OnClick=”ga事件追蹤碼”

這應該算是最常見的了，通常拿來記錄這個按鈕<button>或這個<a>被點了幾次，再由GA記錄，以新的追蹤碼為例：

<button OnClick=”ga(‘send’, ‘event’, ‘Game_AD’, ‘click’, ‘call of duty’, ‘20’);”></button>
<button OnClick=”ga(‘send’, ‘event’, ‘Movie_AD’, ‘play’, ‘Captain America’, ‘10’);”></button>

這兩個button如果都各被點一次代表，事件發生兩次，一次是遊戲廣告，另一次是電影廣告，而這可以看出一個是點擊廣告，另一個是播放廣告。

2. Onload=”ga事件追蹤碼”

通常用於圖片，這圖片被load過幾次

<img onload=”ga(‘send’, ‘event’, ‘Game_AD’, ‘load’, ‘call of duty’, ‘20’);”>

3. Onchange=”ga事件追蹤碼”

4. Onfocus=”ga事件追蹤碼”

4.用data-track方式去追蹤(目前只測過舊版GA)

在HTML標籤裡面增加程式碼，如<a class=“line” href=“xxxx.com”></a>增加成

<a class=“fb” data-track-event=”click” data-track-category=”buttons” data-track-action=”點擊” data-track-opt-label=”facebook_btn" href=“xxxx.com”></a>

※data-track-event=”click”

->事件為click

※data-track-category=”buttons”

->這分類可以自訂，我把所有Line_btn 都設為這分類後面設定可以再細分

※data-track-action=”點擊”

->當然動作就是點擊這動作，隨便你怎麼設定

※data-track-opt-label=”facebook_btn"

->這邊可以再細分小分類 ，所以這就是btns分類底下的 fb_btn活動，方便之後看GA追蹤