建立自訂像素程式碼

此頁面列印時間為 Apr 23, 2024。如須最新版本，請至 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);

Meta's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

您可能遇到使用 script src= 載入的像素。Shopify 的像素不支援 HTML，因此您必須將 script src= 替換為對應的 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');

Google's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

追蹤顧客事件

載入和初始化像素 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 開發人員說明文件。

在您設定需要取得同意聲明的市場中，只有訪客已提供行銷和分析用途的同意聲明時，Web 像素才會運行。每個像素的名稱可能因用途而有所不同。建議您參閱像素說明文件，瞭解像素用途與 Shopify 定義之間的對應關係。

以下範例說明行銷和分析用途如何對應至 Google 的同意聲明模式：

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

自訂像素範例

以下為 Meta 像素程式碼的範例。像素程式碼會依第三方服務供應商和您要追蹤的事件而有所差異。請參閱「顧客事件參考文件」，以取得可用事件清單。

自訂 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", (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", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (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", (event) => {
  fbq('track', 'AddPaymentInfo');
});

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

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

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

免費試用