說明
登入

測試自訂像素

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

您可以使用 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，以探索網頁像素的完整功能。更多資訊，請參閱 web pixels API。

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

本頁內容

確認自訂像素已連線

在測試自訂像素之前，先確認該像素已連線。

步驟：

  1. 在 Shopify 管理介面中，前往 設定 > Customer events。

  2. 在您要測試的像素旁邊，確認於 狀態 欄顯示為 已連線。

  3. 若像素未連線，請按一下 ...，然後按一下 連線。

使用 Shopify Pixel Helper 測試自訂像素

確認自訂像素已連線後，您可使用 Shopify Pixel Helper 測試自訂像素是否正在傳送資料並接收商店的資料。一次只能測試一個自訂像素。

步驟：

  1. 在 Shopify 管理介面中，前往 設定 > Customer events。

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

  3. 按一下 測試 以在您的網站上開啟該自訂像素進行測試。

  4. 選用：依據商店的同意設定與該自訂像素的 customer privacy settings，Pixel Helper 對話方塊可能會顯示 像素正在等待同意。若要繼續測試，請執行下列任一操作：

  5. 若要查看哪些事件已載入，請造訪您要測試像素的各個頁面，並檢視 Pixel Helper 對話方塊，在 Events received 區段中，ensure that the event was successfully subscribed to and that the callback function was successful：

    • 前往新頁面以測試 page_viewed 事件。
    • 按一下某個商品以測試 product_viewed 事件。
    • 將商品加入購物車以測試 product_added_to_cart 事件。
    • 前往結帳頁面以測試 checkout_started 事件。
    • 在結帳頁面輸入運送資訊，以測試 checkout_shipping_info_submitted 事件會取代 checkout_started 事件。
    • 完成結帳，以測試 checkout_completed 事件會取代 checkout_shipping_info_submitted 事件。瞭解詳情：placing a test order。

  6. 若要檢視收到的事件資料，按一下 Maximize 以展開 Pixel Helper 對話方塊。

檢視「Events received」區段

在步驟 5 測試哪些事件已載入時，Pixel Helper 對話方塊的 Events received 區段會顯示下列狀態之一：

  • 綠色圓點表示事件已成功訂閱，且回呼函式已成功執行。
  • 紅色圓點表示事件已成功訂閱，但回呼函式失敗。瞭解如何 troubleshoot your custom pixel。
  • Pixel Helper 會顯示在頂層或回呼函式中發生且未攔截的錯誤。頂層錯誤會在 Pixel Helper 載入時顯示。按一下展開帶有紅色圓點的事件時，會顯示回呼錯誤訊息。
  • 以下程式碼範例同時包含回呼錯誤與頂層錯誤。視頂層錯誤的位置而定，像素可能僅部分運作。
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});

throw new Error("top level error")

如需深入瞭解如何修正 JavaScript 錯誤，請參閱 Troubleshooting JavaScript。

自訂像素疑難排解

如果像素在測試期間無法載入或觸發，且您已檢查事件資料與像素程式碼是否有錯誤，請嘗試以下疑難排解步驟。

檢視您的顧客隱私設定

如果像素在測試期間無法載入或觸發，可能是顧客隱私設定阻止其載入。

在您的 Shopify 管理介面，前往 設定 > Customer privacy，檢查 customer privacy settings in your Shopify admin 是否適用於您的工作階段。根據您的顧客隱私設定，請依下列步驟操作：

  • 如果您的顧客隱私設定在您所在地區需取得同意，請確認您已透過 cookie 橫幅給予同意。
  • 如果沒有任何顧客隱私設定會阻擋像素載入，請清除瀏覽器的 cookie，以重設 cookie 橫幅並給予同意。

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

其他疑難排解

如果仍無法判定您的自訂像素是否已正確訂閱顧客事件，請嘗試以下疑難排解步驟：

  • 清除瀏覽器的 cookie。
  • 如果您正在測試標準事件，請檢閱 Shopify 的 standard event descriptions 開發者文件，確認您已執行觸發該事件所需的步驟。

第三方像素協助工具測試

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

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

檢查網路分頁的步驟會因您使用的網頁瀏覽器而異。例如，若要瞭解如何在 Google Chrome 檢查網路分頁，請參閱 Chrome for Developers 的 Inspect network activity 文件。

要測試第三方像素 SDK 是否已載入，您必須先取得第三方供應商提供的 SDK URL 程式碼，然後將其加入您的像素程式碼。若需支援，請聯絡您的第三方像素供應商。

步驟：

  1. 在 Shopify 管理介面中，前往 設定 > Customer events。

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

  3. 在 程式碼 區段中，將第三方供應商提供的像素 SDK 加到您的像素程式碼的最後。

  4. 按一下 儲存。

  5. 造訪您的網路商店，然後檢查網路分頁，確認第三方供應商的 SDK URL 已下載。

  6. 選用：如果第三方像素 SDK 未載入，請在沙盒中檢查 JavaScript 執行階段錯誤。例如，在 Chrome 中，您可以選取特定 iFrame 來檢視主控台記錄，然後將記錄篩選至您正在測試的特定像素。若要進一步瞭解如何在 Chrome 檢查 JavaScript 執行階段錯誤，請參閱 Chrome 的 Debug JavaScript 文件。

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

其他第三方像素 SDK 測試

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

若要測試像素 SDK 是否正在收集事件，您可能會被指示檢查瀏覽器的網路分頁。檢查網路分頁的步驟會因您使用的網頁瀏覽器而異。例如，若要瞭解如何在 Google Chrome 檢查網路分頁，請參閱 Chrome for Developers 的 Inspect network activity 文件。