Google analytics 事件追蹤、轉換目標設定教學 ga event

Google analytics 是一個追蹤數據的好工具，其中有個重要的功能『事件追蹤』，事件追蹤可以讓我們紀錄使用者的動作，例如點擊註冊會員按鈕、影片播放，或是滾動畫面等等，只要動作能判斷都可，甚至連滑鼠移動可以追蹤。

通常一個網站一定會有要求的 KPI，例如註冊會員數、訂單數、填表數等等，這時候如果沒有建立轉換目標的話，就只能看流量自圓其說了，下廣告也只能盲目亂打一通。

這時候就可以使用 google analytics 提供的方法 ga(‘send’, ‘event’, xx , xx , xx)針對這些動作來產生事件，成功產生事件後，就可以再把這個事件設定為轉換目標，就可以做到註冊會員、填表等等的追蹤了。

但實際上負責 ga 的多半都是行銷，技術人員可能不懂怎設定 ga 事件，又或是沒有配置技術人員，這時候必須要自己來實作了。其實基本的事件追蹤並不難，後面就來教你怎麼自己寫追蹤事件。

Google analytics 設定事件

首先來教你設定 ga 的事件，下方的官方文件，很清楚的介紹 ga 事件是如何運作的，當 ga(send,{hitType: ‘event’,xxx })執行之後，搭配 hitType 為 event，再加上必備的參數，事件類別以及事件動作，就可以讓 google analytics 接收到資料。下面程式是簡單的事件執行的方法(Method)。

開發者文件 : google analytics event 技術文件
說明 : ga 事件說明

簡單介紹一下在寫啥米

  //當使用者觸發 會發送 類別:導覽清單 ,動作:點擊 ,標籤:註冊會員 , 價值:200
  ga('send', {
    hitType: 'event',
    eventCategory: '導覽清單', // 類別 字元(必填)
    eventAction: '點擊', //動作 字元(必填)
    eventLabel: '註冊會員' //標籤 字元(選填)
    eventValue: '200' //標籤 數字(選填)
  });
  // ==> 下方為簡化
  ga('send', 'event', '導覽清單', '點擊', '首頁 - 註冊會員', 200);

寫好了 event 的參數之後，再來是要如何才能觸發，我們預期使用者點擊註冊跟登入會員按鈕，執行 ga 的事件紀錄。

  // 登入註冊會員按鈕

  // 1.html onclick 設定方法
  ...
  <button onclick="ga('send', 'event', '導覽清單', '點擊', '登入會員');" id="loginMember" class="btn btn-primary">登入會員</button>
  <button onclick="ga('send', 'event', '導覽清單', '點擊', '註冊會員', 200);" id="registerMember" class="btn btn-warning">註冊會員</button>
  ...

  // 2.不能動到html的話 就用這個方法
  // javascript track click
  ...
  <button id="loginMember" class="btn btn-primary">登入會員</button>
  <button id="registerMember" class="btn btn-warning">註冊會員</button>

  <script>
  //確保html載入後執行
  window.addEventListener("DOMContentLoaded", function() {
    //監聽登入按鈕點擊 執行ga的方法 id="loginMember"
    document.querySelector('#loginMember').addEventListener('click',function(e){
      ga('send', 'event', '導覽清單', '點擊', '登入會員');
    });

    //監聽註冊按鈕 id="register"
    document.querySelector('#register').addEventListener('click',function(e){
      ga('send', 'event', '導覽清單', '點擊', '註冊會員', 200);
    });
  }, false);

  </script>

  ...