登入
開始免費試用

測試自訂像素

建立自訂像素後需進行測試，確保網站發生事件時，像素能夠正確傳送資料。

您可以使用 Shopify Pixel Helper 來測試像素事件是否載入，以及您是否正確訂閱 Shopify 事件。Shopify Pixel Helper 能協助您測試網路商店的自訂像素，以即時檢視接收的事件和這些事件的資料。

如果您的自訂像素與具有專用像素協助工具的第三方平台整合，則除了 Shopify Pixel Helper 外，您還可以使用第三方像素協助工具來測試第三方平台是否正確處理和接收像素事件。例如，若您在商店中新增了自訂 TikTok 像素，則您可以同時使用 Shopify Pixel Helper 和 TikTok 像素協助工具來測試像素。

在與第三方像素協助工具同一個瀏覽器工作階段中，您可以使用 Shopify Pixel Helper 同時測試這兩個平台的事件。

以下這段自訂像素指令碼除了向沙箱啟動所有標準事件外，還會將事件資料記錄到主控台。在 Shopify Pixel Helper 中可查看標準事件。此外，您還可以訂閱其他大量訂閱事件、all_events、all_custom_events 和 all_dom_events，以探索網頁像素可提供的所有功能。如需更多資訊，請造訪網頁像素 API。

analytics.subscribe("all_standard_events", event => {
console.log("Event data ", event?.data);
});

此頁面上

確保已連結自訂像素

在測試自訂像素之前，請確保已連結自訂像素。

步驟如下：

  1. 在 Shopify 管理介面 中，前往「設定」>「顧客事件」。

  2. 在要測試的像素旁邊，驗證您的像素是否在「狀態」欄中顯示「已連結」狀態。

  3. 若未連結像素，請按一下「...」，然後點按「連結」。

使用 Shopify Pixel Helper 測試自訂像素

驗證自訂像素已連結後，您可以使用 Shopify Pixel Helper 測試自訂像素是否傳送資料和接收商店資料。一次只可測試一個自訂像素。

步驟如下：

  1. 在 Shopify 管理介面 中，前往「設定」>「顧客事件」。

  2. 點按您要測試的自訂像素。

  3. 按一下「測試」以開啟您網站上要測試的自訂像素。

  4. 選用：根據您商店的同意設定和自訂像素的顧客隱私設定，「像素協助工具」(Pixel helper) 對話方塊可能會顯示「像素正在等待同意」(Pixel is awaiting consent)。請執行以下任一操作以繼續測試：

    • 在商店的 Cookie 橫幅或偏好設定接受追蹤。
    • 按一下「同意以繼續測試」(Give consent to continue test)。
    • 如果您的像素仍未載入，請檢閱顧客隱私設定。

  5. 若要檢視正在載入的事件，請瀏覽要測試像素的每個頁面，並檢視「像素協助工具」(Pixel helper) 對話方塊，在「已接收事件」(Events received) 區段中確保已成功訂閱事件，且回呼功能也順利運作：

    • 前往新頁面以測試 page_viewed 事件。
    • 按一下商品以測試 product_viewed 事件。
    • 將商品新增到購物車以測試 product_added_to_cart 事件。
    • 前往結帳頁面以測試 checkout_started 事件。
    • 在結帳頁面輸入運送資訊，測試 checkout_shipping_info_submitted 事件是否取代 checkout_started 事件。
    • 完成結帳以測試 checkout_completed 事件是否取代 checkout_shipping_info_submitted 事件。深入瞭解如何送出測試訂單。

  6. 若要檢視收到的事件資料，請點按「最大化」(Maximize) 按鈕以展開像素協助工具對話方塊。

檢視已接收事件區段

