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”