Testing custom pixels

After you create a custom pixel, you need to test it to ensure that it loads and that you subscribed to customer events correctly on your online store.

You can use the Shopify Pixel Helper, to test whether your pixel events load and that you subscribed to Shopify events properly.

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.

Tip

If you have a development store, then consider testing pixels on your development store to ensure that they work as expected before adding them to your live online store.

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

Note

The Shopify Pixel Helper isn't compatible with headless commerce stores or password protected stores.

If your online store is password protected, then consider removing your online store password to use the Shopify Pixel Helper.

After you verify that your custom pixel is connected, you can use the Shopify Pixel Helper to test whether the custom pixel is loading and receiving data.

The Shopify Pixel Helper lets you test your pixel on your online store to view the events being received in real-time, alongside the data for those events. 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:
   • Accept tracking on your store's cookie banner or preferences.
   • Click Give consent to continue test.
   • If your pixel still doesn't load, then review your customer privacy settings.
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.

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.

Note

Cookie banners let you request cookie usage consent from your customers. You can browse the Shopify App Store to add a cookie banner to your store.

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 pixel third-party SDK is loaded
• Test whether a third-party pixel SDK is initialized and receiving events

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.