Meta(Facebook) Pixel重複載入、自訂事件與指定ID的解決方案 trackSingle

作者： -

許多行銷人員都會依賴 GTM 插入 Facebook Pixel 的程式碼，但你是否有想過，當一個網站上出現多個 Pixel ID 的時候，一直 init（重新宣告）Pixel ID、直接觸發事件、整段程式碼貼上，會重複追蹤事件（一直Add to Cart）、覆蓋變數影響其它 Pixel ID……等問題，最終除了讓網頁效能降低外，收集到的數據也不準確。

曾經經手過一個充滿好幾個 meta pixel 和 bing uet 的網站，單純把 GTM 拿掉，效能就可以提升超過40分。

自訂事件一般寫法

許多行銷人員會在 GTM 中使用「自訂 HTML」直接貼上像這樣的程式碼來達成他想要的自訂事件：


<script>
!function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '1234567890');
fbq('trackCustom', '自訂事件名稱', { '額外要傳送的數據Object': 999 });
</script>

但他完全沒有考慮可能會發生的問題：

  • https://connect.facebook.net/en_US/fbevents.js 是否已經載入過了。（這個其實官方程式碼已經處理：if(f.fbq)return;）
  • Pixel ID 是否已經宣告（init）過了。
  • 若存在別的 Pixel ID，這個事件也會影響所有 Pixel ID。

其實不止自訂事件，標準事件也是如此。這種寫法若是處理像 Add to Cart 這樣的標準事件，有三個 Pixel ID 就會觸發三次，等於使用者才剛進入頁面，你收集到的數據就已經 Add to Cart 三次了。

改善之後的寫法

在釐清問題之後，我們的目標就很明確了：避免 fbevents.js 重複載入、避免重複宣告、避免影響別的 Pixel ID。所以我們加上一些判斷式來改善原本的程式碼：


var myPixelID = '1234567890';
if (typeof fbq === 'function' && fbq.getState) {
  var pixels = fbq.getState().pixels || [];
  var hasInit = pixels.some(function(p) { return p.id === myPixelID; });
  if (!hasInit) {
    fbq('init', myPixelID);
  }
} else {
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', myPixelID);
}
fbq('trackCustom', '我的自訂事件名稱', {
  '回傳數據a': '某個你想要的a數據值' || ''
});

fbq.getState.pixels 這個語法可以叫出網頁中所有的 Pixel ID 與它們的資訊，所以可以用來判斷 fbevents.js 需不需要載入、某個 Pixel ID 有沒有宣告過，非常好用。

然而，只使用判斷式仍然會把事件推送到所有 Pixel ID 之中，所以我們還必需要改用別的語法。

使用trackSingle指定Pixel ID

為了讓觸發的事件不影響別的 Pixel ID，這時就不應該使用 trackCustom，而是使用另一個語法 trackSingle：


fbq('trackSingle', '指定要推送的 Pixel ID', '我的自訂事件', { '額外要傳送的數據Object': 999 });
因此，最終的程式碼要改寫成： 

var myPixelID = '1234567890';
if (typeof fbq === 'function' && fbq.getState) {
  var pixels = fbq.getState().pixels || [];
  var hasInit = pixels.some(function(p) { return p.id === myPixelID; });
  if (!hasInit) {
    fbq('init', myPixelID);
  }
} else {
  !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', myPixelID);
}
fbq('trackSingle', myPixelID, '我的自訂事件名稱', {
  '回傳數據a': '某個你想要的a數據值' || ''
});
fbq pixel 事件只推送到特定目標id

利用 Meta Pixel Helper 可以觀察到，在有三個 Pixel ID 的情況下，事件成功只被推送到指定的 Pixel ID，沒有污染其它兩個 ID。

留言

張貼留言

這個網誌中的熱門文章

如何產生醒目顯示文字的連結？讓使用者一目瞭然的功能(Scroll to Text Fragment)

作者： -
圖片
若你在優化任何非網站的網址(Office文件、PDF、留言、Email、Google 我的商家、SERP結構化資料如 FAQ 中的網址)，除了在網址使用 #id (錨點)之外，Scroll to Text Fragment 或許是另一個可以考慮的方式。 URL Scroll to Text Fragment 是什麼？ 它的功能是在網址中設定文字，使用者點擊網址進入網頁後，可以看到被強調的文字，並將畫面移動到該文字處，文字高度在畫面中間。這並不是什麼新功能，早在 chrome 80 以後就出現在以 chrome 為核心的瀏覽器之中了。 如何創建？ 複製醒目顯示文字連結 在 chrome 90 之後的版本，網頁上選取（反白）文字之後按右鍵，就會出現「 複製醒目顯示文字的連結 」的功能，點擊該功能產生的連結，貼到任何除了該連結頁面之外的地方，被點擊後就可以產生上一段文字提到的效果。如果沒有該功能，可能是被設定成關閉，網址列輸入 chrome://flags 並按下enter後，找到 Copy Link To Text 後就能開啟該功能（enabled）。 如何關閉？ 但是，在最新版本的 chrome 中， chrome://flags 已經找不到 Copy Link To Text 這個指令了，換句話說就是沒辦法關閉這個功能，還請注意。 文字反白之後右鍵即可看見該功能   連結的架構與DIY 若不想透過 chrome 附加的功能直接設定使用的話，自己也可以設計出這種特殊網址，方法與錨點類似，不過是加上「 #:~:text= 」 完整結構： https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix] 方法1 整段文字： 只使用 textStart 的話是最簡單的使用方式： #:~:text=文字 ，它會當成要 highlight 的所有文字，就像 {示範連接} 的範例一樣。 方法2 文字區段： 你也可以打上兩段文字： #:~:text=文字1,文字2 ，分別代表開頭和結尾，它會找尋這一區段的文字 highlight，這裡也用 {示範連接} 開新分頁示範一次。 方法3 多段文字： 可以使用「&」區隔： #:~:text=文字1&text=文字2 。但是個人不建議這...
READ THIS »

用CSS的 min max與vw cqw，設計有極限值的RWD響應式文字

作者： -
圖片
你是否有想過，max/min font size 的解法？能不能單靠 CSS 設計出會自動調整大小的 Responsive Font Size？答案是可以的！ 文章目錄： vw 基本運用 極限問題 max()、min()、clamp() Container Queries與cqw/cqi 為何使用 vw？ 在編寫 CSS 的時候，你可能習慣將網頁上的字體大小(font-size)使用 rem、em、px 等單位設定，但在講究 RWD 的情況下，甚至是 Google SEO 著重在手機介面的現在，總是會遇到桌機看起來很舒適，但畫面一變小，標題類的字就又太佔版面。 而使用 viewport width (vw) 當作字體大小的單位，就可以讓字體隨著視窗寬度的不同自動縮放其大小。 各瀏覽器支援 vw 的情況 vw 基本運用： vw 是視窗寬度的百分比，所以 1vw = 1%的視窗寬度。舉例來說，當視窗寬度為 1000px 且 font-size: 1.5vw 的時候，字體的大小就是 1000*1.5% = 15px。 h1,.h1{ font-size: 1.5vw; } 除了直接運用之外，也能搭配 calc 使用： h1,.h1{ font-size: calc(10px + 1.5vw); } 極限問題（max or min font size） 這是不管設計什麼東西都存在且必需要考慮的事情，vw 也不例外。 設計網頁一定會設一個網頁寬度，以此寬度設定做為最大值；而人的視力有限，以 16px 當作最小值。所以，當視窗被拉到極大或極小的時候，以 vw 為單位的字體勢必會變成你不想要的樣子，這時候我們就必需設定最大值和最小值，讓字體在合理的區間變動，而 media query 和 min()、max()就出現在解決辦法的清單之中： 以前的做法：Media Query 下面為使用的例子： h1,.h1{ font-size: 28px; } @media (min-width: 1600px) { h1,.h1{ font-size: 40px; } } @media (max-width: 480px) { h1,.h1{ font-size: 16px; } } ...
READ THIS »

Google Search Console 網頁發現方式多了「參照網頁」

作者： -
圖片
在檢查網址中的「涵蓋範圍」，發現方式新增了參照網頁（Referring page），讓網站管理者知道Google是用哪些方式得知這個頁面。 數據說明 參照網頁可能直接連到該URL，或者是連到該頁面的上一層或更上層。如果不存在任何值，並不意味著不存在任何引用頁面，只是此訊息可能此時對 網址檢查工具 不可用。 也就是說，對於較新的頁面，參照網頁可能不會有數據，這是很正常的。Google 新增這個欄位也顯示出他們是用多種方式來得知網頁的存在並抓取。 什麼是參照網頁？ 其實就是 GA 中的「 參照連結網址 」，意思是使用者進到你的網頁的來源網址，search console 會自動辨識這些流量來自哪裡。通常是連結，當然也有可能會是瀏覽器書籤、最愛、email 或手機app等，這大概也是為什麼不一定會有數據的原因之一吧。 頻繁更新 近期 Google Search Console 一直在更新，說不定是受到 Bing 更新的打擊(x)，例如「涵蓋範圍」也更新成只剩下近3個月的資料、新增「檢索統計資料」等等功能，以及對於 CWVs 的相關更新 ，我們可以期待它的功能和數據將越來越豐富與完整。
READ THIS »