當您在步驟 5 測試載入的事件時，「像素協助工具」(Pixel helper) 對話方塊中的「已接收事件」(Events received) 區段會顯示以下其中一種狀態：

  • 綠色圓點表示已成功訂閱事件，回呼功能也順利運作。
  • 紅色圓點表示已成功訂閱事件，但回呼功能運作失敗。瞭解如何對自訂像素進行疑難排解。
  • 像素協助工具會顯示發生在最上層或回呼功能中的未發現錯誤。載入像素協助工具時即會顯示最上層錯誤。點按紅色圓點以展開事件時，則會顯示回呼錯誤訊息。
  • 下方的程式碼範例包含了回呼錯誤和最上層錯誤。根據最上層錯誤的位置，像素可能會部分運作。 
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

若要深入瞭解如何修正 JavaScript 錯誤，請前往 JavaScript 疑難排解。

對自訂像素進行疑難排解

如果像素在測試期間未載入或觸發，而且您已檢視事件資料和像素程式碼中的錯誤，請嘗試下列疑難排解措施。

檢視顧客隱私設定

如果像素在測試期間未載入或觸發，可能是顧客隱私設定阻擋了像素載入。

在 Shopify 管理介面中，前往「設定」>「顧客隱私權」，查看 Shopify 管理介面中可能適用於您工作階段的顧客隱私設定。請根據顧客隱私設定執行下列步驟：

  • 如果您所在地區的顧客隱私設定需徵得同意聲明，請確保您已透過 Cookie 橫幅提供同意聲明。
  • 如果您沒有任何阻擋像素載入的顧客隱私設定，請清除瀏覽器的 Cookie 以重設 Cookie 橫幅並提供同意聲明。

若您使用第三方工具管理同意聲明，請聯絡第三方供應商以取得支援。

其他疑難排解

如果仍不清楚自訂像素是否正確訂閱了顧客事件，請嘗試採取下列疑難排解動作：

  • 清除瀏覽器的 Cookie。
  • 如果您測試的是標準事件，請查看 Shopify 的標準事件說明開發人員說明文件，確保您執行了觸發事件所需的步驟。

第三方像素協助工具測試

像素 SDK (軟體開發工具包) 包含協助像素收集顧客行為相關資訊的工具。您可以使用第三方像素供應商的像素協助工具測試像素的下列行為，並確保像素 SDK 如預期運作：

測試第三方像素 SDK 是否載入

檢查網路分頁的步驟會依您使用的網頁瀏覽器而定。例如，若要瞭解如何在 Google Chrome 上檢查網路分頁，請參閱 Chrome for Developers 的「檢查網路活動」說明文件。

若要測試第三方像素 SDK 是否已載入，您需先擷取第三方供應商的 SDK 網址程式碼，然後加入像素程式碼中。如需支援，請聯絡第三方像素供應商。

步驟如下：

  1. 在 Shopify 管理介面 中，前往「設定」>「顧客事件」。

  2. 點按您要測試的自訂像素。

  3. 在「代碼」區段中，於像素程式碼結尾輸入第三方供應商提供的像素 SDK。

  4. 按一下「儲存」。

  5. 前往您的網路商店並檢查網路分頁，確認已下載第三方供應商的 SDK 網址。

  6. 選用：若未載入第三方像素 SDK，請檢查沙箱中的 JavaScript 執行階段錯誤。舉例來說，您可以在 Chrome 選取一個特定的 iFrame 來查看主控台記錄，然後將記錄範圍縮小到要測試的特定像素。若要深入瞭解如何在 Chrome 上檢查 JavaScript 執行階段錯誤，請參閱 Chrome 的「為 JavaScript 偵錯」說明文件。

如果測試期間無法載入第三方像素 SDK，請聯絡第三方像素供應商以取得支援。

其他第三方像素 SDK 測試

若要測試第三方像素 SDK 是否初始化或者收集事件，請參閱第三方像素供應商的說明文件。

若要測試像素 SDK 是否在收集事件，系統可能會指示您檢查瀏覽器的網路分頁。檢查網路分頁的步驟會依您使用的網頁瀏覽器而定。例如，若要瞭解如何在 Google Chrome 瀏覽器上檢查 Google Chrome 網路分頁，請參閱 Chrome for Developers 的「檢查網路活動」說明文件。

沒有找到您需要的答案嗎？我們很樂意為您提供協助。