:::

Google分析的行為事件追蹤:使用jQuery加入事件 / Add Google Analytics Event Tracking by jQuery

image

繼前一篇介紹如何在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

image

有了以上的事件追蹤程式碼,我們就能來用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分析的「即時 > 事件」中檢視成果。從上面的動畫中可以看到,當我們按下網頁的按鈕時,Google分析就會即時收到事件。這樣就完成囉。


加上使用者ID的事件追蹤範例 / Event Tracking with USER-ID Example

2016-11-25_195639

再來我們把前一篇的使用者ID技巧加入到另一個範例中。

主要是加入以下程式碼:

<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>

image

最後就可以用自訂報表來展示使用者ID跟事件資訊了。


結語 / Conclusion

把事件追蹤的程式碼與之前所介紹的使用者ID一起使用的話,我們就能夠詳細記錄使用者在網站上的各種操作。雖然是這樣說,但要加入事件追蹤程式碼的手續並不容易。Google Tag Manager教大家用的是匯入事件追蹤器變數容器,似乎可以用滑鼠點幾下就能加入要追蹤的事件,看起來很不錯。但對我們程式開發者來說,還是用jQuery動態選擇、綁定事件,看起來比較簡單啦。

不過然而令人困擾的是,相較於事件雖然可以即時監控,使用者ID通常還是要過30分鐘左右才能正常顯示。結果我還是不太確定使用者ID這樣的寫法到底適不適合啊。

總之這篇就先這樣吧,本來就沒打算寫很長了,未來有什麼有趣的發現再跟大家分享吧。