我與 Google Analytics 的補強計畫

mei

「Google Analytics」相信用過它的朋友們應該很多很多, 簡單的說, 它是 Google 出品, 用來 tracking 以及分析網站流量的工具, 藉由簡單的 JavaScript lib 的置入, 便可以有效的紀錄 user 的操作行為, 讓網站管理員可以更清楚的知道 user 是怎麼來使用自己的網站

由於它的設定非常簡單, 可以獲得的資訊亦豐富非常, 所以深受很多 web developer 喜好, 不過由於筆者深深覺得流量這種東西是一個服務的命脈, 算是 top secret, 說什麼也不該輕易得讓競品或者閒雜人等得知, 所以囉~筆者其實一次都沒有用過!! 要不是因為自家服務有這樣的需求, 我還真跟他宛若平行線一般沒有任何的交集

那麼…要怎麼使用「Google Analytics」來進行 tracking 呢?! 接下來就讓我娓娓道來, 簡單的跟大家介紹一下

How to install 「Google Analytics」:

1. 前往 Google Analytics 官網建立帳戶並取得 tracking ID (其 format 為 UA-NNNNNNNN-N), 這組 key 為安裝 GA 的 必要欄位

Google Analytics

2. 在每個欲 tracking 的頁面中, 安裝 analytics.js, 來進行 beacon 發送, 只要將相關的 JavaScript code 置入頁面任一位置即可

 <!-- Google Analytics -->
<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....');
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

3. 完成 analytics.js 的安裝後, 便可以馬上前往 Google Analytics Report 來觀看 beacon 是否有正常發送

Google Analytics Report

以上便是整個 GA 的申請與安裝過程, 是不是很簡單呢?! 當然囉~這僅僅是最基本的設定, 如果想要發揮 GA 的最大功效的話, 建議花點時間看看其 技術文件, 相信會有不同的 tracking 體驗喔!

source: https://developers.google.com/analytics/devguides/collection/analyticsjs/

另外, 搭配相關的 extension – Google Analytics Debugger 的話, 更可以讓我們可以清楚的知道 GA 當前的執行緒列, 資料的設定以及 beacon 的發送是否正常

Google Analytics Debugger

透過 GA set 這樣的 method, 我們更可以增加一些 data 到 beacon 中來方便我們製作出不同的分析以及報表

ga('create', 'UA-XXXXX-Y', 'auto'); 
//data setttingga('set', 'contentGroup1', 'itempage');ga('set', 'dimension1', 'itemId');ga('set', 'dimension2', 'itemName');
ga('send', 'pageview');

如上所示, 我們分別設定了 contentGroup1, dimension1, dimension2 這三個變數, 所以當 pageview 發送時, 該 beacon 就會包含我們所設定的資料

除此之外, 由於 JavaScript 的使用其實愈加廣範, 很多 interaction 都是在 page 不 reload 為前提下進行, 如果想要 tracking 這些 interaction 的話, 一樣可以透過 GA 來收集喔!

// ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);
ga('send', 'event', 'Videos', 'play', 'Fall Campaign');
  • eventCategory: Videos
  • eventAction: play
  • eventLabel: Fall Campaign

如上面的範例, 我們把它用來 tracking Video 的播放, 透過這些欄位的設定, 我們可以清楚的知道 video 的 play 按鈕被點擊了, 而被播放的 video 為 “Fall Campaign”

Google Analytics 真是強大, 幾乎可以滿足很多 tracking 需求, 不過……

看起來真的是可以 fulfill 很多很多需求, 但是…筆者總覺怪怪的, 似乎少了點什麼? 透過以往使用 「Yahoo! Rapid 」的經驗, 大概可以整理出以下幾點:

  • 透過 inline script 來設定 tracker 以及發送 beacon 可能帶來 XSS 攻擊且一點都不優雅, 宛若剖開肚子, 腸子內臟都跑出來見人一樣
  • 雖然可以透過 ga(‘send’, ‘event’) 來做一些 event 的 tracking, 但是這些必須透過 JavaScript 來做發送, 對於純 backend 來說會有一定門檻, 每每有新的連結或者 interaction 需要 tracking 便需要 front end support (event listener add & beacon send), 無法一氣呵成快速設定
  • 沒有 module view, 因此我們無法 by module 得知相關的成效, 畢竟有些時候我們會微調 module 的相關位置, 想知道前後的影響有多大
  • 如同上述, 亦沒有 module click, 雖然可以自己想辦法去把它 group 起來, 但著時增加了不必要功

