Google分析的行為事件追蹤：使用jQuery加入事件 / Add Google Analytics Event Tracking by jQuery
繼前一篇介紹如何在Google分析中加入使用者ID之後，這篇要講的則是Google分析的基本用法之一：事件記錄(Event Tracking)。網路上已經有許多關於事件記錄的做法，不過大多都是寫在標籤的onclick屬性中。這就篇簡單介紹使用jQuery來加入事件記錄的做法吧。
事件記錄的程式 / Event Tracking Code
根據Google分析的說明，事件記錄程式的定義如下：(這是JavaScript程式碼)
ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);| 欄位名稱 | 資料類型 | 是否必填 | 描述 |
|---|---|---|---|
eventCategory |
text | yes | 通常是事件互動的對象，例如「Video」(影片) |
eventAction |
text | yes | 互動的類型，例如「play」(播放) |
eventLabel |
text | no | 分類事件使用，例如「Fall Campaign」(秋季促銷) |
eventValue |
integer | no | 關於此事件的價值，例如42，通常設為1即可 |
事件追蹤範例 / Event Tracking Example
有了以上的事件追蹤程式碼，我們就能來用jQuery加入事件。以上我用一個簡單的網頁為範例：
這裡面只有一個按鈕，程式碼如下：
<button type="button">這是一個按鈕</button>然後我們用jQuery為這個按鈕加上事件追蹤的程式碼：
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// 為按鈕加上事件
$("button").click(function () {
// 加上事件的程式碼
ga("send", "event", this.tagName, this.innerHTML);
});
});
</script>完整的程式碼可以看我上傳到GitHub的原始檔。
完成之後，我們就能在Google分析的「即時 > 事件」中檢視成果。從上面的動畫中可以看到，當我們按下網頁的按鈕時，Google分析就會即時收到事件。這樣就完成囉。
加上使用者ID的事件追蹤範例 / Event Tracking with USER-ID Example
再來我們把前一篇的使用者ID技巧加入到另一個範例中。
- http://pulipulichen.github.io/blogger/posts/2016/11/google-analytics/user_id.html
- 原始碼：https://github.com/pulipulichen/blogger/blob/gh-pages/posts/2016/11/google-analytics/user_id.html
主要是加入以下程式碼：
<script type="text/javascript">
// 設定使用者ID
$(function () {
var _name_array = ["Jaime Stokes", "Tami Ballard", "Leslie Thornton", "Daisy Bryant", "Gene Tyler", "Warren Hammond", "Woodrow Lawson", "Eva Fleming", "April Lambert", "Ruth Marsh"];
var _i = Math.floor(Math.random() * (_name_array.length - 0 + 1)) + 0;
var _name = _name_array[_i];
$('input[name="user_id"]').val(_name);
ga('set', 'userId', _name); // 使用已登入的 user_id 設定 User-ID。
ga('set', 'dimension1', _name); // 自訂維度
});
</script>
最後就可以用自訂報表來展示使用者ID跟事件資訊了。
結語 / Conclusion
把事件追蹤的程式碼與之前所介紹的使用者ID一起使用的話，我們就能夠詳細記錄使用者在網站上的各種操作。雖然是這樣說，但要加入事件追蹤程式碼的手續並不容易。Google Tag Manager教大家用的是匯入事件追蹤器變數容器，似乎可以用滑鼠點幾下就能加入要追蹤的事件，看起來很不錯。但對我們程式開發者來說，還是用jQuery動態選擇、綁定事件，看起來比較簡單啦。
不過然而令人困擾的是，相較於事件雖然可以即時監控，使用者ID通常還是要過30分鐘左右才能正常顯示。結果我還是不太確定使用者ID這樣的寫法到底適不適合啊。
總之這篇就先這樣吧，本來就沒打算寫很長了，未來有什麼有趣的發現再跟大家分享吧。
