一、建立 Pixel
進入資產庫中的「Pixel」頁面
新增 Pixel 完成
新增 Pixel 部分已完成,下列提供 2 種⽰範⽅式將新增的 Pixel 安裝⾄網站上, 也可以依⾃⾏習慣管理網站追蹤碼的⽅式,
請⼯程師協助進⾏
⼿動複製 Pixel 程式碼到網站程式碼中
使⽤ GTM 代碼管理⼯具安裝 Pixel
二、安裝 Pixel
埋設 Pixel 基本程式碼
點選「複製」複製 Pixel 基本程式碼
將程式碼貼到網站所有⾴⾯程式碼的 … 區段中設置基本程式碼
埋設 Pixel 基本程式碼完成
到這裡完成的是「基本程式碼」安裝,也就是能夠追蹤網站中最基本的⾴⾯瀏覽「PageView」事件, 如只需追蹤網站⾴⾯瀏覽事件,可點選『完成』回到列表
若想追蹤使⽤者在網站的特定⾏為(如購買事件),可以點選『繼續新增事件』安裝標準事件程式碼
埋設 Pixel 標準事件程式碼
根據需埋設的動作事件,點選『複製』複製標準事件程式碼
將程式碼貼到需觸發的網站⾴⾯或按鈕程式碼區段中設置標準事件程式碼
三、使用 GTM 安裝 Pixel
使用 GTM 新增 Pixel 基本程式碼
在 GTM ⼯作區中點選『新增代碼』
使用 GTM 新增 Pixel 基本程式碼
填入代碼名稱(Ex: Dcard Ads Pixel)
點擊『代碼設定』
選擇代碼類型中的『⾃訂 HTML』
使用 GTM 新增 Pixel 基本程式碼
回到 Dcard Ads 後台,點選『複製』複製 Pixel 基本程式碼
在 GTM 畫⾯中將程式碼貼到 HTML 欄位
使用 GTM 新增 Pixel 基本程式碼
點選『觸發條件』,並選擇『All Page』
確認設定無誤後點選右上⾓『儲存』
完成後回到主畫⾯,下⽅『⼯作區變更』會顯⽰新增的項⽬
點選右上⽅『提交』後才會將此次新增上傳完成更新
使用 GTM 新增 Pixel 標準事件程式碼
基礎程式碼的設定後,⼀樣在 GTM ⼯作區中點選『新增代碼』
填入代碼名稱(Ex: Dcard Ads 加入購物⾞)
點擊『代碼設定』
選擇代碼類型中的『⾃訂 HTML』
回到 Dcard Ads 後台,根據需埋設的動作事件,點選『複製』複製標準事件程式碼
在 GTM 畫⾯中將程式碼貼到 HTML 欄位(⽰範圖以加入購物⾞為例)
點選『進階設定』
代碼觸發選項為『每個事件⼀次』(⽰範圖以加入購物⾞為例,其他相關對應的事件依需求⾃⾏調整觸發選項)
代碼觸發順序勾選『在此代碼觸發前先觸發⼀個代碼』
選取代碼選擇先前設定的 Pixel 基本程式碼
點選『觸發條件』,選擇既有的觸發條件或右上⾓『+』新增觸發條件 (⽰範圖以加入購物⾞為例,其他相關對應的事件依需求⾃⾏調整觸發條件)
點選右上⾓『儲存』
完成後回到主畫⾯,下⽅『⼯作區變更』會顯⽰新增的項⽬
點選右上⽅『提交』後才會將此次新增上傳完成更新
四、安裝 Pixel Helper
從 Chrome Extension 中安裝 Dcard Pixel Helper(⽬前 Pixel Helper 僅有提供 Chrome 瀏覽器安裝)
於埋設 Pixel 網站的⾴⾯中打開 Chrome 瀏覽器的擴充功能,並釘選 Dcard Pixel Helper
確認 Pixel 基本程式碼埋設正確
如 Pixel 基本程式碼成功埋設並觸發,Pixel Helper 會顯⽰有發現 Pixel & PageView 事件綠燈標⽰
如 Pixel 基本程式碼沒有成功埋設並觸發,Pixel Helper 會顯⽰沒有發現 Pixel & Pixel did not load 紅燈警⽰, 請重新確認 Pixel 基本程式碼是否正確複製及埋設。
確認 Pixel 標準事件程式碼埋設正確
根據埋設的動作事件在網站中執⾏對應的觸發⾏為
如 Pixel 標準事件程式碼成功埋設並觸發,Pixel Helper 會顯⽰該事件&綠燈標⽰
如 Pixel 標準事件程式碼沒有成功埋設並觸發,Pixel Helper 不會顯⽰該事件
確認 Pixel 事件狀態
確認埋設成功後回到 Pixel 列表,點擊『查看事件數據』,檢查 Pixel 事件狀態
檢視 Pixel 程式碼
若想確認及複製 Pixel 程式碼可以隨時在 Pixel 列表點選『檢視 Pixel Code 』
查看 Pixel Helper 警示訊息總覽
『檢視 Pixel Code 』中也可以查看 Pixel Helper 警⽰及排除⽅式
五、FAQ
六、附件
Medium 介紹文章(案例集、功能介紹)
Dcard Ads LINE 官方帳號 ID:@dcardads