在【行銷新手必學！Facebook Pixel教學指南「輕鬆掌握所有訪客行為」】文章中，我們詳細介紹Pixel的功能、優勢、程式碼的架構，讓大家了解Pixel的運作方式；而在這一篇Facebook Pixel安裝教學文章，我們要來教大家整個安裝流程，在具備Pixel基礎概念下，讓你更快設定好Pixel，進行事件追蹤，那我們就開始操作囉！
目錄
建立Facebook Pixel資料來源
在這章節我們會先帶大家建立Pixel，後續再埋設標準程式碼及事件程式碼，透過下列圖解，帶你一步步設定完成！
Step 1. 在Meta Business Suite，點選「所有工具」，進入「事件管理工具」。
Step 2. 在「事件管理工具」，點選綠色加號的「連結資料來源」，點選「網站」作為資料來源。
Step 3. 為建立的資料集命名，後續所有Pixel追蹤到的事件，將分享到資料集。
Step 4. 輸入網站網址，這樣就建立好囉！
安裝程式碼三大方法
在Pixel建立好之後，就要來安裝程式碼在網站中，我們可以選擇不同工具，像是Google Tag Manager、如果是使用套版網站也可以直接在網站後台埋設、或是自行將代碼放在網站原始碼頁面中，上述所有的方法都會在本篇文章中介紹。
而在上一篇「Facebook Pixel教學文章」有提到：「基底程式碼」與「事件程式碼」兩者必須都要安裝，因此基底程式碼、事件程式碼的安裝步驟，都會詳細向大家解說。
1. 自行將Pixel埋在網頁原始碼頁面
這個作法比較適合懂程式的人，因為需要面對密密麻麻的網頁原始碼，或是也可以請自家的工程師協助埋設，不過如果你想減少溝通成本，許多行銷人會使用Google Tag Manager埋設，因為Google Tag Manager有四大優點：集中管理代碼、減少和工程師的溝通成本、減少網站追蹤出錯機會、提升網站穩定性；如果想深入瞭解，可以閱讀「Google Tag Manager教學」。
但在下方我們還是會簡單提及將Pixel埋在網頁原是碼頁面的操作方式。
<安裝基底程式碼>
Step 1. 點選手動安裝程式碼。
Step 2. 複製基底程式碼。
Step 3. 在網頁原始碼中貼上基底程式碼
在網頁原始碼的頁面中找出<head>、</head>的標籤位置，將複製好的「基底程式碼」貼到<head>、</head>標籤之間。由於網站的載入過程有先後順序，每個網頁讀取的時間都不同，為了確保訪客行為完整被記錄下來，避免訪客離開網頁時，數據來不及收集完畢，所以一定要確認程式碼有貼在「<head>、</head>標籤之間」。
要將Pixel貼在網頁原始碼頁面，其實通常是由工程師負責處理，所以這章節簡單介紹步驟，不會深入解說；另外，可以點選step.1畫面中右下角的按鈕，透過電子郵件寄送程式碼給開發工程師，請他們協助安裝程式碼。
輸入網站管理員的email帳號，下方會有訊息的草稿內容，附函安裝的pixel代碼，我們只需要點選「寄出」就可以了！
Step 4. 開啟「自動進階配對」，並驗證要傳送的顧客資料，設定完成後，最多需要等待48個小時，才可以在Meta事件管理工具中查看成果。
<安裝事件程式碼>
安裝基底程式碼後，接下來就是設定「事件程式碼」，我們只需要複製所需要的代碼，貼在基底程式碼裡的「</script> 標籤上方」即可；設定完成後，Pixel就會針對特定的事件去搜集特定的數據。
事件程式碼總共有17種網站動作，若有代碼的需求，可以參考「Meta像素標準事件的詳細說明」。
2. 使用套版網站後台埋設
如果你的網站是屬於套版網站，像是WordPress、Shopify、Shopline、91APP…等，我們跟著套版網站的安裝引導，基本上只要將基底程式碼編號（Facebook Pixel ID）貼上後台對應的位置，這樣就完成了，非常簡單方便！
<設定基底程式碼>
Step 1. 每個套版網站的安裝步驟會有些許不同，點選畫面中的「查看合作夥伴」，再選擇你所使用的套版網站，就能看到該套版網站Pixel的安裝方式。
Step 2. 以SHOPLINE為例，點選SHOPLINE後，會出現一連串的安裝流程，我們只要按照裡面的步驟去設定，就可以了！
Step 3. 完成串接後，在Shopline後台，選擇「第三方服務 – Facebook」頁面，查看「廣告行銷」的介面，會顯示已經串接的資產，這樣基底程式碼就安裝成功！
除了在套版網站後台（Shopline）確認串接狀態，也可以在Meta Business Suite，選擇「商業應用程式 > 連接的應用程式」的頁面，會顯示串接的資產名稱。
<設定事件程式碼>
基底程式碼埋設好後，那事件程式碼要去哪裡設置呢？我們繼續以Shopline為例，Shopline的標準事件不需要埋碼，只需要確認API是否為「已啟用」的狀態。
首先，進入Shopline的商店後台，在左邊選項欄找第三方服務，選擇Facebook，並在「廣告行銷」的頁面查看Conversions API，若API顯示為「已啟用」，就代表Pixel會「自動追蹤標準事件」。
經上述介紹，知道程式碼會自動追蹤標準事件後，如果需要瀏覽事件的數據，要在哪裡查看呢？我們可以在Facebook的「事件管理工具的總覽」，右邊的欄位會有事件數據，點選「顯示所有事件」。
點擊「顯示所有事件」後，會跳出事件的畫面，我們就能查看所有標準事件的狀態。
以上是自行埋設、套版網站後台埋設的教學，下一個章節要來詳細介紹用Google Tag Manager埋碼的流程，趕緊看下去～
3. Google Tag Manager埋設程式碼
首先開啟Google Tag Manager，並登入你的Gmail，若你是第一次使用GTM，尚未建立賬戶，可以參考⟪埋碼不求人！GOOGLE TAG MANAGER 入門實戰⟫；將帳戶、容器設立好後，就開始安裝基底程式碼。
<安裝基底程式碼>
安裝「基底程式碼」有兩種方法：自訂義HTML、GTM範本庫新增。由於早期在GTM埋設Pixel，只有「自訂HTML」這個管道，直到2019年後，才可以在「範本庫」埋設Pixel；如果你是第一次埋設的新手，建議可以選擇「GTM範本庫新增」，因為設定的步驟簡單好上手。
(1)GTM範本庫新增
Step 1. 首先，進入到帳戶裡，在工作區點選代碼介面，選擇「新增」。
Step 2. 點擊「代碼設定」，在選擇代碼類型裡，點選「探索社群範本庫的其他代碼類型」。
Step 3. 搜尋代碼範本（輸入Facebook），並點擊「Facebook Pixel」這個選項。
Step 4. 將Facebook Pixel範本新增至工作區。
Step 5. 貼上Pixel編號。那要去哪裡取得Facebook Pixel編號？在最一開始建立好Pixel之後，我們可以在「Meta事件管理工具」後台中，找到你所建立的Pixel，點選後在設定的頁籤，複製「資料集編號」。
將複製的資料集編號貼在欄位裡，下方的事件（Event Name）選擇「PageView」，設定好按下儲存。
Step 6. 回到主介面，右上角會有「工作區變更」，點選「提交」，進行版本更新，這樣就埋設完成囉～
上述的步驟是不是很簡單呢？接下來，跟大家介紹「自訂HTML」的安裝步驟，雖然這個方法設定相對較複雜，但許多行銷人都已經習慣這個方式，就讓我們繼續看下去吧～
(2)自訂HTML新增
Step 1. 這裡一開始的步驟，跟「GTM範本庫」的Step 1、Step 2相同，進入工作區後，在代碼介面選擇「新增」。
Step 2. 進入代碼設定後，點擊「自訂HTML」。
Step 3. 將Facebook基底程式碼「完整貼入」代碼區域。
Step 4. 在下方的「進階選項」裡的「代碼觸發選項」，選擇「每個事件一次」。
Step 5. 觸發條件選擇「All Pages」並點選儲存，基底程式碼就安裝完成了！
Step 6. 完成後回到主介面，右上角會有一個「工作區變更」，點選「提交」，這樣才會進行版本更新。
<安裝事件程式碼>
在安裝事件程式碼之前，必須先設定觸發條件，不然在設定事件程式碼的時候，就無法進行下一步。那觸發條件又是什麼呢？舉例來說，我們要追蹤訪客「點擊撥打電話」的次數，在設定觸發條件時，將「指定的電話號碼」設定為判斷事件是否觸發的標準，當訪客只要點擊「指定的電話號碼」，就會執行對應的代碼，這個行為就會被追蹤記錄了！
(1)前置作業：新增「觸發條件」
Step 1. 在工作區的「觸發條件」介面選擇「新增」。
Step 2. 進入新增頁後，點選觸發條件設定。
Step 3. 裡面有許多「觸發條件類型」，尋找自己需要的事件行為選項。我們以「點擊連結」這個動作為例，選擇這個觸發條件類型，當訪客點擊「連結」時，行為就會被記錄下來。
Step 4. 接著可以選擇這項觸發條件的啟動時機，如果選擇「所有的連結點擊」，當訪客點擊網站中任何連結時，行為都會被記錄下來；但一般來說我們為了區分訪客點擊的內容，會選擇「部分的連結點擊」，可以針對特定連結進行追蹤，以下圖為例，如果點擊的連結包含「mailto:[email protected]」，就能追蹤到這個行為。
以上步驟設定完畢，我們就可以開始安裝事件程式碼。
(2)設定事件代碼
Step 1. 在埋設事件程式碼的時候，可以透過「自訂HTML」的方式，在特定頁面進行埋設，這邊跟埋設基底程式碼一樣，在工作區的代碼介面，點選代碼設定。
Step 2. 我們在代碼類型，選擇「自訂HTML代碼」。
Step 3. 在<script>與</script>之間，貼上事件程式碼。舉例來說，要埋設「聯絡資料」的事件程式碼，我們在⟪Meta 像素標準事件的詳細說明⟫這個頁面，複製程式碼「fbq(‘track’, ‘Contact’);」，貼在<script>與</script> 裡面。
Step 4. 點開下面的進階設定，在代碼觸發選項選擇「每個事件一次」。
Step 5. 在下方「觸發條件」的欄位，選擇「觸發條件類型」，也就是我們剛剛事先設定好的指定條件。
Step 6. 完成設定後，記得回到主介面，右上角的「工作區變更」點選「提交」，進行版本更新。
以上是用Google Tag Manager埋設Pixel的安裝流程，對於要追蹤很多網站的行銷人員來說，這個方法非常方便管理。
標準事件追蹤與自訂事件追蹤的差異
我們在設定事件程式碼時，有兩種型態：
1. 標準事件追蹤
標準事件是預先定義的訪客動作，Facebook有一些定義好的事件類型，包含：加到願望清單、完成註冊、聯絡資料…等等，詳情資訊請參考Meta像素標準事件說明。
2. 自訂事件追蹤
若是Facebook標準事件裡，沒有你想要的追蹤選項，可以建立自訂事件，滿足自己想要追蹤的訪客行為。舉例來說，你的商家販售不同金額的耳機（$5,000 – $35,000），你想要追蹤消費力最高的族群，因此你可以設定追蹤「有購買3萬元以上的耳機」的人，透過自訂的條件來達成想追蹤的訪客行為。
設定好所需的事件程式碼後，只需要等待Pixel回傳數據到廣告後台，就能得知訪客在網站中做了哪些事，以擬定精確的廣告策略。
如何檢測Facebook Pixel安裝是否成功？
在Pixel安裝之後，我們在後台就可以看到數據，但網站的數據需要經過一點時間才會在後台出現，那要怎麼確認安裝成功呢？不論你是透過哪一種方式進行安裝，只需要透過Pixel Helper這個工具，就能協助檢測安裝結果，讓我們看下去吧～
Meta Pixel Helper
在「Chrome線上應用程式商店」搜尋「Meta Pixel Helper」，加到擴充功能。
如果安裝成功，在瀏覽器就會顯示這個畫面，基底程式碼、事件程式碼會顯示綠色勾勾。
確認Pixel Helper安裝成功後，就能檢測每個網頁的基底程式碼、事件程式碼狀況，確認像素是否有正常運作，非常好用！
以上就是整個Facebook Pixel安裝流程，希望這篇文章能幫助大家熟悉「設定像素與程式碼」的步驟，不怕在安裝時候做錯，導致實裝失敗，無法獲得完整網站數據，讓你早日追蹤網站內所有資料，執行精準的廣告策略！
如果你喜歡我們的文章，歡迎留下Email訂閱電子報，將不定期收到更多行銷和廣告知識！