這篇文要記錄一下我導入Google Tag Manager到SaaS product（從網站到平台的追蹤），並運用Data Studio讓我的同事可以即時看到網站數據，省去等待我整理文件或自行在GA裡摸索的時間。
比起分篇，我想直接一個頁面從頭到尾講完網站追蹤＆分析的教學。好處是反正一個地方滿足你現階段需求、不懂你就到這邊留言問我，不用重新爬文。為了讓此文足以成為大家的知識庫，這兒會一直更新；so如果你有更好的做法請不吝嗇讓我知道！感謝！
本文目錄：（以下將Google Tag Manager簡稱為GTM，Google Analytics簡稱GA）
0. 前提：追蹤數據和商業指標的連結
1. 安裝：安裝、檢查流量是否正常
2. 設定：Event Tag
3. 設定：User Identify
4. 呈現：運用Google Sheet下條件產生特定報表
5. 呈現：運用Data Studio拉即時Dashboard
0. 追蹤數據和商業指標的連結
個人主觀，網站監測是最好一開始就把它架好，後面只做微調動作；因為重點還是你網站要有人註冊、有人下單，所以你可把它看成是一個backup，好讓你知道流量是否有浪費掉、作為優化的依據。
它很重要，因為沒有這些依據，你會不知道往哪邊去改進東西。
除了大家最常提的註冊或購買轉換；我自己看會分兩種目的 — —
- 內容優化型，譬如像單個頁面的停留時間、觀看區塊的時間及點擊。
- 流程加強型，譬如從一個domain到另一個，中間流失的比率。
1. 安裝GO！檢查追蹤碼是否正常
安裝：如果無頭緒可參考之前我寫過的這篇，是完整的教學
檢查：
Tag Assistant 插件可以用來檢查代碼是否正常運作或有重複埋碼的情形：https://chrome.google.com/webstore/detail/tag-assistant-by-google/kejbdjndbnbjgmefkgdddjlbokphdefk?hl=en
除此之外，Google Analytics的通知欄也記得注意，如果追蹤碼有異常他會提醒。
2. 設定 Event
我通常把Event分兩種，一種是關鍵步驟類的，像進入網站、註冊、登入平台等，這樣在呈現數據的時候比較好一次分類；另一種是用戶行為類，可以表現他對網站的興趣程度或平台使用程度的指標。
另外我會跟前端工程師溝通說，在class及img alt命名部分盡量跟當初規劃wirframe時的取名一樣，也就是說看code架構便可以大概知道這是哪個網站的區塊。img alt要命名則是因為SEO friendly的關係（但意思不是說這是SEO的關鍵，只是這樣做比較好）
有效率的建立追蹤Tag
在開始建Tag以前，我都習慣先思考一遍用戶進入網站後的流程、註冊登入的流程可能會是怎樣。除非你有很想去拆解網頁上各個block內容來一個個做A/B test，不然我會建議主要是看各頁面的停留時間和Call-to-action點擊。
（P.S. 我當時是有設變數來計算user在網頁上各個block停留的時間，用screentime.js在GTM建custom javascript Tag是可以辦到的；只不過我覺得對初學者來說是可以先放下一階段來學）
分完以後，建議從關鍵步驟類開始，你先抓註冊、登入、點擊Call-to-action這種先建Click Tag，這都很簡單處理。再來處理用戶行為類，像User的觀看影片時長、或點擊文章某處，可能代表有興趣或目光有被抓到。
影片可以運用GTM內建Video Tracking的Trigger來設定，點擊某處這種的我都倚賴直接建一個Random Click的Event Category，下面的Event Action放{{PagePath}}、Event Label塞{{Click Text}}或{{Click Classes}}變數，去捕捉一些一開始沒預料到但user其實常常會點的地方。
P.S. 若你的影片是有用modal藏起來，點按鈕才會顯示的，GTM內建的Video Tracking會不work；如果你有興趣了解怎麼做才能追蹤到，可以到這邊快速提交一下。
Tag的管理
有些人會想說Tag這麼多是否很難管理，但我覺得比起GA你跟工程師來回溝通埋代碼，GTM真的好管理非常多了！！而且它還可整合hotjar、crazyegg、FB Pixel等常用追蹤工具。我覺得他有幾個好處可以善加利用一下：
- Tag命名及自建資料夾：意思跟Google Drive上的檔案一樣，可命名可自建資料夾管理。要跟團隊定義好你們命名的邏輯是什麼，交接的時候傳下去比較不容易搞混或找不到Tag。（因為我一個人弄啦所以這部份如果團隊一起用GTM時有什麼更好的建議歡迎留言給我～～）
- 匯出/入container：在管理員頁面可以選擇不同版本的GTM設定匯出成json檔！然後你想要再import到其他帳戶都隨你開心（要小心選擇覆蓋與否的選項）
- 讓Tag暫停生效：如果你在測試不同的Tag，但不想把紀錄刪掉（因為裡面可能是你的js code之類的，重build麻煩），在Tag內頁的右上角可以選”pause”，這樣它在當前網站不會被觸發。
3. 設定User Identify
在GA的User Explorer裡可以看到不同的訪客(ClientID)、點進去可看到它不同時間點做了什麼事情；但麻煩的是你要一直點開、還不能互相比較；而且無法在裡面把它跟UserID綁在一起看。
＂何時我覺得Web Analysis活出了新生命？就是當我可以把ClientID和UserID綁在一起追溯的時候ＸＤ＂
它不再只是一張總覽表、一張地圖、幾個chart，它就像讓你變成網站偵探一樣，你幾乎跟後端工程師一樣快知道有用戶進來、在哪個地方待多久、載入幾次資料等等。
適用情境舉例：
1. 想知道會員是怎麼來到網站的（UserID → ClientID → medium/source）
2. 想知道會員們在註冊前看過的content排名（UserID → ClientID → pagePath）
3. 想知道會員何時又再登入、到過哪裡（UserID + dateHour + pagePath）
…等
將ClientID及UserID一起呈現在custom report中
也可以直接看我之前錄的一支影片教學：https://youtu.be/5IE_DFk6r-8?t=4m33s
- 在GA及GTM中新增變數
在GA Custom Definitions裡新增兩個 new custom dimension，分別叫ClientID及UserID，這是為了你在GA裡能叫出這兩個dimension。
接著在GTM的Variable頁籤中新增兩個變數，分別取名叫”UserID”及”Set ClientID in Dimension 1″。
這段JavaScript如下：
function() {
var customDimensionIndex = 1;
return function(model) {
model.set('dimension' + customDimensionIndex, model.get('clientId'));
}
}
Source: Simo Ahava‘s Blog，他真的是國外一個很強Analytics Developer，很會善用GTM的Variable去做到進階的追蹤。
2. 把UserID存出來並推到GTM的dataLayer
接下來要拿到UserID的值你需要跟前端工程師合作，請他把Username或可識別的值，在user成功登入後，推到GTM的dataLayer（資料層）指定餵給UserID。dataLayer是每一次Trigger一個Tag，GTM傳送hit到GA的地方。以下是一個很基本的範例：
<script>
if (document.location.hostname === 'www.sparkamplify.com') {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'UserID': username // 把工程師存好的值餵給dataLayer裡的UserID，對應到你GA報表裡的custom dimension
});
}
</script>
3. 把ClientID和UserID一起推到GA
上述那三個情境（或還有更多），只要這最後一步設定好，我們即將可以在custom report裡看到許多有趣的用戶數據和足跡！
GTM的邏輯我在安裝教學有提過；當用戶行為觸發一次他就把Tag裡面設定的參數送過去GA；現在我們已經把UserID推到dataLayer、ClientID指定為custom dimension1了，就差臨門一腳把它們送到GA：
備註：
1. cookieDomain和同網域識別同一user有關
2. customTask在這邊你會用剛剛已經建好的JavaScript Variable來把ClientID指定到GA的dimension1
3. Custom Dimension Index是前面你在GA Custom Definitions創的ClientID和UserID的index值，這樣GTM才知道要請GA接收的是哪一個custom dimension～
以上。最後打開custom report，設定可自行調整
save後就可以看到
— — 中場休息 — —
小聊有關過程中與前端工程師的合作
BTW，因為我也不希望前端工程師一直需要處理埋碼的事情，所以整個過程中我只有1. 拔除原有GA代碼、埋新GTM碼 2. 設定推送UserID 3. 最後確認網站class及img alt命名，這三件事我有麻煩前端工程師，其他一概我這邊處理掉。
甚至因為我們的媒體投放平台(就是我家的SaaS啦!)有提供用戶profile的瀏覽數據，前端在串GA資料時也有反過來找我討論，我覺得這樣才是MKT和RD雙方平等的都有貢獻與需要別人的地方：）
如果你看到這裡有任何問題、或覺得很難懂想給我一點寫作建議XD 或希望我可以寫什麼主題的文章，歡迎到這裡快速發問！https://goo.gl/forms/VlEucCZfkKh9KzKJ3
4. 呈現：運用Google Sheet下條件產生特定報表
追蹤環境設定好以後，我們放心的引流量進網站。一段時間後，GA裡面可以數據對吧，只不過如果想同時看到哪些用戶有點擊或到過哪個pagePath，沒辦法一次在一個頁籤裡看到。
有一個辦法是用剛剛的custom report，可以自訂呈現的欄位；但老實說在GA介面來回按來按去調整蠻麻煩的，如果有多個報表要觀察，還得不斷切換。
因此我想推薦希望工作更有效率的人用Google Developers的Analytics spreadsheet add-on。啟動方式很簡單，點進Add-ons的取得外掛程式，把Google Analytics弄進來即可，設定好以後也是從Add-ons裡面按run report。
不要看這密密麻麻就退縮，你看每個的條件其實也沒差很多；如果你有5個報表要每天規律跑，只要設定好一次，以後就直接到這邊來看。而且它比GA custom report可設定出現的欄位和篩選條件更多。
每跑一個報表它會幫你額外開一個同名頁籤（不用自己開它會自動產生）；還可以設定每小時在該頁籤裡面自動刷新數據。
Google Analytics spreadsheet add-on支援GA API的參數，這邊簡單解釋下Configuration Options的欄目：
- Metrics：指的是特定scope下產生的數據，譬如平均停留時間(ga:avgTimeOnPage)、事件次數(ga:eventValue)、session數量(ga:sessions)等。
- Dimension：指的則是文字型的欄位，譬如造訪頁面路徑(ga:pagePath)、透過哪個廣告或電郵發送而拜訪網站的(ga:campaign)、日期時間(ga:dateHour)等
- Sort：是指排序依據，譬如以日期從小到大，加了”-”在前面代表反過來，用大到小排列(-ga:date)。
- filter：篩選。譬如只篩出有到過特定子網域的用戶(ga:hostname==’app.sparkamplify.com’)，可搭配regex（正規表達式）查詢。
鼓勵你用圖上條件試試看，把自己GA帳戶的數據弄到自己的GoogleSheet上。
5. 呈現：運用Data Studio拉即時Dashboard
後來我覺得還是必須找一個地方，不僅能自動更新、自定義想要顯示的數據之外，也可以簡單拉介面來幫助團隊探索數據。GA雖然也有內建Dashboard，但介面太沒彈性啦，而且跑得很慢！（抱歉阿GA）。
因緣際會下發現Google Data Studio，我都叫他「GA界的Tableau」，因為它可像Tableau一樣匯入資料、透過欄位選取來安排視覺化呈現。只不過Data Studio更方便是他幫你把GA的連結繫好了，你只要選擇想匯入的VIEW，後續就專注在欄位的選擇和filter上。
這邊就比較偏視覺化了，有點跳出Tracking的範圍，但我覺得好的Web Analyst是要可以讓團隊輕鬆知道用戶對網站反應如何的！而且也要懂得幫自己節省時間XD 把重心放在獲取用戶（因為很初期的新創，其實是不會針對網站分析開一個職位，通常就是MKT要自架XD）
比起其他的視覺化工具，Data Studio又更適合GA數據使用，因為它幫你省掉你匯出GA data再自己整理的時間了。如果你會想要看到Data Studio的教學文，可以花10秒提交下面的表單告訴我～或是自己try try看。（我那時一個下午就弄好兩三頁Data Studio的界面了，跑很慢的GA的Dashboard我弄了一上午弄不到我理想的樣子==）
P.S. Google Data Studio 也可以自行匯入csv、或同個帳戶下的Google Sheet
文章出處
JiunYi Yang (Abao)
Master@NCCU MIS | Data Analyst@Tagtoo AD 塔圖廣告科技。熱衷於 用戶行為數據分析 / DA, AI在行銷, 銷售的應用 / GA / GTM / 數位廣告投放，定期分享筆記與洞察想法。 合作歡迎來信: [email protected] (通常1~2天回覆)
About Post Author
