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 像素基底程式碼」。

更新!!!facebook 前一陣子改了廣告像素的設定,事件設定的代碼啟動選項更改為「在 XXX(事件)啟動後再啟動一個代碼」

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

11 篇迴響

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

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

    1. 這篇是在說明如何在 GTM 裡安裝 facebook 像素與事件像素,所以您要先在網頁上埋入 GTM 的代碼。
      之後只要到 GTM 裡設定安裝 facebook 像素即可,不需要額外在網頁上埋入 facebook 代碼~

      這篇文章給您參考:http://www.startdo.tw/google-analytics/how-to-install-google-tag-manager-on-a-wordpress-website/
      主要是參考中間埋入 GTM 的部分,GTM 代碼有分兩塊,要分別埋入 及 ,可以請您的網頁代管公司或是內部工程師幫您埋入 GTM 代碼。

      如有其他問題,歡迎交流~謝謝!

  1. 大大,,我可以這麼說嗎?
    不管之後有設多少的FB事件代碼..
    我只需在每一網頁裡埋入一開始的”Google 代碼管理工具”
    之及 二段代碼即可…

    之後都不需要動到每個網頁裡的程式碼了…

    這樣對嗎?

    1. 一開始的 gtm 安裝好,fb 的基本像素也安裝好後,
      fb 的事件追蹤代碼是安裝在 gtm 裡面(在 gtm 的平台裡操作),
      不需要再動到網頁的程式碼,除非是需要增加其他的程式碼來做更多資料的追蹤。

  2. 太感謝了,像素基底程式碼已經裝好了

    但事件….雖然說照貼沒問題,但不太明白事件的對應數值怎麼改,很怕設定錯誤,請問會有教學文章嗎?

Ellen 發表迴響 取消回覆

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