Google Tag Manager 教學(三):如何安裝 Facebook 像素?

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

Facebook 像素有兩個程式碼:「像素基底程式碼」及「事件程式碼」,這一篇兩個程式碼的安裝都會說明。

Facebook 像素其實跟 Google Analytics 很像,像素基底程式碼就是基本的 Google Analytics 追蹤程式碼,而事件程式碼,就像是我們想透過 Google Analytics 來追蹤一些在網站上發生的「動作」,只是 Facebook 事件追蹤主要是用來追蹤廣告效益,轉換追蹤的情境資料,例如:加到購物清單、購買、完成註冊等九種基本事件。

先來看看官方介紹:

您必須先在網站上安裝一些程式碼片段,然後才能使用 Facebook 像素。這些程式碼會將資料傳回 Facebook,然後您才可以衡量活動成效,並根據活動打造更精準的廣告。
您需要安裝兩種類型的程式碼:置於網站所有頁面的像素基底程式碼,以及置於特定網頁的事件程式碼。

<1> 像素基底程式碼:您必須將像素基底程式碼安裝在網站每一個頁面的標頭程式碼中。這會讓您取得有關網站上所有頁面瀏覽次數的資料,以建立衡量特定事件的基準。

<2> 事件程式碼:事件是指發生在網站上的動作,可以是 Facebook 廣告導致的結果(付費)或其他原因(原生)。您可使用事件程式碼來追蹤這些動作並在刊登廣告時加以運用。

 

之前 GTM 相關文章傳送門:

  1. Google Tag Manager – 輕鬆管理第三方追蹤工具的代碼管理系統
  2. Google Tag Manager 新手教學(一):申請帳戶
  3. 如何在 WordPress 安裝 Google Tag Manager 代碼?
  4. Google Tag Manager 新手教學(二):如何加入 Google Analytics 代碼

 

———- 那就開始吧! ———-

Step 1. 先登入 Facebook 的廣告後台(傳送門:facebook 像素頁面

<1> 第一次登入的會看到 facebook 的教學畫面

由於我們是用 GTM 來安裝像素程式碼,請在像素程式碼的安裝方式中,選擇「使用整合工具或代碼管理工具」。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

選擇「Google 代碼管理工具」。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

接者,facebook 會提供安裝教學給我們參考。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

如果沒有以上的畫面,也可以在右方找到像素程式碼。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<2> 找到「像素基底程式碼」

預設值是沒有開啟進階配對,如果要使用進階配對,記得先把下方的進階配對打開,在複製整個像素基底程式碼。

進階配對:開啟資料比對後,來自你像素的資訊將用來比對網站動作與 Facebook 用戶。這樣有助於提升轉換分析報告、廣告最佳化和目標設定的有效性。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

 

Step 2. 登入 Google 代碼管理工具(傳送門:https://tagmanager.google.com

Step 3. 選擇要安裝的帳戶/容器

Step 4. 新增代碼

<1> 左側點擊代碼

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<2> 新增代碼

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<3> 設定代碼

3.1 填入代碼名稱

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

3.2 代碼類型選擇「自訂HTML」

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

3.3 將 facebook 像素完整貼入代碼區域

回到 facebook 像素後台,複製整個像素基底程式碼。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

3.4 在下方的進階選項裡,代碼啟動選項中選擇「每個網頁一次」。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

 

<4> 觸發條件選擇「All Pages」

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<5> 儲存。

到這邊為止,已經完成新增 facebook 像素基底代碼。

 

為了要使轉換最佳化,進一步追蹤廣告的效益,接下來我們就可以在特定頁面加入「事件程式碼」,事件程式碼預先定義的有九種,另外有自訂事件供我們追蹤更多的項目,這邊我們以「查看內容」為例來說明如何安裝,其他的事件也都是一樣的形式,只有在「觸發條件」有些許不同,必須將不同的事件程式碼安裝在會發生這些事件動作的特定頁面上。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

 

Step 4. 安裝 facebook 事件程式碼

<1> 一樣在 GTM 代碼頁面,新增代碼。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<2> 填入代碼名稱

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<3> 代碼類型選擇「自訂 HTML 」

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<4> 把事件程式碼貼入 HTML 裡,對應的數值就請自行修改囉!

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

進階選項裡的代碼啟動選項,選擇「每個事件一次」,代碼觸發順序要勾取「在 Facebook 搜尋_事件像素程式碼 啟動前先啟動一個代碼。」然後設立代碼為我們剛剛設定的像素基底程式碼「Facebook 像素基底程式碼」。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<5> 設定觸發條件

這個事件追蹤我是設定要追蹤查看內容page url 裡有包含 /google-analytics/ 的網頁,在預設的觸發條件裡並沒有這個條件,所以要在右上角的「+」新增。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

因為我的條件是網頁瀏覽,類型就選擇網頁瀏覽,如果各位的觸發條件不同,要依照自己設定的去選擇喔!

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

依照不同的觸發條件,設定觸發條件的啟動時機。

google tag manager-add Facebook pixel code
google tag manager-add Facebook pixel code

<6> 儲存所有步驟。

 

Step 5. 預覽設定的代碼是否有問題,沒有問題的話就可以按下「發佈」了!

Step 6. 檢查像素

<1> 使用 Chrome 擴充套件,安裝 Facebook Pixel Helper 檢視 Facebook 像素是否有安裝完成。

<2> 在 Facebook 廣告後台查看是否有數據進入。

 

 

以上就是 facebook 像素的安裝,如果有錯誤請在下方留言,我會盡快修正!

 

 

相關資源:

如何使用 Google Tag Manager 安裝 Facebook 像素?

什麼是標準事件?如何使用它們?

You may also like

2 篇迴響

    1. 之前在操作時,記得 fb 是說在那之前要先觸發基本事件,有可能是前一陣子 facebook 像素有改版而改變處發設定!

      感謝您的回覆,文章內文會再作修改!

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *