新增自訂像素

如果沒有應用程式可追蹤您想收集資料的特定顧客事件,您可以新增在寬鬆式 (Lax) 沙箱環境中執行的自訂像素。

您新增自訂像素時,請指定以下資訊:

  • 第三方 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", event => {
  fbq('track', 'PageView');
});

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

新增自訂像素

新增自訂像素之前,請移除任何現有像素,以確保顧客事件不會計算兩次。您應手動將現有像素程式碼從其任何所在之處移除,例如 theme.liquidcheckout.liquid (僅 Plus 商家適用),以及其他結帳指令碼。

  1. 在 Shopify 管理介面中,前往「設定」>「顧客事件」。
  2. 為像素指定專屬名稱。若已有像素使用您輸入的自訂像素名稱,系統會提示您為自訂像素指定其他名稱。
  3. 點擊「新增像素」以開啟事件編輯器。
  4. 將第三方 JavaScript 像素貼至「程式碼」視窗。
  5. 新增您想在適當結構描述中追蹤的事件
  6. 選用:點擊「更多動作」以編輯像素名稱,或查看聘僱 Shopify 專家來協助您自訂像素的相關資訊。
  7. 點擊「儲存」以儲存自訂像素。若您已準備好連結自訂像素,點擊「連結像素」即可開始追蹤事件。

連結自訂像素

新增自訂像素後,您必須將像素與您的商店連結。

  1. 在 Shopify 管理介面的顧客事件頁面上,點擊「自訂像素」。
  2. 目前未連結的自訂像素會顯示在「已取消連結像素」標題下方。請在適當的自訂像素行點擊「連結」。
  3. 詳閱 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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

取消連結自訂像素

如果您已新增自訂像素來追蹤某個事件,但現在想停止追蹤該事件,您必須手動將像素與您的網路商店取消連接。

步驟:

  1. 在 Shopify 管理介面的顧客事件頁面上,點擊「自訂像素」。
  2. 目前已連結的自訂像素會顯示在自訂像素清單的最上方。請在適當的自訂像素行點擊「取消連結」。取消連結像素不會刪除該像素。

刪除自訂像素

您可以刪除不再需要的自訂像素。

步驟:

  1. 在 Shopify 管理介面的顧客事件頁面上,點擊「自訂像素」。
  2. 請在適當的自訂像素行點擊「...」按鈕。
  3. 點擊「刪除」。確認刪除後,自訂像素便從像素管理工具中移除。

刪除自訂像素後無法復原,因此請謹慎為之,以免誤刪。

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

免費試用