如何使用GTM安裝Facebook Pixel?給行銷人的入門教學

相信從事行銷工作的讀者大概都聽過 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 ,就知道他們會分析使用者的走向,從哪裡進來、哪裡出去,追蹤碼就像下方圖二,是個收票站的大門,每個使用者都必須通過這些大門,才可以記錄是誰拜訪了你的網站。(下圖就是我們常複製在網站中的追蹤碼,千萬別被它恐怖的英文外貌被嚇到了。)

FB Pixel原始碼

(圖一)  追蹤碼


不過每個工具使用方式都不相同,所以也會有不同的追蹤碼,舉個例子來說,電影的大門和遊樂園的不可能是一樣的門。如果沒有在網站設置這樣的大門,就沒辦法知道到底誰來過你家。認識了什麼是工具追蹤碼後,接著我們要進入 GTM 的介紹,並示範如何建立 FB Pixel 的追蹤碼,讓我們繼續看下去!
延伸閱讀:GA 追蹤碼安裝教學,多做這個步驟日後不用捶心肝

追蹤碼大門

(圖二)  追蹤碼大門


 

認識 Google Tag Manager

你可能聽過很多有關 GTM (Google Tag Manager) 的傳聞,例如 Tag、觸發條件、變數等,這些看起來很專業的專有名詞,不過簡而來說,GTM 是個收納盒,我們可以把剛剛提到的所有工具追蹤碼都丟到這個箱子裡,GTM 就會負責把這些追蹤碼彙整起來,一次幫你一起送到你的網站,讓你不用每次都要安裝追蹤碼,並一個個輸入追蹤碼到網站裡。聽起來是不是簡單多了?就像你搬家如果有了箱子就會變得簡單又方便,GTM 也是同樣的道理。
 

GTM安裝的好處

(圖三) GTM 就像收納盒,一次全包辦


 

為什麼要用GTM管理Google Analytics和FB Pixel的追蹤碼?

聽完了 GTM 的介紹,如果還是不知道 GTM 哪裡厲害或好用,以下舉個例子:
假設你的公司要換新的網站,為了追蹤新網站來源,所以需要馬上使用 Google Analytics 或是 FB Pixel 來監測,看看每個產品或服務的績效。
問題一:如果你會設置追蹤碼,許多工具的追蹤碼都需要重新申請和設置,是不是有點麻煩?
問題二:如果你不會設置追蹤碼,肯定需要請工程師來幫忙搞定。假設一次需要 500 元,如果你有十個追蹤碼,每次都要請工程師來,那就要 5000 元了!(5000 元都能喝 100 次五十嵐的 8 冰綠了,還是大杯的)

GTM安裝更簡單

(圖四) 設定多次追蹤碼 V.S 設定一次追蹤碼


結論:如果這些時間耽誤了監測重要行銷數據,漏掉了重要的關鍵分析,那勢必是一大的損失。(而且你會的技能、別人不會,請你會對公司更加分,還不用找工程師),所以如果能只設定一次,並自己可以管理追蹤碼,這樣的好處還能不學起來嗎?所以,現在就讓 awoo 來教你如何完整設置 GTM!

如何埋GTM在Facebook Pixel裡?圖解安裝三步驟

了解完 GTM 的重要性後,你還要知道怎麼安裝 GTM 、怎麼將工具追蹤碼設置在 GTM 中。這些流程聽起來後複雜,但實際上跟著我們一起手把手的安裝就可以囉!

GTM完整安裝流程

(圖五) 設置 GTM 完整安裝流程圖

安裝你的 GTM (Google Tag Manager)

(1)   首先打開 Google Tag Manager 代碼管理工具 的網址。
(2)進去後,登入 Google/Gmail 的帳號。如果沒有,先留著這個網頁 (千萬別離開),申辦一組後再回來。
(3)當你登入好後,你會看這下圖這個畫面,按下 [建立帳戶]。
GTM建立帳戶(4)準備要建立你要管理的帳戶。

  • 帳戶名稱:一個你喜歡的可愛名稱
  • 國家/地區:選擇你的國家
  • 容器名稱:就是輸入你的網站
  • 目標廣告平台:看你的平台是哪種,網站通常是網路最後,按下 [建立]。

