帮助
登录

测试自定义像素代码

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

您可以使用 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. 如果像素未连接，请执行以下操作：

    1. 点击 Horizontal menu > 查看详细信息。
    2. 可选：查看并更新您的像素代码，然后点击保存。
    3. 点击连接。
    4. 在确认对话框中，点击连接。

使用 Shopify Pixel Helper 测试自定义像素代码

验证自定义像素已连接后，您可以使用 Shopify Pixel Helper 来测试自定义像素是否正在发送数据以及接收商店数据。

在使用 Shopify Pixel Helper 之前，请查看以下注意事项：

  • 使用 Shopify Pixel Helper 每次只能测试 1 个自定义像素。
  • 在 Shopify Pixel Helper 运行时，您无法对正在测试的像素进行更改。若要测试新的更改，请保存您的像素，关闭 Shopify Pixel Helper 标签页，然后再次打开 Shopify Pixel Helper。
  • 导航到新页面时，系统会清除事件日志。例如，如果您将产品添加到购物车，并且 Shopify Pixel Helper 记录了 product_added_to_cart 事件，那么当您导航到新的产品页面或购物车页面时，该日志会被清除。
  • Shopify Pixel Helper 没有关闭按钮。如需停止测试，您必须关闭 Shopify Pixel Helper 打开的标签页。
  • Shopify Pixel Helper 与无头商务商店或受密码保护的商店不兼容。
  • 如果您的在线商店受密码保护，请考虑删除您的在线商店密码以使用 Shopify Pixel Helper。

步骤：

  1. 在 Shopify 后台中，转至设置 > 客户事件。

  2. 点击您要测试的自定义像素代码。

  3. 点击测试，在您的网站上打开该自定义像素代码进行测试。

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

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

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

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

  6. 若要查看收到的事件数据，请点击 最大化 以展开像素代码帮助程序对话框。

查看“收到的事件”部分

当您在步骤 5 中测试正在加载的事件时，像素代码帮助程序对话框的收到的事件部分会显示以下状态之一：

  • 绿点表示事件已成功订阅并且回调函数成功。
  • 红点表示事件已成功订阅，但回调函数失败。了解如何对您的自定义像素代码进行故障排除。
  • 像素代码帮助程序会显示在顶层或回调函数中发生的未捕获的错误。顶层错误会在像素代码帮助程序加载时显示。当您点击展开带有红点的事件时，会显示回调错误消息。
  • 以下代码示例包含一个回调错误和一个顶级错误。根据顶级错误所在的位置，像素可能只能部分运行。
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 横幅应用）来管理同意信息，则该工具必须通过 Customer Privacy API 将同意信息同步到 Shopify。如果同意信息未同步到 Shopify，即使客户已提供同意，您的像素可能也不会触发。请联系您的第三方提供商，确认同意信息正同步至 Shopify，或获取其他支持。

其他故障排除

如果仍不清楚您的自定义像素是否已正确订阅客户事件，请尝试以下故障排除措施：

  • 清除浏览器的 Cookie。
  • 如果您正在测试标准事件，请查看 Shopify 的标准事件描述开发人员文档，以确保您正在执行触发该事件所需的步骤。

如果您发现在从较旧的像素设置迁移后跟踪的事件数量存在差异，请参阅迁移后的故障排除。

第三方像素助手测试

像素 SDK (软件开发套件) 包含可供您的像素收集客户行为信息的工具。您可以使用第三方像素提供商的像素助手来测试像素的以下行为，并确保像素 SDK 按预期工作：

测试是否已加载第三方像素 SDK

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

若要测试是否已加载第三方像素 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 浏览器上检查网络标签，请参阅 Chrome for Developers 检查网络活动文档。