【GTM 心得分享】如何追蹤活動流程 | 以聖誕節特別企劃為例

Hello，大家新年快樂！春節年間回老家彰化，除了平常吃吃喝喝，也因為實在閒來無事，心想該來記錄之前的一些學習歷程與心得。

今天要分享的是，身為一個愛好數位工具的宅宅，我用 Email、Weebly 建了一個聖誕節特別企劃 — 「兌換券贈送活動」，在聖誕節期間贈送給女朋友，讓他透過簡單的流程獲得兌換券。而我也利用 GTM 在網站埋設GA追蹤碼、事件追蹤來確認女友是否有成功完成整個流程。

聽起來有點多此一舉的流程，需要執行以下三個程序：

製作 Email ：我參考 Really Good Emails 的 HTML 架構，動手做了一封陽春的信
製作 Landing Page：點擊信件後的到達頁，我使用的是 Weebly，它可以讓使用者自行增減程式碼。而且是中文版，使用起來也容易上手。
埋設追蹤碼：為了追蹤開信、點擊、兌換券下載動作，我在網頁埋入了Google Tag Manager 及 Google Analytics (以下簡稱 GTM 及 GA) 追蹤碼來協助

由於在 Email 設計及 Landing Page 製作上實在是實力不足，這次主要會著墨在追蹤流程的設計，主要使用 GTM 及 GA 兩項工具：

先來簡單介紹 GTM 跟 GA 是什麼

GTM 跟 GA 都是 Google 推出的產品， GA 是網站流量蒐集及分析工具，能幫助網站經營者了解網站訪客在網站上的行為；而 GTM 是代碼管理工具，能幫助管理第三方行銷工具的 Javascript 程式碼。

聽起來有點難理解，但結論是：

先把 GTM 的程式碼安裝到網站上就對了！

以實務經驗來說，工程師只要將 GTM 程式碼安裝上去，後續行銷人員或非工程技術人員都可以直接透過 GTM 的介面，插入其他工具的程式碼，真的非常方便。

第一步、先來安裝 GTM 到網站吧

當時在製作聖誕兌換券時，我先到 Weebly 建了一個 Landing Page。接著我便去取得 GTM 程式碼 ( 第一次使用需要先做註冊 )，GTM 會請你將兩段程式碼分別安裝到 <head> 跟 <body> 。

接下來進到 Weebly 的操作介面，點選上方的「主題」，接下來再點擊左下方的「編輯 HTML/CSS」，即可進入程式碼編輯器介面。

進入編輯器頁面後，先點選左上方的 header.html ，將下來將兩段程式碼放入 <head> 和 <body> 兩個標籤內，最後按下儲存，就完成 GTM 程式碼的安裝了。

第二步，利用 GTM 安裝 GA追蹤碼吧

為了要利用 GTM 安裝 GA 追蹤碼，我們需要先到 GA 後台找到一組獨立的追蹤 ID，在註冊完成後可以到左下角的管理→追蹤資訊→追蹤程式碼，並把上方的追蹤 ID 複製下來。

接下來到 GTM 操作介面的左下方，點選「變數」→新增變數，我們將變數類型設定為 Google Analytics (分析)設定，並將剛剛取得的 GA 追蹤 ID 複製至追蹤編號。

接下來也是到左方工具列，點選「代碼」→選取代碼類型「通用 Analytics (分析)→追蹤類型選擇「網頁瀏覽」→ Google Analytics (分析) 設定選取剛剛設定的變數名稱(我是設定為 GA 追蹤碼 )。

接著新增下方的觸發條件，選擇 All Pages，命名完這個代碼按存檔後，就順利將 GA 追蹤碼埋入網站內了。

第三步、來追蹤開信、點擊及下載吧

花了許多篇幅分享當初怎麼設定追蹤方式，接下來要分享這次的驚喜是怎麼做追蹤。由於當時設計的流程是：

寄送 Email → 點擊 Email 內按鈕 → 抵達 Landing Page → 點擊下載兌換券

因此我需要知道三個指標數據：開信(Email)、點擊(信內按鈕)、下載(獲得兌換券)

開信追蹤方式

首先我在信件前面以 <img>標籤插入此段語法

http://www.google-analytics.com/collect?v=1&tid=UA-XXXXXXXX-1&cid=CLIENT_ID_NUMBER&t=event&ec=email&ea=open&el=cardtosally_id&cs=newsletter&cm=email&cn=2017_11_30_sent_card_to_sally

這邊說明一下此段語法的幾項重點：

tid ：需輸入 GA 的追蹤 ID

ec：事件類別，我通常都是放此項動作的來源，例如 email

ea：事件動作，我通常都是放此項動作的描述，例如 open

el：活動標籤，描述此事件，例如 cardtosally_id

加入此段語法後，若收信者打開 Email，便會觸發此段程式碼，並記錄到 GA 裡。我們可以從 GA 的「行為」→「事件」→「熱門事件」找到事件類別為 email ，事件動作 open ，活動標籤為 cardtosally_id 的事件數。

2. 點擊追蹤方式

為了知道精心設計的信有沒有順利引導開信者連至 Landing Page ，這時就要在下方的按鈕連結做點手腳。因為是從站外連結至站內，我們需要讓網址帶有 UTM 參數。

UTM 簡單來說就是在網址沾上螢光顏料，當進入網站後我們便可以分辨這個使用者的來源。那要怎麼設定 UTM 參數呢？首先我們先到 Google url builder ，接著將你要連結的網址、Campaign Source ( 活動來源 )、Campaign Medium ( 活動媒介 )、 Campaign Name ( 活動名稱 ) 設定好， Google url builder 就會幫你生成一串帶有 UTM 的網址。