GTM新增帳戶設定
(5)建立完,你會拿到像下圖的原始碼,再把 GTM 的追蹤碼放入到你的網站原始碼中。總共兩段,分別放在原始碼的 <head>,<body>
GTM追蹤碼
(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。
FB像素安裝位置
(2)登入後,在 [事件管理工具] 找到 [像素] 後,點選:
FB像素位置
(3)到這個畫面,按下 [建立像素] 
FB像素建立
(4)給你的像素取個名字,還有放入你的網站,再來按下 [建立]
像素建立
(5)你會看到三個選項,若要放入到 GTM,選取第二個 [自行手動安裝]。
FB Pixel 手動安裝
(6)第一部分是 FB Pixel 給的範例,請直接無視他 。因為我們要放到 GTM ,感受 GTM 統一管理的好處第二部分紅色框框才是我們要的像素追蹤碼,把他複製下來,等等貼到我們的好用 GTM 裡。不過貼心提醒:記得要複製、複製、複製!
FB Pixel追蹤碼

新增你的工具追蹤碼在 GTM 中

接下來是重頭戲:將 FB Pixel 設置在 Google Tag Manager!
(1) 回到剛剛你建立好的 GTM 工具 (網址在這:Google Tag Manager 代碼管理工具),看到 [新增代碼],給他按下去。
GTM新增代碼
(2) 先選擇 [代碼設定] ,再點擊 [選擇代碼類型] >  [自訂 HTML] (有許多代碼類型,但沒有 FB Piexl 的格式,所以我們要自訂)。剛剛特別強調過、在 FB Pixel 裡複製的追蹤碼,貼到 HTML 裡。
GTM代碼類型設定

(3)貼完後,點選 [觸發條件] (紅框) 進行設定 > 選擇 [All Page],就能每一頁都觸發追蹤碼了!但如果你想針對某些轉換,記得自己設定另外的程式碼。
GTM觸發條件設定
 
(4)設定完後,按下右上 [儲存],並給他一個可愛的名稱,顺利儲存。
設定GTM版本名稱
 
(5)如果不知道有沒有設定成功,也可以先點選 [預覽],進入 [正在預覽工作區] 模式。
GTM預覽模式
GTM預覽模式
 
(6) 此時,在同一個瀏覽器直接開新分頁 (記得不要開無痕),並輸入你設定的網站,就能看到下方出現 GTM 的區塊,並檢查是否安裝成功囉。
GTM檢查方式
 
(7)確認沒問題的話,你可以離開預覽模式,回到新增代碼的頁面。你會看到右上方的 [提交] ,按下去:
GTM提交
(8)輸入你想要的名稱和說明,以便以後檢視。按下 [發佈] 即可完成。
GTM版本名稱和說明
如果你跟著我們的腳步順利走到這邊,恭喜你完成已經整個 GTM 的設置了!恭喜又學會了一項新技能!最後來個 bonus,分享一個安裝 WordPress GTM 的捷徑:

WordPress GTM 捷徑安裝法

(1)先開啟 WordPress,在安裝外掛裡搜尋「GTM」,會看到很多外掛。今天就介紹下圖第一個外掛: Google Tag Manager for WordPress。安裝好後,按下啟用然後會看到 [設定],按下 [設定]。
wordpress-GTM
(2)外掛設定

  • 來到設定畫面,你會看到兩個你要設定欄位,和最下面設定完會出現的php原始碼
  • 第一個容器 ID:你一定會問哪裡來的 ID?回到您去申請 Google Tag Manager 代碼管理工具,如下圖 GTM 追蹤碼-容器 ID,這時候你只要找到文字中 GTM-xxxxxxxx,像紅色框框的地方,填入那個 ID,定且按下自訂,你會看到上圖,會給你一個追蹤代碼。
  • 第二個容器代碼位置:選擇自訂。
  • 最後複製第三個色框框的 php 原始碼

GTM wordpress外掛

GTM容器ID

GTM追蹤碼-容器ID


(4)這時候打開你的佈景主題編輯器,找出 <body> 的位置,放入你剛剛複製的代碼,儲存完就完成了。
原始碼<body>
恭喜你完成 WordPress GTM 外掛的安裝了!其實和 GTM 原本的安裝程序類似,但如果習慣用外掛的人,可以嘗試看看。

看完這篇,行銷人也能自己安裝 GTM! 

事實上剛開始安裝 GTM、將所有追蹤碼放入 GTM 進行管理,可能會花你一些時間,尤其是剛接觸到程式碼的行銷人,不過當你越來越厲害,用過更多的工具分析,除了會使用工具,更建議從頭了解安裝程式碼的意義,並將安裝工具的能力也收編,誰說行銷人不能當工程師,自己的工具自己管!
看完本篇,是否覺得離工程師更接近一點了?
延伸閱讀:寫給程式麻瓜的 JavaScript 基礎介紹,跟工程師溝通零障礙