建立自訂像素程式碼

此頁面包含為第三方像素建立自訂像素程式碼的說明,以供您追蹤特定的顧客事件。為自訂像素建立程式碼後,您可以將該像素新增至 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 開發人員說明文件

在設定為需要同意聲明的市場 (如歐洲經濟區 (EEA) 和英國),只有當網站訪客已提供像素設定中所需的權限時,網頁像素才會執行。依預設,新像素需要行銷分析權限。

同樣地,設定為資料銷售的像素不會對選擇退出資料銷售或不同意分享的顧客執行,除非該像素支援有限的資料用途。

建議自訂像素開發人員深入瞭解如何收集和註冊同意聲明

每個像素的名稱可能因用途而有所不同。建議您參閱第三方像素說明文件,瞭解像素用途與 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,
  });
});
沒有找到您需要的答案嗎?我們很樂意為您提供協助。