建立自訂像素程式碼

此頁面列印時間為 Mar 20, 2023。如須最新版本，請至 https://help.shopify.com/zh-TW/manual/promoting-marketing/pixels/custom-pixels/code。

此頁面包含為第三方像素建立自訂像素程式碼的說明，以供您追蹤特定的顧客事件。為自訂像素建立程式碼後，您可以將該像素新增至 Shopify 商店。

準備建立自訂像素

建立自訂像素之前，請確認以下資訊，確保您瞭解設定像素的方式：

您新增自訂像素時，請指定以下資訊：

  • 第三方 JavaScript 像素
  • 您想要追蹤的行為事件

為自訂像素建立程式碼

為自訂像素建立程式碼包含以下步驟：

  1. 準備第三方 JavaScript SDK。
  2. 設定像素以追蹤顧客事件。

準備第三方 Javascript SDK

您可以使用第三方服務，取得可與像素整合的程式碼。像素通常包含兩個元件：Javascript SDK 和追蹤程式碼。由於 Shopify 像素沙箱僅支援 JavaScript，您必須移除第三方服務程式碼中的 HTML。

以下為 Meta 像素的範例。像素會因第三方不同而有些微差異。

​​<!-- Meta Pixel Code -->
​​<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', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"
/></noscript>
<!-- End Meta Pixel Code -->

從 Meta 程式碼中移除 HTML 後，將剩下 Meta 的像素 SDK 與程式碼供您進行初始化。由於 PageView 事件追蹤程式碼將在下一個步驟新增，因此已遭移除。

​​!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', YOUR_PIXEL_ID);

您可能遇到使用 script src= 載入的像素。Shopify 的像素不支援 HTML，因此您必須將其替換為對應的 JavaScript。

以下為 Google Analytics (分析) 像素範例：

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

script src= 部分可替換為下列對應的 JavaScript。請務必確保您的 src 屬性符合 HTML 版本：

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

追蹤顧客事件

載入和初始化像素 SDK 後，您需要將事件傳遞給像素以進行追蹤。為此，您可以訂閱事件，然後將事件資料傳遞至像素 SDK 以供第三方服務處理。

訂閱標準事件

Shopify 提供一系列標準事件，有利於確保像素正在收集所需的資料。

您可以使用 Shopify 像素擴充功能 API 訂閱事件。您必須將第三方像素程式碼與您所訂閱的事件一起置入。

這是 Meta 像素的 PageView 事件範例。請注意，fbq("track") 是 Meta 程式碼的一部分，每家公司都有各自的版本，您必須參考其說明文件瞭解詳情。

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

某些事件包含可供您傳入像素的中繼資料。以下為將部分商品細節傳遞給 Meta ViewContent 事件的範例：

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

訂閱自訂顧客事件

如果您要追蹤其他顧客事件 (例如有人點擊按鈕時)，您可新增自訂顧客事件。訂閱自訂事件的方式與標準事件相同。說明您要訂閱的事件名稱，然後將資訊傳給第三方服務供應商的像素。

以下範例為已發布自訂事件在佈景主題 liquid 檔案中的顯示方式：

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

以下範例為您可設定像素以訂閱該自訂事件的方式：

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

如需有關自訂事件的詳細資訊，請參閱 Shopify 開發人員說明文件。

自訂像素範例

以下為完整像素程式碼的範例。像素程式碼會依第三方服務供應商和您要追蹤的事件而有所差異。

自訂 Meta 像素

!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');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", event => {
  fbq('track', 'PageView');
});

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

analytics.subscribe("search_submitted", async (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", async (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data.cartLine.merchandise.productVariant.id],
    content_name: event.data.cartLine.merchandise.productVariant.title,
    currency: event.data.cartLine.merchandise.productVariant.price.currencyCode,
    value: event.data.cartLine.merchandise.productVariant.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", async (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", async (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", async (event) => {
  fbq('track', 'Purchase', {
    currency: event.checkout.currencyCode,
    value: event.checkout.totalPrice.amount,
  });
});

準備好開始透過 Shopify 銷售商品了嗎？

免費試用