user action tracking - google analytics
DESCRIPTION
取巧的使用Google Analytics來儲存過億筆的使用者和遊客的行為資料,省去伺服器建置和維護成本,適合小企業使用。TRANSCRIPT
1.3.2014
User Action TrackingGoogle Analytics
by tureki
“說到要tracking網站使用者行為的時候”
“開發者/工程師都會很傷腦筋”
“因為想到的第一件事情就是要怎麼儲存?”
“難道需要建置一個很大的垃圾桶(資料庫)?”
“不停的把會員或遊客每個動作都記錄到垃圾桶內?”
“環境建置,維護成本都很高啊...”
“我只是一個小網站,難道就沒有省時省錢的方式嗎?”
–哀嚎!
“有的...接下來就要介紹的就是這種省時省錢方法”
Google Analysic(GA)
“GA?不就是放在網站footer就好了嗎?”
“那是一般用法,其實你還可以更聰明的利用它”
Google Analysic(優點)
✤ 免費,申請帳號立即使用!
✤ 不需建置和開發伺服器(資料庫)!
✤ 不需擔心容量(無底洞)!
✤ 不需維護,狂丟資料就對了!
“免費總是要付出一些代價”
Google Analysic(缺點)
✤ 資料取出較麻煩(需用API)!
✤ 資料只有新增,沒有修改,刪除!
✤ 資料有時候會漏掉!
✤ 一天資料若過多,需等1,2天才會出現!
✤ 你必須了解Google Analysic API
“通常我會將Tracking分成兩類”
User Interface Track (UI Track)
✤ 網站介面的tracking!
✤ 例如:網頁某個頁面的某個區域的某個按鈕的點擊狀況!
✤ 實際情況:A覺得這個按鈕放紅色較好,B覺得放綠色好,那到底哪一個好?!
✤ 我們科學點,Track UI!數據會說話!
Backend Track
✤ 網站用戶背後分析的tracking!
✤ 例如:網站User看了什麼,買了什麼個商品等!
✤ 為了做Data Mining,用戶興趣等!
✤ 實際情況:會員最喜歡哪一個分類?最喜歡哪一個商品等!
✤ 後端使用如:(php,python etc.)將資料push給GA
“在實做前,您還必須了解...”
Track Page View(GA)
舉例
✤ 其實把GA的追踪碼放到網頁下方,就是在執行Track Page
View這個動作
GA會將該頁面的url和title給記錄起來。
如果網址是/user/register/index.html!
!那麼GA就會將它變成:!
user/!├── register/!
│ ├── index.html!
!也就是說 / 號GA會自動將內容會變成目錄層級(/不能亂用)。
“重點來了”
“如果Track Page View 的資料能自己DIY不就很棒了?”
“沒錯接下來就是要用GA-API來傳送你要的資料” https://developers.google.com/analytics/devguides/collection/
analyticsjs/
(ps:由於GA已有新版Tracking Code,往後的範例都會新版為主)
分開GA為了不破壞原來的GA,通常我的做法會將GA分開
舉例
✤ UA-XXXXX-01 -> 網站一般GA!
✤ UA-XXXXX-02 -> UI Track GA(lab)!
✤ UA-XXXXX-03 -> UI Track GA(正式)!
✤ UA-XXXXX-04 -> Backend Track GA(lab)!
✤ UA-XXXXX-05 -> Backend Track GA(正式)
我個人是覺得這樣才好管理,!!測試時候就用lab的Tracking Number,!!正式環境就記錄在正式Tracking Number,!!這是為了防止GA的目錄資料結構被破壞,!!你要記得GA只能新增,沒有修改和刪除
一個頁面是容許建立兩個實例,以下是ga給的範例:!<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','//www.google-analytics.com/analytics.js','ga');!! ga('create', 'UA-XXXXX-1', 'your.domain');!!</script>!!一個頁面是同時可以建立多個實例的,如:!var ga_1 = ga('create', 'UA-XXXXX-1', 'your.domain');!var ga_2 = ga('create', 'UA-XXXXX-2', 'your.domain');
開始實做 UI Track
範例一情境:首頁有個圖片區域,到底大圖點擊率高,還是小圖多?
大圖
小圖
小圖
小圖
大圖:!/index/img-panel/large/[img]!小圖:!
/index/img-panel/small/[img]
當IMG被被點擊時候(JS)var ga_ui_track = ga.create('UA-XXXXX-02', 'auto', {'name': 'UA-XXXXX-02'});!ga_ui_track.send('pageview',{page:"/index/img-panel/left/img"});!!你在GA的後台就能即時看到,如圖:
修改成功!!!聰明的你會發現!!其實設計PATH(/index/img-panel/left/img)才是重點,!
!不同的需求會有不同的目錄結構
為了要讓追踪變得簡單,我的做法是將追踪的track放在html內!<img src="small.jpg" track="/index/img-panel/small/img"/>!!用jQuery偵測全域的attr:!
var ga_ui_track = ga.create('UA-XXXXX-02', 'auto', {'name': 'UA-XXXXX-02'});!!jQuery('body').on('click', '[track]', function(e) {!!! var _str_track = jQuery(this).attr("track");!!! ga_ui_track.send('pageview',{page:_str_track});!!});
你可到以下網址取得範例一的Testing Code!
!https://gist.github.com/tureki/9303954!
!因為之後的實做邏輯都一樣,就不再製作了
使用GA後台若要找大圖,就行為->網站內容->搜尋下large/img,如圖:
注意,日後GA後台容不容易找到你要的資訊,都取決你的PATH怎麼設計!
範例二情境:如果介面是全域如header,該怎麼設計?
header
login
假設是登入按鈕!!可以考慮:/common/header/menu/[btn:login]
我會將頁面常出現的UI都放在common內!!但是這樣設計雖然能將取得header的數據!!但沒辦法取得首頁header被點擊的狀況!!所以我會首頁header被點擊的時候,動態將資料從!/common/header/menu/[btn:login]!變!/index/common/header/menu/[btn:login]!!在後台如果要取全部資料就下 /common/header/!
!要單獨取首頁就下 /index/common/header/!
!至於要怎麼判斷這是那一頁和設計PATH就是你的功課了。
“記得!PATH很重要!”
如何測試和Debug?
✤ 用你的LAB Tracking Number!
✤ 用GA官方插件!
✤ https://chrome.google.com/webstore/detail/google-analytics-debugger/jnkmfdileelhofjcijamephohjechhna!
✤ 用GA後台的即時預覽
開始實做Backend Track
基本上Backend Track和UI Track是一樣的,!
!關鍵在於PATH的設計!
!還有記錄方式在後端!
!本範例採用PHP:!
!https://github.com/thomasbachem/php-ga
範例一情境:會員在看首頁,可以將PATH設計成!/member/{Member ID}/{Action}/{Object}!也就是!/member/1/view/page/index!!遊客在看首頁!/guest/view/page/index
範例二會員成功註冊+來從那一頁點過來?!/member/1/register/(來源)!!你可以設計成!$str = "/member/1/register/(from:".$_SERVER['HTTP_REFERER'].")";!!也就是說,你愛怎麼組合都是由你在決定
範例三會員買了一個商品,假設商品有分類,商品也有ID。!/member/{Member ID}/buy/item/{CATALOG ID}/{ITEM ID}!也就是!/member/1/buy/item/2/3!!PHP後端使用的範例請看:!https://github.com/thomasbachem/php-ga!!重點就在:!$tracker->trackPageview("/member/1/view/page/index", $session, $visitor);
GA後台搜尋若要找分類2商品,搜尋就下!/item/2/!!如果要找ITEM ID 3,搜尋就下!/item/2/3/!!注意:GA的search支援regex,所以如果你會正規,東西更好找!regex URL!!https://support.google.com/analytics/answer/1034324?hl=en
Guest的問題
“遊客可以做到像會員那樣的記錄嗎?”
“可以的,只是問題是你想怎麼做?GA只是個垃圾桶,用它的人是你。”
“這裡給個簡單的思路:”
讓guest有個永久的Cookie,PATH設計成!/guest/{COOKIE}/view/page/index!!當guest變會員或登入時,將guest的cookie和member ID mapping起來!!你就會知道這個會員在還沒登入和註冊前做了什麼事情。!!重點在Mapping的資料你要儲存起來,因為GA的資料新增後是無發修改的,!!也就是你無法將之前記錄的!/guest/{COOKIE}/view/page/index!變成!/member/{member ID}/view/page/index!!mapping cookie的資料至於要儲存在那?!!我個人目前是用Elasticsearch儲存。
GA的基準新版有提供自訂!!Custom Dimensions and Metrics,!!也就是你能自訂點擊量!!各位可以自行摸索
最後
“這種方法已實用近2年,以下Backend Track的儲存量”
已免費儲存過億...
我個人覺得以上做法長久之計只適合小型公司!!
有資源還是建議用正常的方式去做大數據分析!!
畢竟現在技術成熟!!
AWS也有提供類似的服務
“沒有最棒的方法,只有最適合你的方法”!
“根據你的環境,選擇最適合現在的做法才是王道”
“END”