基於上面這幾點, 為了可以更靈活有效的來使用 Google Analytics, 於是筆者便著手開始撰寫 「gaExt」, 為了就是希望可以有效的解決上面這幾點, 我們先來看看 demo 吧!

套用 gaExt 來 enhance Google Analytics

gaExt demo page: http://mei.homin.com.tw/GAPrototype…

打開 Google Analytics Debugger 後, 我們可以看到 GA 的執行緒列

demo with Google Analytics Debugger

在 demo page 中, 我們 tracking 了兩個 module, 分別是 “.mei” 以及 “# mei” (CSS selector), 透過 debugger 我們可以清楚的發現在 pageview send 出去後, 緊接著又 send 了這兩個 module 的 moduleView

moduleView beacon send after pageview beacon

當這兩個被 tracking 的 module 有 click 發生的時候, gaExt 會先判斷方才點擊的 element 是否為 clickable, 一旦為真, 便會如同預期的發送 moduleClick 出來, 目前判定 clickable 的 element tag 為 < a >, < button >, < select> 以及 < input >, 其中 input tag 還會再看其 tape 是否為 ‘checkbox’, ‘radio’, ‘submit’, ‘button’, ‘image’, ‘file’

當 “.mei” 這個 module 有 click 發生時, 會發送一個 module click 的 beacon 出來

只要透過簡單的設定, gaExt 便讓 “.mei” 以及 “# mei” 這兩個 module 有了 view 以及 click beacon 的發送, 今天想 tracking 什麼就 tracking 什麼, 不需要央求 front end 多做一些額外的 JavaScript, 達到了「力」與「美」的境地

接下來, 筆者來簡單介紹一下如何使用 gaExt 到我們服務上

如何套用 gaExt 到我們服務上

1. 在頁面任一位置新增 gaConf 的 tag 以及 gaExt.js, 其中要特別注意的是 tag 的 element id 必須為 gaConf, data-conf 的內容則為我們想要設定的一些變數 (format 為 JSON String), gaExt 在 init 的時候會去 parse DOM Tree, 再認定正確格式後, 便會載入相關的 analytics.js 以及 create tracker

<var id="gaConf" data-conf='{"trackingID":"UA-74300583-1"}'>ga conf</var><script async src="gaExt.js"></script>

git: https://github.com/meistudioli/gaEx…

data-conf 的 schema 如下所示

