Log in
Start free trial

Testing custom pixels

After you create a custom pixel, you need to test it to make sure your pixel is sending data correctly when events occur on your site.

You can use the Shopify Pixel Helper, to test whether your pixel events load and that you subscribed to Shopify events properly. The Shopify Pixel Helper lets you test your custom pixel on your online store to view the events being received in real-time, alongside the data for those events.

If your custom pixel integrates with a third-party platform that has its own pixel helper tool, then you can use the third-party pixel helper in addition to the Shopify Pixel Helper to test whether your pixel events are processed and received by the third-party platform. For example, if you add a custom TikTok pixel on your store, then you can use both the Shopify Pixel Helper and TikTok pixel helper to test your pixel.

You can use the Shopify Pixel Helper in the same browser session as a third-party pixel helper to test events for both platforms at the same time.

Here is a custom pixel script that will fire all standard events to the sandbox and log the event data to the console. The standard events will be visible in the Shopify Pixel Helper. Additionally, you can subscribe to other bulk subscriptions, all_events, all_custom_events, and all_dom_events, to discover all that web pixels can provide. Visit the web pixels API for more information.

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

On this page

Ensure that a custom pixel is connected

Before you test your custom pixel, ensure that the custom pixel is connected.

Steps:

  1. From your Shopify admin, go to Settings > Customer events.
  2. Next to the pixel that you want to test, verify your pixel has Connected status displayed in the Status column.
  3. If the pixel isn't connected, then click ..., and then click Connect.

Test a custom pixel using the Shopify Pixel Helper

After you verify that your custom pixel is connected, you can use the Shopify Pixel Helper to test whether your custom pixel is sending data and recieving your store's data. You can test one custom pixel at a time.

Steps:

  1. From your Shopify admin, go to Settings > Customer events.
  2. Click the custom pixel that you want to test.
  3. Click Test to open the custom pixel on your website for testing.
  4. Optional: Depending on your store's consent settings and the custom pixel's customer privacy settings, the Pixel helper dialog might display Pixel is awaiting consent. Do either of the following to continue testing:
  5. To view which events are loading, visit each page that you want to test the pixel for, and review the Pixel helper dialog to ensure that the event was successfully subscribed to and that the callback function was successful in the Events received section:
    • Go to a new page to test the page_viewed event.
    • Click on a product to test the product_viewed event.
    • Add a product to your cart to test the product_added_to_cart event.
    • Go to your checkout to test the checkout_started event.
    • Enter your shipping information at checkout to test that the checkout_shipping_info_submitted event replaces the checkout_started event.
    • Complete checkout to test that the checkout_completed event replaces the checkout_shipping_info_submitted event. Learn more about placing a test order.
  6. To view the event data received, click the Maximize button to expand the pixel helper dialog.

Viewing the Events received section

When you test which events are loading in step 5, one of the following statuses displays in the Events received section of the Pixel helper dialog:

  • A green dot indicates that the event was successfully subscribed to and the callback function was successful.
  • A red dot indicates that the event was successfully subscribed to, but the callback function failed. Learn how to troubleshoot your custom pixel.
  • The pixel helper displays uncaught errors that occur at the top level or in the callback function. Top level errors display when the pixel helper loads. Callback error messages display when you click to expand an event with a red dot.
  • The following code sample contains a callback error and a top level error. Depending on where the top level error is located, the pixel might partially function. 
analytics.subscribe("all_standard_events", event => {
  console.log("Event data ", event?.data);
  throw new Error("callback error");
});
throw new Error("top level error")

To learn more about fixing JavaScript errors, visit Troubleshooting JavaScript.

Troubleshooting your custom pixel

If your pixel doesn't load or fire during testing, and you've already reviewed your event data and pixel code for errors, then try the following troubleshooting measures.

Review your customer privacy settings

If your pixel doesn't load or fire during testing, then there could be customer privacy settings preventing it from loading.

From your Shopify admin, go to Settings > Customer privacy to check for customer privacy settings in your Shopify admin that might apply to your session. Depending on your customer privacy settings, take the following steps:

  • If you have customer privacy settings that require consent in your region, then ensure that you've provided consent through your cookie banner.
  • If you don't have any customer privacy settings that block the pixel from loading, then clear your browser's cookies to reset your cookie banner and provide consent.

If you use a third-party tool to manage consent, then contact your third-party provider for support.

Additional troubleshooting

If it's still unclear whether your custom pixel is properly subscribed to a customer event, then try the following troubleshooting measures:

  • Clear your browser's cookies.
  • If you're testing a standard event, then review Shopify's standard event descriptions developer documentation to ensure that you're performing the required steps to trigger the event.

Third-party pixel helper testing

A pixel SDK (software development kit) contains the tools for your pixel to collect information about customer behavior. You can use your third-party pixel provider's pixel helper to test the following behaviors of your pixel and ensure that the pixel SDK is working as expected:

Test whether a third-party pixel SDK is loaded

The steps to check your network tab depend on the web browser that you use. For example, to learn how to check your network tab on Google Chrome, refer to the Chrome for Developers Inspect network activity documentation.

To test that a third-party pixel SDK is loaded, you first need to retrieve your third-party provider's code for the SDK URL so that you can add it to your pixel code. For support, contact your third-party pixel provider.

Steps:

  1. From your Shopify admin, go to Settings > Customer Events.
  2. Click the custom pixel that you want to test.
  3. In the Code section, enter the pixel SDK that your third-party provider provided to the end of your pixel code.
  4. Click Save.
  5. Visit your online store, and then check your network tab to ensure that the third-party provider's SDK URL is being downloaded.
  6. Optional: If the third-party pixel SDK doesn't load, then check for JavaScript runtime errors in the sandbox. For example, on Chrome you can select a particular iFrame to review console logs for, and then narrow the logs to the specific pixel that you're testing. To learn more about checking for JavaScript runtime errors on Chrome, refer to Chrome's Debug JavaScript documentation.

If the third-party pixel SDK doesn't load during testing, then reach out to your third-party pixel provider for support.

Other third-party pixel SDK testing

To test whether a third-party pixel SDK is initialized or collecting events, refer to your third-party pixel provider's documentation.

To test whether a pixel SDK is collecting events, you might be instructed to check your browser's network tab. The steps to check your network tab depend on the web browser that you use. For example, to learn how to check your network tab on a Google Chrome browser for Google Chrome, refer to the Chrome for Developers Inspect network activity documentation.

Can’t find the answers you’re looking for? We’re here to help.