建立自訂像素程式碼

本頁提供針對第三方像素建立自訂像素程式碼的指引，讓您能追蹤特定的顧客事件。建立自訂像素的程式碼後，您可以add the pixel to your Shopify store。

本頁內容

準備建立自訂像素

在建立自訂像素之前，請先閱讀以下資訊，確保您瞭解如何設定您的像素：

新增自訂像素時，您需要指定下列資訊：

第三方 JavaScript 像素。
您想追蹤的行為事件。
顧客隱私同意設定。

建立自訂像素程式碼

建立自訂像素程式碼包括下列步驟：

Prepare the third-party Javascript SDK。
將您的像素設定為track customer events。
為您的像素設定consent settings for customer privacy。

準備第三方 JavaScript SDK

您使用的第三方服務會提供與像素整合的程式碼。像素通常包含 2 個元件：一個 JavaScript SDK 與追蹤程式碼。第三方服務程式碼中的任何 HTML 都需要移除，因為 Shopify 像素沙盒僅支援 JavaScript。

以下為 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 的像素 SDK 不會自動從 Shopify 自訂像素傳送資料。若要傳送資料，您需要subscribe to events。

您可能會遇到以 script src= 載入的像素。Shopify 的像素不支援 HTML，因此您需要將 script src= 改為對應的 JavaScript 寫法。

以下示範一個使用 script src= 載入的 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 的像素 SDK 不會自動從 Shopify 自訂像素傳送資料。若要傳送資料，您需要訂閱事件。

追蹤顧客事件

載入並初始化像素的 SDK 之後，您需要將事件傳入其中以進行追蹤。作法是先訂閱事件，再將事件資料傳入像素的 SDK，交由第三方服務處理。

Shopify 提供一組標準事件，可協助您輕鬆確保像素蒐集到所需的資料。

您可以使用 Shopify Pixels Extension 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) 與英國) 中，只有在網站訪客提供像素設定所要求的權限時，網頁像素才會執行。

預設情況下，新建立的自訂像素需要 Marketing 與 Analytics 權限。您可以在自訂像素的詳細資料頁面中，於 Customer privacy > Permission 區段自訂所需的權限。

同樣地，設定為資料販售的像素不會對選擇退出資料販售或分享的顧客執行，除非該像素支援有限資料使用。預設情況下，新建立的自訂像素歸類為資料販售。您可以在自訂像素的詳細資料頁面中，於 Customer privacy > Data sale 區段自訂所蒐集資料是否屬於資料販售。

自訂像素的開發人員可瞭解更多關於收集與記錄同意。

各像素對於各項用途的命名可能不同。請參閱第三方的像素文件，以瞭解其如何對應到 Shopify 的定義。

例如，以下說明 Marketing 與 Analytics 用途如何對應至 Google 的 Consent Mode：

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,
  });
});

建立自訂像素程式碼

本頁內容

準備建立自訂像素

建立自訂像素程式碼

準備第三方 JavaScript SDK

追蹤顧客事件

訂閱標準事件

訂閱自訂顧客事件

同意與資料販售設定

自訂像素範例

自訂 Meta 像素範例