相信從事行銷工作的讀者大概都聽過 Google Analytics、FB Pixel、Google ads 轉換追蹤、Google Optimize、Mixpanel 等,這些好用的行銷分析工具。如果你還不知道GA,不妨先看看 Google Analytics 教學,第一次看介面就上手、認識 GA 內的「事件(Event)」:學會這個功能才算開始使用 GA! 這些文章來了解一下 GA 的必懂知識;如果你對 Google ads 有興趣,可以參考 找出關鍵洞察,廣告主必看的 Google Analytics三大報表,來了解如何融會貫通 GA 和 Google ads。
假如這些工具都已經了解,你知道使用這些工具前,要先在每個網站的原始碼中設定追蹤碼,才能使用嗎?設定完成後要如何簡單管理這些複雜的追蹤碼?今天 awoo 要教你:只要設定一次 Google Tag Manager ( GTM ) 就能設置多個追蹤碼,讓你不用天天打開原始碼,自己也能搞定這些工具!
延伸閱讀:使用 GTM之前,先認識 Google Tag Manager中的代碼、觸發條件與變數
Google Tag Manager(GTM)是什麼?
認識Google Analytics、FB Pixel 追蹤碼
在了解 GTM 前,先一起來認識所謂的工具追蹤碼。如果你使用過 Google Analytics 和 Facebook Pixel ,就知道他們會分析使用者的走向,從哪裡進來、哪裡出去,追蹤碼就像下方圖二,是個收票站的大門,每個使用者都必須通過這些大門,才可以記錄是誰拜訪了你的網站。(下圖就是我們常複製在網站中的追蹤碼,千萬別被它恐怖的英文外貌被嚇到了。)
不過每個工具使用方式都不相同,所以也會有不同的追蹤碼,舉個例子來說,電影的大門和遊樂園的不可能是一樣的門。如果沒有在網站設置這樣的大門,就沒辦法知道到底誰來過你家。認識了什麼是工具追蹤碼後,接著我們要進入 GTM 的介紹,並示範如何建立 FB Pixel 的追蹤碼,讓我們繼續看下去!
延伸閱讀:GA 追蹤碼安裝教學,多做這個步驟日後不用捶心肝
認識 Google Tag Manager
你可能聽過很多有關 GTM (Google Tag Manager) 的傳聞,例如 Tag、觸發條件、變數等,這些看起來很專業的專有名詞,不過簡而來說,GTM 是個收納盒,我們可以把剛剛提到的所有工具追蹤碼都丟到這個箱子裡,GTM 就會負責把這些追蹤碼彙整起來,一次幫你一起送到你的網站,讓你不用每次都要安裝追蹤碼,並一個個輸入追蹤碼到網站裡。聽起來是不是簡單多了?就像你搬家如果有了箱子就會變得簡單又方便,GTM 也是同樣的道理。
為什麼要用GTM管理Google Analytics和FB Pixel的追蹤碼?
聽完了 GTM 的介紹,如果還是不知道 GTM 哪裡厲害或好用,以下舉個例子:
假設你的公司要換新的網站,為了追蹤新網站來源,所以需要馬上使用 Google Analytics 或是 FB Pixel 來監測,看看每個產品或服務的績效。
問題一:如果你會設置追蹤碼,許多工具的追蹤碼都需要重新申請和設置,是不是有點麻煩?
問題二:如果你不會設置追蹤碼,肯定需要請工程師來幫忙搞定。假設一次需要 500 元,如果你有十個追蹤碼,每次都要請工程師來,那就要 5000 元了!(5000 元都能喝 100 次五十嵐的 8 冰綠了,還是大杯的)
結論:如果這些時間耽誤了監測重要行銷數據,漏掉了重要的關鍵分析,那勢必是一大的損失。(而且你會的技能、別人不會,請你會對公司更加分,還不用找工程師),所以如果能只設定一次,並自己可以管理追蹤碼,這樣的好處還能不學起來嗎?所以,現在就讓 awoo 來教你如何完整設置 GTM!
如何埋GTM在Facebook Pixel裡?圖解安裝三步驟
了解完 GTM 的重要性後,你還要知道怎麼安裝 GTM 、怎麼將工具追蹤碼設置在 GTM 中。這些流程聽起來後複雜,但實際上跟著我們一起手把手的安裝就可以囉!
安裝你的 GTM (Google Tag Manager)
(1) 首先打開 Google Tag Manager 代碼管理工具 的網址。
(2)進去後,登入 Google/Gmail 的帳號。如果沒有,先留著這個網頁 (千萬別離開),申辦一組後再回來。
(3)當你登入好後,你會看這下圖這個畫面,按下 [建立帳戶]。
(4)準備要建立你要管理的帳戶。
- 帳戶名稱:一個你喜歡的可愛名稱
- 國家/地區:選擇你的國家
- 容器名稱:就是輸入你的網站
- 目標廣告平台:看你的平台是哪種,網站通常是網路最後,按下 [建立]。
(5)建立完,你會拿到像下圖的原始碼,再把 GTM 的追蹤碼放入到你的網站原始碼中。總共兩段,分別放在原始碼的 <head>,<body>
(6)打開你的網站後台的原始碼,按下 Crt+F(command + F ) 搜尋 head、body 兩個字,會看到 <head>、<body> ,就是下圖橘色框框的地方。把兩段分別放置到各自的正後方,讓你以後比較好找,放好後按下 [儲存]。如果是 WordPress ,則是找到主題編輯器,找出一樣的兩個位置並放入。
恭喜你完成了 GTM 安裝,接下來就可以把其他追蹤碼都放到 GTM 裡,進行管理了。
快速建立你需要的工具追蹤碼,以 Facebook 像素為例
裝好 GTM 後,當然也要申請 Google Analytics 和 FB Pixel 的追蹤碼。先前有寫過一篇Google Search Console 的文章教學, 說明如何申請 GA 追蹤碼,今天來示範 FB Pixel 的追蹤碼申請給大家看。
延伸閱讀:Google Search Console 教學,5 種超完整安裝方法!
(1)首先你如果沒有 Facebook Pixel,要先來像素建立:點選 [像素] 頁籤,登入你的 FB。
(2)登入後,在 [事件管理工具] 找到 [像素] 後,點選:
(3)到這個畫面,按下 [建立像素]
(4)給你的像素取個名字,還有放入你的網站,再來按下 [建立]
(5)你會看到三個選項,若要放入到 GTM,選取第二個 [自行手動安裝]。
(6)第一部分是 FB Pixel 給的範例,請直接無視他 。因為我們要放到 GTM ,感受 GTM 統一管理的好處。第二部分紅色框框才是我們要的像素追蹤碼,把他複製下來,等等貼到我們的好用 GTM 裡。不過貼心提醒:記得要複製、複製、複製!
新增你的工具追蹤碼在 GTM 中
接下來是重頭戲:將 FB Pixel 設置在 Google Tag Manager!
(1) 回到剛剛你建立好的 GTM 工具 (網址在這:Google Tag Manager 代碼管理工具),看到 [新增代碼],給他按下去。
(2) 先選擇 [代碼設定] ,再點擊 [選擇代碼類型] > [自訂 HTML] (有許多代碼類型,但沒有 FB Piexl 的格式,所以我們要自訂)。把剛剛特別強調過、在 FB Pixel 裡複製的追蹤碼,貼到 HTML 裡。
(3)貼完後,點選 [觸發條件] (紅框) 進行設定 > 選擇 [All Page],就能每一頁都觸發追蹤碼了!但如果你想針對某些轉換,記得自己設定另外的程式碼。
(4)設定完後,按下右上 [儲存],並給他一個可愛的名稱,顺利儲存。
(5)如果不知道有沒有設定成功,也可以先點選 [預覽],進入 [正在預覽工作區] 模式。
(6) 此時,在同一個瀏覽器直接開新分頁 (記得不要開無痕),並輸入你設定的網站,就能看到下方出現 GTM 的區塊,並檢查是否安裝成功囉。
(7)確認沒問題的話,你可以離開預覽模式,回到新增代碼的頁面。你會看到右上方的 [提交] ,按下去:
(8)輸入你想要的名稱和說明,以便以後檢視。按下 [發佈] 即可完成。
如果你跟著我們的腳步順利走到這邊,恭喜你完成已經整個 GTM 的設置了!恭喜又學會了一項新技能!最後來個 bonus,分享一個安裝 WordPress GTM 的捷徑:
WordPress GTM 捷徑安裝法
(1)先開啟 WordPress,在安裝外掛裡搜尋「GTM」,會看到很多外掛。今天就介紹下圖第一個外掛: Google Tag Manager for WordPress。安裝好後,按下啟用然後會看到 [設定],按下 [設定]。
(2)外掛設定
- 來到設定畫面,你會看到兩個你要設定欄位,和最下面設定完會出現的php原始碼
- 第一個容器 ID:你一定會問哪裡來的 ID?回到您去申請 Google Tag Manager 代碼管理工具,如下圖 GTM 追蹤碼-容器 ID,這時候你只要找到文字中 GTM-xxxxxxxx,像紅色框框的地方,填入那個 ID,定且按下自訂,你會看到上圖,會給你一個追蹤代碼。
- 第二個容器代碼位置:選擇自訂。
- 最後複製第三個色框框的 php 原始碼
(4)這時候打開你的佈景主題編輯器,找出 <body> 的位置,放入你剛剛複製的代碼,儲存完就完成了。
恭喜你完成 WordPress GTM 外掛的安裝了!其實和 GTM 原本的安裝程序類似,但如果習慣用外掛的人,可以嘗試看看。
看完這篇,行銷人也能自己安裝 GTM!
事實上剛開始安裝 GTM、將所有追蹤碼放入 GTM 進行管理,可能會花你一些時間,尤其是剛接觸到程式碼的行銷人,不過當你越來越厲害,用過更多的工具分析,除了會使用工具,更建議從頭了解安裝程式碼的意義,並將安裝工具的能力也收編,誰說行銷人不能當工程師,自己的工具自己管!
看完本篇,是否覺得離工程師更接近一點了?
延伸閱讀:寫給程式麻瓜的 JavaScript 基礎介紹,跟工程師溝通零障礙