文森說技術

iOS, Web Development Notes
- ,

在 Google Analytics 中追蹤事件

在 Google Analytics 可以追蹤一些網頁中的事件,進而可以簡單對使用者行為模式分析,或是判定是否有達到目標的方法。

原本的 code 長這樣:

1
2
3
4
5
6
7
8
9
10
11
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'YOUR_GA_ID']);
_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';
// Change to new way of ga
ga.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'stats.g.doubleclick.net/dc.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

這邊加完之後,其實可以發現有宣告一個 _gaq 變數來放 Google Analytics 的設定,目前就只有設定帳號和紀錄 pageviews 而已。

加入事件

假如要去看某個連結有多少人點,放在哪個位置比較會有人點的情形。就可以在 onclick 的事件觸發之後,發送 event 的訊息給 ga。

Submit 事件的方法

所以這個時候也是要把 event 推進 _gaq 裡面去:

1
_gaq.push(['_trackEvent', CATEGORY_NAME, ACTION_NAME, LABEL_NAME, VALUE])

除了 _trackEventCATEGORY_NAMEACTION_NAME 之外都是 optional 的。

實際使用

除了可以直接在 HTML inline 直接插入 onclick 事件,提出來寫也可以:

1
2
3
document.getElementById("ID").onclick = function() {
_gaq.push(['_trackEvent', 'Kumaya Home Link', 'Click');
};

找到目標元件之後,設定 onclick 要做什麼事情,塞一個 function 給他、裡面再放要執行的 event 設定就可以了。

看報表

當設定完 event 之後,觸發事件當下,就可以在 ga 的頁面看到結果了。

如果覺得這篇對你有幫助,歡迎幫忙分享給其他人 😀