测试自定义像素代码

已于 Oct 03, 2024 打印了此页面。若要查看当前版本，请访问 https://help.shopify.com/zh-CN/manual/promoting-marketing/pixels/custom-pixels/testing。

创建自定义像素代码后，您需要进行测试，确保当您的站点发生事件时，像素代码能够正确发送数据。

您可以使用 Shopify Pixel 帮助程序测试像素代码事件是否加载，以及您是否正确订阅了 Shopify 事件。凭借 Shopify Pixel 帮助程序，您可以在您的在线商店中测试自定义像素代码，以实时查看接收的事件以及这些事件的数据。

如果您的自定义像素代码与自带像素代码帮助程序工具的第三方平台集成，则除了 Shopify Pixel 帮助程序外，您还可以使用第三方像素代码帮助程序来测试像素代码事件是否由第三方平台处理和接收。例如，如果您在商店中添加自定义 TikTok Pixel，则您可以同时使用 Shopify Pixel 帮助程序和 TikTok Pixel 帮助程序来测试您的像素代码。

您可以在第三方像素代码帮助程序所用的相同浏览器访问中使用 Shopify Pixel 帮助程序同时测试这两个平台的事件。

下面是一个自定义像素代码脚本，它将向沙盒触发所有标准事件，并将事件数据记录到控制台。标准事件将在 Shopify Pixel 帮助程序中可见。此外，您还可以订阅其他批量订阅、 all_events、 all_custom_events 和 all_dom_events，探索 Web 像素代码可以提供的所有功能。请访问 Web Pixels API 了解详细信息。

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

本页相关主题

确保已连接自定义像素代码

在测试自定义像素代码之前，请确保已连接自定义像素代码。

步骤：

  1. 在 Shopify 后台中，转至设置 > 客户活动。
  2. 在您要测试的像素代码旁边，验证您的像素代码在状态列中是否显示已连接状态。
  3. 如果未连接像素代码，请点击 ...，然后点击连接。

使用 Shopify Pixel 帮助程序测试自定义像素代码

验证自定义像素代码已连接后，您可以使用 Shopify Pixel 帮助程序测试自定义像素代码是否发送数据和接收您的商店数据。您可以一次测试一个自定义像素代码。

步骤：

  1. 在 Shopify 后台中，转至设置 > 客户活动。
  2. 点击要测试的自定义像素代码。
  3. 点击测试，以在您的网站上打开自定义像素代码进行测试。

  4. 可选：根据您商店的同意设置和自定义像素代码的客户隐私设置，Pixel 帮助程序对话框可能会显示 Pixel 正在等待同意。执行以下任一操作以继续测试：

    • 接受您商店的 cookie 横幅或偏好设置的跟踪。
    • 点击征得同意以继续测试。
    • 如果您的像素代码仍未加载，请查看客户隐私设置。

  5. 若要查看正在加载的事件，请访问要测试像素代码的每个页面，并查看 Pixel 帮助程序对话框，在已接收事件部分中确保事件已成功订阅，并且回调函数已成功：

    • 转到新页面以测试 page_viewed 事件。
    • 点击产品以测试 product_viewed 事件。
    • 将产品添加到购物车以测试 product_added_to_cart 事件。
    • 转到结账页面以测试 checkout_started 事件。
    • 在结账时输入您的发货信息，以测试 checkout_shipping_info_submitted 事件是否取代了checkout_started 事件。
    • 完成结账以测试 checkout_completed 事件是否取代了 checkout_shipping_info_submitted 事件。详细了解如何下测试订单。

  6. 若要查看收到的事件数据，请点击最大化按钮以展开“Pixel 帮助程序”对话框。

查看“已接收事件”部分

当您测试步骤 5 中哪些事件在加载时，Pixel 帮助程序对话框中的已接收事件部分中会显示以下状态之一：

  • 绿色圆点表示事件已成功订阅，回调函数也成功。
  • 红色圆点表示事件已成功订阅，但回调函数失败。了解如何对自定义像素代码进行故障排除。
  • 像素代码帮助程序会显示发生在顶级或回调函数中未捕获的错误。加载像素代码帮助程序时会显示顶级错误。点击展开有红色圆点的活动时，会显示回调错误消息。
  • 以下代码示例包含回调错误和顶级错误。根据顶级错误的位置，像素代码可能无法完全正常工作。 
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 是否加载

检查网络标签的步骤取决于您使用的 Web 浏览器。例如，若要了解如何在 Google Chrome 上检查您的网络标签，请参阅 Chrome 开发人员检查网络活动文档。

若要测试第三方像素代码 SDK 是否已加载，您首先需要检索第三方提供商的 SDK URL 代码，以将其添加到您的像素代码中。如需支持，请联系第三方像素代码提供商。

步骤：

  1. 在 Shopify 后台中，转至设置 > 客户活动。
  2. 点击要测试的自定义像素代码。
  3. 在代码部分，在您的像素代码末尾处输入第三方提供商提供的像素代码 SDK。
  4. 点击保存。
  5. 访问您的在线商店，然后检查网络标签，确保第三方提供商的 SDK URL 正在下载。
  6. 可选：如果第三方像素代码 SDK 未加载，请查看沙盒中的 JavaScript 运行时错误。例如，在 Chrome 上，您可以选择特定的 iFrame 来查看控制台日志，然后将日志范围缩小到您要测试的特定像素代码。若要详细了解如何检查 Chrome 上的 JavaScript 运行时错误，请参阅 Chrome 的 调试 JavaScript 文档。

如果第三方像素代码 SDK 在测试期间未加载，请联系您的第三方像素代码提供商以获取支持。

其他第三方像素代码 SDK 测试

若要测试第三方像素代码 SDK 是已初始化还是正在收集活动，请参阅第三方像素代码提供商的文档。

若要测试像素代码 SDK 是否正在收集活动，系统可能指示您检查浏览器的网络标签。检查网络标签的步骤取决于您使用的 Web 浏览器。例如，若要了解如何在适用于 Google Chrome 的 Google Chrome 浏览器上检查您的网络标签，请参阅 Chrome 开发人员检查网络活动文档。

准备好开始使用 Shopify 进行销售了吗？

免费试用