JiunYi Yang (Abao)
Jan 21, 2018 · 14 min read

這篇文要記錄一下我導入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,好讓你知道流量是否有浪費掉、作為優化的依據

它很重要,因為沒有這些依據,你會不知道往哪邊去改進東西。

除了大家最常提的註冊或購買轉換;我自己看會分兩種目的 — —

  1. 內容優化型,譬如像單個頁面的停留時間、觀看區塊的時間及點擊。
  2. 流程加強型,譬如從一個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真的好管理非常多了!!而且它還可整合hotjarcrazyeggFB Pixel等常用追蹤工具。我覺得他有幾個好處可以善加利用一下:

  1. Tag命名及自建資料夾:意思跟Google Drive上的檔案一樣,可命名可自建資料夾管理。要跟團隊定義好你們命名的邏輯是什麼,交接的時候傳下去比較不容易搞混或找不到Tag。(因為我一個人弄啦所以這部份如果團隊一起用GTM時有什麼更好的建議歡迎留言給我~~)
  2. 匯出/入container:在管理員頁面可以選擇不同版本的GTM設定匯出成json檔!然後你想要再import到其他帳戶都隨你開心(要小心選擇覆蓋與否的選項)
  3. 讓Tag暫停生效:如果你在測試不同的Tag,但不想把紀錄刪掉(因為裡面可能是你的js code之類的,重build麻煩),在Tag內頁的右上角可以選”pause”,這樣它在當前網站不會被觸發。

3. 設定User Identify

在GA的User Explorer裡可以看到不同的訪客(ClientID)、點進去可看到它不同時間點做了什麼事情;但麻煩的是你要一直點開、還不能互相比較;而且無法在裡面把它跟UserID綁在一起看

"何時我覺得Web Analysis活出了新生命?就是當我可以把ClientID和UserID綁在一起追溯的時候XD"

它不再只是一張總覽表、一張地圖、幾個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

  1. 在GA及GTM中新增變數

在GA Custom Definitions裡新增兩個 new custom dimension,分別叫ClientID及UserID,這是為了你在GA裡能叫出這兩個dimension。

custom definitions在PROPERTY最下面可以找到~

接著在GTM的Variable頁籤中新增兩個變數,分別取名叫"UserID”及"Set ClientID in Dimension 1"

UserID的Variable設定
這段JS code是要將原本GTM就會傳給GA的ClientID,把它的值轉到custom dimension1,這樣待會才可以在custom report裡呼叫它

這段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:

Sent CID & UID to GA Tag的設定
備註:
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後就可以看到

UserID完全只有公司內部追蹤使用,不對外公開或透過url傳送;這邊擋掉私人資訊截圖出來只是為了讓大家知道可以這樣呈現。

— — 中場休息 — —

小聊有關過程中與前端工程師的合作

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的欄目:

  1. Metrics:指的是特定scope下產生的數據,譬如平均停留時間(ga:avgTimeOnPage)、事件次數(ga:eventValue)、session數量(ga:sessions)等。
  2. Dimension:指的則是文字型的欄位,譬如造訪頁面路徑(ga:pagePath)、透過哪個廣告或電郵發送而拜訪網站的(ga:campaign)、日期時間(ga:dateHour)等
  3. Sort:是指排序依據,譬如以日期從小到大,加了”-”在前面代表反過來,用大到小排列(-ga:date)。
  4. 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上。

上面的表格和filter都是可以自己拉的。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


文章最後再次提醒XD 如果有任何問題、或改進建議、或希望我可以寫什麼主題的文章,歡迎在這裡快速提交!

Conversion Lab 數位廣告研究室

數位廣告新知、操作心得分享、數據分析筆記、網站追蹤分析筆記

JiunYi Yang (Abao)

Written by

數位廣告投放 / Google Analytics / Python Data Analysis。@塔圖科技 Tagtoo AD

Conversion Lab 數位廣告研究室

數位廣告新知、操作心得分享、數據分析筆記、網站追蹤分析筆記

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade