advertisement

User Action Tracking - Google Analytics

88 %
13 %
advertisement
Information about User Action Tracking - Google Analytics
Technology

Published on March 2, 2014

Author: tureki

Source: slideshare.net

Description

取巧的使用Google Analytics來儲存過億筆的使用者和遊客的行為資料,省去伺服器建置和維護成本,適合小企業使用。
advertisement

User Action Tracking Google Analytics 1.3.2014 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,該怎麼設計? login header 假設是登入按鈕! ! 可以考慮:/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/googleanalytics-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”

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Google Analytics - Mobile, Premium and Free Website ...

Adometry by Google; Google Analytics; ... Introducing the Google Analytics 360 Suite, ... User Forum Solutions ...
Read more

Social Interactions - Web Tracking (ga.js) | Analytics for ...

Social Interactions - Web Tracking ... Google Analytics can report on the network, action ... Google Analytics users name their tracking ...
Read more

Event tracking with Google Tag Manager - Analytics Help

Event Tracking is one of the best ways to understand the user actions on your website such as how many times a button was clicked, a form was submitted, or ...
Read more

Offizielle Website von Google Analytics: Webanalyse und ...

Google Analytics folgen auf . Nutzungsbedingungen. Sie möchten Ihr Unternehmenswachstum steigern? Wir können Ihnen dabei helfen. Google; Über Google ...
Read more

Analytics - Tracking actions per user - Stack Overflow

Analytics - Tracking actions per user [closed] up vote 8 down vote favorite. 5. ... and they would like to get Google Analytics to track it per user ...
Read more

About the User ID feature - Analytics Help

Each unique User ID is considered to be a unique user in Analytics, ... you can also put individual user actions in context and ... Google Analytics ...
Read more

Google Analytics - Community - Google+

I tryed using Google analytics it made mess of ... (debug users only). 01.149 Start Interceptor/action chain ... Google Webmaster Tools vs Google Analytics.
Read more

Event Tracking | Analytics for Web (analytics.js) | Google ...

Event Tracking This ... The following command sends an event to Google Analytics ... Outbound link and form tracking. When a user clicks ...
Read more

Event Tracking 101 For Google Analytics - Search Engine ...

... or even lead users ... There is no denying the website visitor’s chosen action. If we can use our Analytics ... Event Tracking from Google Analytics.
Read more