用GTM做簡單的Facebook轉換追蹤!

Jean Hsieh
Aug 22, 2019 · 7 min read

第一集,認識GTM 與Pixel Code.

GTM (Google Tag Manager)是許多人熟悉但又陌生的詞彙,常常會在你耳邊不斷聽見,但你可能幾乎沒有什麼機會去使用到它,那GTM使用起來到底困不困難呢?今天CFM就帶大家來簡單用『安裝Facebook』轉換追蹤帶大家簡單認識一下GTM的結構吧!

活動分享!

行銷實戰力第二期開跑囉!本期將會再次帶大家走入更深的GTM, Google Optimize , Google Analytics,帶大家深入了解這些超實用的工具!

9/3 號前報名還享有超級優惠喔!~

活動報名網址:https://www.accupass.com/event/1908261248367957937870

GTM 的基本架構:

GTM概念圖

GTM 基本上是透過三個部分構成-

Tags — 標籤:層級最高,可以在標籤這層嵌入想要觸發的代碼。

Trigger — 觸發機制:層級中間,在這個層級設定觸發的邏輯&機制。

Variables — 變數:三者之中層級最低,參與觸發的邏輯元素。


(GTM運作的邏輯示意圖)
  1. GTM本身其實就是一個容器,為了要讓這個容器運作,我們要將GTM的SDK追蹤碼(跟Facebook Pixel 很像的東西)埋入要使用GTM的頁面,通常會是全站。
  2. 埋入後,在沒有透過其他設定的條件下,每當頁面被瀏覽GTM就會啟動,但只是GTM這個『容器』被啟動,就好像是把電腦『開機』但不執行任何程式的『待機』狀態。
  3. 將我們需要使用的『工具的追蹤代碼』放入GTM裡,並設定觸發的機制,當達到此條件時,GTM便會啟動該『工具』。

Step 1. 取得Facebook Pixel 代碼。

進入Facebook 廣告帳戶 > 點選左邊選單下方的 All tools > 點選Pixel 後會看到以下畫面:

(Pixel 取得畫面)

2.點選下方藍色的觀看設定辦法(view set up instruction)後,會進入選擇如何安裝Pixel的方法。

(Pixel 安裝教學畫面)

在這邊簡單跟大家分享一下!Facebook的建議安裝方法一共分為三種方式:

  1. 連結到Partner的Platform : 也就是透過第三方的工具來執行安裝,這邊指是透過像是GTM等等其他非Facebook的工具。
  2. 人工埋入代碼:直接手動埋入代碼到網頁上。
  3. 聯繫你的工程人員:把追蹤代碼寄給你的工作人員。

Step 3. 點選畫面後,會看到視窗內的步驟二提供了一段程式碼,這段就是我們Facebook的Pixel的追蹤代碼!

(Facebook Pixel Code 的樣板)

(右手邊- Tag的地方)

5–1點擊Tag後會出現上面的畫面
5–2 點選Custom HTML


但在這邊有幾個小地方要注意!

Facebook 的pixel Code 其實分為兩個東西:

ㄧ個就是上方我們所看到的程式碼(上方的Pixel Code),而另外一段則是下方的程式碼:

  1. 基底程式碼:基底程式碼是用來追蹤瀏覽人次、page view等等基本事件,而透過這組代碼搜集的資訊可以應用到廣告的Regarteting !在行銷廣告喔!
  2. 事件程式碼:事件程式碼則是用來追蹤『標準事件』以及『自訂的事件』,至於什麼是標準事件、什麼是客製化事件呢?其實標準事件就是Facebook所歸納的一些常被追蹤的『行為』,例如:『點擊』、『加入購物車』等等,當然他也保留了讓大家使用自訂的可能性,這邊未來會再跟大家多做說明!

所聽到這裡你大概聽明白了,你可以把『基底程式碼』當成程式碼的本體,而『事件程式碼』則是配件,如果只埋入了『事件程式碼』Facebook是不會拿到有關事件的資料,傳遞這些資料需要透過基底程式碼來進行喔!

也因此通常我們會在所有頁面都埋入這段pixel code,並在對應的頁面埋入事件代碼並透過GTM進行觸發,再把資料透過基底程式碼回傳到Facebook的廣告後台囉!

至於事件代碼的追蹤設定我們下回再跟大家分享!


8. 完成後點選右上方的保存後,點選測試,畫面會重新reload ,最後回到網站上,檢查Tag 是否已經被Fire !

(8–1 點選,預覽模式 Preview Mode)

如果你看到Facebook Pixel 出現在 “Tags Fire on This Page”的地方,則表示你的Tag被成功啟動囉!


Step 9. 最後回到你的GTM ,發布此Tag ,並在回到你網站上,使用Facebook Pixel 的外掛Facebook Pixel Helper 檢查你的Facebook Pixel 是否有被啟動,如果看到他正常啟動那就表示FB能夠正常接收你的資料囉!


那麼以上就是第一集的內容,接下來我們會帶大家更深入認識如何將『轉換價值』傳回到Facebook後台吧!


行銷實戰力第二期開跑囉!本期將會再次帶大家走入更深的GTM, Google Optimize , Google Analytics,帶大家深入了解這些超實用的工具!

9/3 號前報名還享有超級優惠喔!~

活動報名網址:https://www.accupass.com/event/1908261248367957937870

CodeForMarketing — 小編群。

CodeForMarketing 行銷工程學人

從行銷角度看工程,用工程思維解決那些工程難題

Jean Hsieh

Written by

CodeForMarketing 行銷工程學人

從行銷角度看工程,用工程思維解決那些工程難題

More From Medium

More on Google Tag Manager from CodeForMarketing 行銷工程學人

More on Google Tag Manager from CodeForMarketing 行銷工程學人

Google Ads新手入門指南

Related reads

Related reads

What Is Art?

61

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