{    "trackingID": "UA-74300583-1", //must have    "plugins": ["displayfeatures", "ecommerce"],    "cookieDomain": "none",    "signEsc": "ga-esc",    "sampleRate": "100",    "customDefinitions": {        "document_group": "itempage",        "itemid": "100144234642",        "subtype": "buynow"    },    "cdMap": {        "document_group": "contentGroup1",        "itemid": "dimension1",        "subtype": "dimension2"    },    "trackedMods": {        ".mei": "trackedMod01",        "# mei": "trackedMod02"    }}
  • trackingID: 此為必要欄位, 內容為我們再 Google Analytics 所申請到的 tracking ID
  • plugins: 設定我們需要用到哪些 pluging
  • cookieDomain: 設定 _ga 這個 cookie 的網域, default 為 none, 讓系統決定
  • signEsc: 某些情況下我們可能不希望每一個可被點擊元素都 send beacon 出去, 這時候只要再該元件的 className 設定這個欄位的值, 便可以跳脫 beacon sending.
  • sampleRate: 設定取樣的機率, default 為 100, 即表每次都會發送 beacon
  • customDefinitions: GA report 允許我們可以自由設定一些 custom definition, 這裡便是設定 tracker 在每次 beacon 發送會帶過去的 data
  • cdMap: 這是 customDefinition 的 mapping 表, gaExt 會透過該 mapping 表來做 data setting, 以上面例子來說, itemid 在不同服務可能會有不同的表述, 比方說在拍賣可能叫做 itemid, 在商城可能叫做 mid, 對 gen 報表的人會造成一定困擾以及閱讀帳號, 所以藉由 customDefinition 的設定, 來讓不同的商品 id 可以收斂到 dimension1
  • trackedMods: 這是用來設定頁面上哪些 module 需要 tracking, 它透過 CSS Selector 來做 module 的表述, 其值則是在 GA report 中希望看到的名稱, 畢竟不是每個看報表的人都可以一眼看出這個 CSS Selector 代表哪一個 module, gaExt 會判斷該 element 是否存在, 如果存在的話, 則會在該 module 多了一組 attribute, data-ga-mod, 被 tracking 的 module, 只要 module 內可以被點擊的元件有 click 發生時, 便會發出 moduleClick 的 beacon, 如下圖所示, eventCategory 設定為 document_group 的值, eventAction 則為 module 在 report 中顯示的名稱, eventLabel 的內容為 attribute data-slk 的值, 如果沒有設定 data-slk, 則取該元件的 textContent 或者是 value … (git)

moduleClick

  • ecommerce: 有些頁面需要 tracking 一些訂單的資訊以及內容, 這時候便可以透過這個欄位來餵入相關 data (只要該欄位有值, gaExt 便會自動的把 ecommerce 的 plugin require 進來, 當然 conf 中的 plugins 自行撰寫也可以) … (git)
{    "trackingID": "UA-74300583-1", //must have    ...    ...    ...    "ecommerce": {        "transaction": {            "id": "1234",            "affiliation": "Acme Clothing",            "revenue": "11.99",            "shipping": "5",            "tax": "1.29"        },        "item": [            {                "id": "1234",                "name": "Fluffy Pink Bunnies",                "sku": "DD23444",                "category": "Party Toys",                "price": "11.99",                "quantity": "1234"            },            {                "id": "1235",                "name": "Fluffy Pink Bunnies2",                "sku": "DD23445",                "category": "Party Toys",                "price": "19.99",                "quantity": "2"            }        ]    }}

gaExt 在 parse 到 gaConf 後, 便會完成下列動作

  1. create ga tracker, 並且設定相關的 customDefinition
  2. 如果 ecommerce 有設定內容, 則會發送 transition 以及所包含的 item beacon
  3. pageview beacon send
  4. 如果有設定 trackedMods, 則陸續發出各個 module view beacon, 當這些 module 內的 clickable elements 有 click 發生時, 則會有 moduleClick beacon 發生

以上, 便是 gaExt 得基本設置, 另外 gaExt 亦提供了一些 method 來方便 developer 使用

gaExt 所提供的各種 method

  • doPageViewBeacon : 用來發送 pageview 的 beacon, 當頁面需要重送 pageview 的時候, 只要 call 這個 method 即可以完成, ex: infinity scroll 類型的 page….(git)
gaExt.doPageViewBeacon(); //發送 pageviewgaExt.doPageViewBeacon(true); //除了 pageview 外, 所有 moduleView 也會發送
  • doModuleViewBeacon:用來發送 moduleView 的 beacon, 適合用在 module content refresh 發生時….(git)
gaExt.doModuleViewBeacon(document.querySelector('.mei')); //parameter 為 tracked element
  • addModule: 用來新增 tracked module, 有些時候 module 可能是透過 JavaScript 動態生成, 我們便可以透過這個 method 來做 module 的 tracking, 完成 add 後, 亦會發送該 module 的 moduleView beacon 出來, 所帶入的 parameter 為欲 tracking 的 module 以及在 report 顯示的 module 名稱…(git)
gaExt.addModule(document.querySelector('.mei2'), 'trackedMod03');
  • removeModule: 移除被 tracking 的 module, 一旦移除, 則該 module 一旦有 click 發生亦不出 moduleClick 的 beacon…(git)
gaExt.addModule(document.querySelector('.mei2'));
  • doEventBeacon: 如果需要做到一些特殊 beacon 的發送時, 可以直接 call 這個 method 來做 event beacon 的發送, ex: none clickable element 或是 other trigger 發生時…(git)
var data = {    category: 'Videos',    action: 'play',    label: 'Fall Campaign'};gaExt.doEventBeacon(document.querySelector('a'), data);//data 為 optional

工程師們總是要自己寫的 code 負責, 這既是本份更是天職, 所以 gaExt 也提供了一個 method 來方便做一些資料正確性的驗證

  • get: 透過這個 method, 我們可以從 tracker 取得其中所設定的變數, 並且藉此驗證資料的正確性, 至於可以取得的變數名稱, 可以透過相關的技術文件來觀看…(git)
gaExt.get('trackingId'); //return UA-XXXXXXX-XgaExt.get('&tid'); //same as above
gaExt.get('spaceid'); //get customDefinition spaceidgaExt.get('dimension25');//same as above
  • set: 大部分的 data 皆可在 gaExt init 的時候被置入, 每次 beacon 的發送便是由這些 data 所組成, 不過有些情況可能 developer 需要動態去更換部分 data 的 value, 這個時後便可以透過這個 method 來達到動態更換部分 key 的 value … (git)
gaExt.set('seller', 'mei');gaExt.set('subtype', 'bidding');

此外, 由於 Google Analytics 主要是針對 clientId 來做各種不同情境的統計, 比方說 Unique User, New Vistor & Returning, Assisted Conversions, Bounce rate …etc. 一旦 key 的值被重新賦予的話, 便會對整體報表的精確度出現嚴重的落差, 而 Google Analytics default 會把 clientId 存放在 cookie – _ga 裡面

透過 devTool 觀看 cookie 的設置

有些時候可能是 user 不經意的動作亦或是一些系統的特殊行為會造成該值被清除, 如此一來便會造成統計上的問題, 由於茲事體大, 所以 gaExt 也針對這個 issue 做了一個 recover 的機制, gaExt 會在第一次 sendPageView 後, 特別存放該 clientId, 之後在每次 register 過程中檢查該值的存在與否, 一旦發現 _ga 被移除了, 便會將 clientId 做一 recover 的動作, 讓整個 tracking 過程出現誤差的機率降至最低

以上便是 gaExt 所補強的功能以及使用方法, 透過這些設定, 便可以輕輕鬆鬆解決筆者的不安與疑慮, 有興趣的朋友們請不用客氣, 可以直接使用, 也請不吝一同討論與指教喔!

gaExt 特點:

  • pure native JavaScript, 不需要憑依在任何 framework 上
  • 只要一個 conf tag 和 JavaScript 就可以具備 gaExt 的 feature, 安裝簡單, 快速拔插
  • 使用容易, 透過 conf data 的置入就達到功能附加, 不需要額外撰寫 script
  • HTML 結構不會再有 inline script 出現, 不僅優雅美觀, 且不會潛伏 XSS 功擊危機
  • 不會對既有 GA 進行 core hack, 保留其靈活度與彈性
  • 針對重要的 cookie – _ga 有備份且回復機制, 避免 clientId 的重製造成報表上的誤差

Q & A:

  • 如果被點擊的元件內容不一定相同, 我要怎麼去收納統一這個 value 呢 ? Ans: 基本上 moduleClick 發生時, 會把被點擊到的元件的 textContent 或者是 value 取出放入 eventLabel 中, 如果想要客制化的話, 只要在該元件設定 attribute: data-slk 即可, ex: < a href=”?” data-slk=”target”>click here< /a >
  • addModule 很方便, 但是 module 內某些元件我不想讓它 send beacon, 我該怎麼做呢 ? Ans: 只要在該元件上加上跳脫的 className 即可, 系統預設為 ga-esc, 如果想要修改的話, 只要在 data-conf 中設定 signEsc 即可. ex: < a href=”?” class=”ga-esc”>this one wont send any beacon.< /a >
  • 有些特殊的 event 我想獨立 sending, 該怎麼應用 gaExt 呢 ? Ans: 可以利用 gaExt 的 method – doEventBeacon, 用法請參考本篇範例
  • 我的頁面是 infinity scroll 類型, usre 只要捲動到最下面就會自動 fetch 下一頁的資料, 我要怎麼做才能讓 pageView 累加呢? Ans: 在定義好 pageView 的行為後, 只要重新再 call 一次 doPageViewBeacon, 便可以完成 pageView resend 的功能喔! ex: gaExt.doPageViewBeacon();
  • 如果因為某些特殊的原因, 造成 Google Analytics 所設定的 cookie _ga 消失的話, 有什麼補破網的機制嗎? Ans: gaExt 特別針對這個 cookie 有做了一個 recover 的機制, 畢竟一旦這個主要的 clientId 消失的話, 可是會造成很多統計的競確度出現極大的落差, gaExt 會在每個 tracker 被 create 之後將相對應的值做一存放, 一旦該 cookie 消失的話, 則會在下一次 run gaExt 的時候將該值做一回覆的動作, 讓誤差率儘可能的降至最低
  • 如果我想要自己設定 _ga cookie 的作用網域的話, 該如何進行設置呢? Ans: 只要在 data-conf 中的 cookieDomain 進行設置即可, 其 default 值為 “none”, 即表示由系統自己來決定, 像 Yahoo 奇摩 – 拍賣就將其作用網域進行調整, 只要查看相關的 debugger 即可看到 cookieDomain 被設置為 “bid.yahoo.com”

Reference:

轉載文章 – 我與 Google Analytics 的補強計畫

mei

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *