GTM 教學｜Shopify 如何設定META 免費像素?

如果你是新的SHOPIFY 商家，正準備要使用透過GTM 設定行銷用的代碼，本篇文章絕對可以看下去。這篇會教你使用SHOPIFY 自訂像素(Customer Events)，來完成設定常見的行銷代碼追蹤。本篇會以 META 像素作為範例。完成之後，你可以再請超厲害的 AI 幫你設定完其他產品，舉一反三~

過往 SHOPIFY 需要將GTM 設定在背景主題 .liquid 下，透過顧客事件 Customer Pixel 可以讓我們完成整個購買流程的設定，不會再有結帳、購買頁被限制的問題。因此如果讀者的用戶不是PLUS 方案，本篇文章的埋設方式絕對適用！

SHOPIFY 顧客事件 Customer Events，本身有自己預設 多個符合電商的事件，並自己帶有電商參數，可以隨時調用，以下參考左邊為 SHOPIFY 事件，右邊為對應常用的行銷代碼事件　（SHOPIFY 事件： 行銷代碼事件）：

• product_viewed　(瀏覽產品)
• product_added_to_cart　（加入購物車）
• checkout_started　（結帳）
• checkout_completed (完成購買)

前往顧客事件

前往商店右下角 「設定」。

點選「顧客事件」Customer Events，並在右側選單中點選「自訂像素」。

埋設META PIXEL 代碼

!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', '{{你的ID}}');
fbq('track', 'PageView');

analytics.subscribe("product_viewed", (event) => {
const variant = event.data.productVariant;
fbq('track', 'ViewContent', {
content_type: 'product',
content_ids: [variant.product.id],
content_name: variant.product.title,
value: Number(variant.price.amount),
currency: variant.price.currencyCode
});
});

以上示範其中一個，如果你還需要設定其他的，將SHOPIFY 上面的事件直接丟給市面上的 AI 再丟回來這邊，基本上都可以幫你完成，後續也記得要確認是否有設定正確！

測試顧客事件

埋設完畢後，記得點選上方的「測試」，SHOPIFY 會打開你的商店讓你開始測試，很像META 事件管理工具的測試事件~

顧客事件需要注意

顧客事件Customer Events 本身是一個沙箱環境，如果你要設定GA4、GADS可能會有偵測不到的狀況，這時候需要額外排查。而且在這個環境安裝不了GTM，所以只能直接寫原生的GTag 或是 fbq JS 執行。