對於所有行銷人來說,追蹤來自不同廣告渠道的成效是日常工作的一部分,但偏偏不同廣告渠道又都有自己的轉換追蹤碼要安裝,如果不想要每安裝一個追蹤碼就麻煩工程師一遍,這時候使用一個好的代碼管理工具就能幫雙方都節省很多時間與精力。其中免費又強大的 GTM (Google Tag Manger)就成為很多行銷人與工程師的愛用工具啦!
今天這篇文章主要和大家分享該怎麼透過 GTM 來安裝 Facebook 像素以及標準轉換事件,安裝好你想追蹤的轉換事件後,從重點網頁瀏覽,註冊,加入購物車,到結帳,不只在報表中可以看到各階段的數字來算出流失率強化購物流程,更可以進行後續以轉換為目標的廣告活動,並且建立相對應的自訂受眾,做更精準的行銷。
由於篇幅有限,假設大家都已經正確安裝了 GTM(如果對於這部分有問題可以參考, Google Tag Manager 從入門到進階課程), 而為了要能正確追蹤 Facebook 廣告成效,首先當然是要正確設定並安裝 Facebook 像素碼在網站的每一個頁面上。
在廣告管理員後台的資產這個項目下,可以找到像素這個選項
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e43061cfe6e_5bc0e1c73a82f2de71aaea7a_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.10.04-600x149-1.png?w=800&ssl=1)
點進去後,沒有設定過像素的人,就會出現這個畫面
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e21461cfe72_5bc0e1f42b6d477162e2d538_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8811.00.02-600x265-1.png?w=800&ssl=1)
按下設定像素後,選擇「使用整合或標籤管理員」
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e07881cfe69_5bc0e21dc28f3eb418f904c5_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.21.43-600x431-1.png?w=800&ssl=1)
並選擇 「Google 代碼管理工具」
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302eadbe1cfe83_5bc0e24331521a66814af3f7_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.21.56-600x394-1.png?w=800&ssl=1)
接下來就會出現一個很詳細的流程說明,教你三步驟跟著做,就能正確的安裝像素。
新增代碼,選擇自訂HTML,並複製貼上你的 Facebook 像素基底程式碼
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ee2741cfe64_5bc0e26cb3eb8262b27d158b_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.22.09-600x297-1.png?w=800&ssl=1)
接下來就是在代碼下的進階設定中,代碼啟動選項這邊要設定每個網頁一次,原因是即使送多次,也只會被當作一次,除非有不同的參數設定,才會被加總計算。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ef0491cfe62_5bc0e2953a82f2ac23aaec56_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.22.16-600x279-1.png?w=800&ssl=1)
觸發條件設定好在每一頁都會觸發 (All Pages),這樣就完成了第一步!
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e85751cfe9b_5bc0e2baa08a5650ddfff2c4_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.22.43-600x422-1.png?w=800&ssl=1)
為了要能針對轉換最佳化,可以向曾經在我們網站上消費或類似的的用戶投放廣告,以及進一步的追蹤廣告帶來的成效與收益,安裝事件追蹤碼是非常必要的,Facebook 有預先定義的九種標準事件如下,現在並新增基本、推薦,以及進階三種版本可供選擇,如果以下不敷使用,想要追蹤更細的分項,便可使用自訂轉換。要注意,每個廣告帳號可用的自訂轉換數目上限是 40 個,且動態產品廣告無法使用自訂轉換。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e3dc31cfe87_5bc0e2e1a08a565066fff30f_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.28.54-600x576-1.png?w=800&ssl=1)
為了簡化說明,我們以查看內容的基本版本為例,和之前 basecode 一樣,先新增代碼,選擇自訂 HTML, 然後複製貼上查看內容的事件代碼,並在前後加上 script 的起始標籤以及結束標籤。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ecedf1cfe8f_5bc0e311b3eb8220737d1641_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8811.23.48-600x217-1.png?w=800&ssl=1)
接下來就是在代碼下的進階設定中,代碼啟動選項這邊要設定每個事件一次。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ef0491cfe62_5bc0e2953a82f2ac23aaec56_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.22.16-600x279-1.png?w=800&ssl=1)
最重要的是下面的代碼觸發順序部分,勾選在這個事件代碼啟動前先執行之前設定好的 Facebook 像素基底程式碼( Basecode),這個事件代碼才會順利被執行。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e08881cfe84_5bc0e377b3eb8210a17d165c_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.29.17-600x147-1.png?w=800&ssl=1)
假設我們要追蹤所有產品頁面的瀏覽行為,所以我設定了一個叫做 Product Page 的觸發條件,選擇網頁瀏覽為觸發條件類型,以及部分網頁瀏覽作啟動時機。
設定觸發條件啟動時機:
當 Page Path 包含 product/ 的時候會觸發這個事件代碼,要注意的是這邊的設定是要根據你的網站結構,以及你要追蹤的主要頁面來進行設定,無法直接複製貼上。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e1f7d1cfe82_5bc0e3a2a08a56ee99fff37c_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.29.23-600x247-1.png?w=800&ssl=1)
那麼購買,基本上前面也是一樣的程序,先新增代碼,選擇自訂 HTML, 然後複製貼上加到購物車的事件代碼,這邊要注意的是通常我們都希望在交易的頁面直接取得該筆成交金額,才能衡量廣告投資報酬率(ROAS),但是這邊能夠抓取的資料需要先請工程師在適當的網頁將訂單資料透過 dataLayer 變數或者自訂 Javascript 變數,在網頁被讀取過後,透過變數將資料傳遞給 GTM ,接著在代碼帶入變數即可取得資料。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e3aa81cfe6c_5bc0e3d034377773091ba914_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.54.40-600x226-1.png?w=800&ssl=1)
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e003e1cfe85_5bc0e3fdc28f3e11aff90768_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.56.01-600x341-1.png?w=800&ssl=1)
得考量到訂單資料被推送到 dataLayer 的時間點,假如在 GTM 容器程式碼被讀取以前(網頁瀏覽事件), 訂單資料已在 dataLayer 準備好,即可選擇網頁瀏覽類型,否則可能得選擇 dom Ready 或者 視窗已載入。
設定觸發條件啟動時機:
假如訂單付款後會重新導向到 thank you page 這一頁,我們即可設定 Page Path 包含 thankyou 的時候啟動 Pixel代碼,一樣要注意的是這邊的設定值是要根據你結帳後的頁面網址來進行設定。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ebc5f1cfe6b_5bc0e43631521ae55e4af591_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.57.49-600x198-1.png?w=800&ssl=1)
以一樣的邏輯可以設定其他的標準事件在相對應的頁面做觸發,那要記得在標準事件都設定好之後,使用偵錯模式(preview mode)確定每個頁面及事件都有被正確觸發後,請記得按下發佈,才會正式啟用我們所設定好的所有標籤。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e93cd1cfe70_5bc0e4540ae4f34fb6af0acd_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.43.24.png?w=800&ssl=1)
要如何檢查自己的像素有無正確安裝呢?有兩種方法,一種可以直接前往 Facebook 廣告管理員選擇像素,如果狀態是 Active ,就表示有正確安裝,這個部分正確安裝後 20 分鐘內就會顯示。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302e4cd91cfe9d_5bc0e4710ae4f3bda1af0ad9_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.29.42-600x253-1.png?w=800&ssl=1)
另一種是安裝 Facebook Pixel Helper 的 Chrome 外掛,便可以偵測哪個頁面有成功安裝哪些 Facebook 像素。
![](https://i0.wp.com/tw.alphacamp.co/wp-content/uploads/2022/12/60d29cc33f302ea7761cfe90_5bc0e495e83499e15a8ec661_E89EA2E5B995E5BFABE785A7-2016-12-14-E4B88AE58D8810.33.20-600x514-1.png?w=800&ssl=1)