Using the App Pixel vs. Custom Pixel for the Shopify Source

Overview

Elevar supports two methods for capturing checkout and purchase events for your Shopify Source:

  • App Pixel (Recommended)
  • Custom Pixel

For most Shopify stores, the App Pixel is the recommended option. During installation, Elevar automatically creates and manages the App Pixel for you, allowing checkout events to be tracked without any manual setup or ongoing maintenance. Because the App Pixel is managed by Elevar, it automatically receives future improvements and updates, reducing the need for manual intervention.

For merchants with more advanced tracking requirements, Elevar also supports using a Shopify Custom Pixel. While a Custom Pixel requires manual setup and maintenance, it provides additional flexibility for customizing checkout tracking, configuring Shopify Customer Privacy settings, and running additional scripts alongside Elevar's checkout tracking.

Choose the tracking method that best fits your implementation. If your store does not require any advanced customization, Elevar recommends using the App Pixel.

When Tracking With a Custom Pixel is Preferred

Although the App Pixel is recommended for most merchants, there are several scenarios where using a Custom Pixel is the better option.

You Need to Customize the Data Layer:

If you need to modify the data that Elevar sends or create your own events during checkout or on the Thank You page, you'll need to use a Custom Pixel. Common customization scenarios include, transforming existing Data Layer events, adding custom properties to events, creating custom Data Layer events and implementing checkout-specific event logic. Once your Custom Pixel has been configured, you can follow the instructions in Customizing Elevar's Data Layer to add your customization code.

Follow this guide to learn more about customizing Elevar's Data Layer.

You Need to Configure Customer Privacy Settings:

Shopify's Customer Privacy settings for Web Pixels allow configuration when using a Custom Pixel. If your implementation requires configuring settings such as Permission Settings or Data Sale Settings, you'll need to use a Custom Pixel so these options can be configured within Shopify.

Follow this guide to learn more about how to set up customer privacy settings in Shopify Custom Pixel.

If you're using Strict Consent Mode, you may need the additional control provided by Shopify's Customer Privacy settings within a Custom Pixel. Strict Consent Mode prevents data storage and processing until consent has been granted. Depending on your consent strategy and how your consent management platform integrates with Shopify's Privacy API, configuring a Custom Pixel may be necessary to achieve your desired consent behavior.

Follow this guide to learn more about Strict Consent mode.

You Need Additional Scripts Within the Same Web Pixel:

If you need to include additional JavaScript alongside Elevar's checkout tracking, a Custom Pixel allows you to run those scripts within the same Shopify Web Pixel. This is commonly used when implementing custom integrations or additional tracking logic that needs to execute alongside Elevar's checkout events.


How to Add a Custom Pixel

You've determined you prefer to use a Custom Pixel for your checkout tracking with Shopify. Follow these steps

Access Shopify Source:

  • Begin on the Elevar dashboard and use the left-hand navigation menu to click on the "My Tracking" tab.

  • Navigate to your list of sources and click on the Shopify Source.

    • (See Figure 1)
Step 1 screenshot

Figure 1

Access Shopify Advanced Options:

  • Once in the Shopify Source, use the "Setup Steps" box to click on the "General Settings" tab.
  • Navigate to the section of the page titled "General Settings" and click on the "Advanced Options" drop-down.
    • (See Figure 2)
Step 2 screenshot

Figure 2

Enable Custom Pixel:

  • Navigate to the section of the page titled "Web Pixel Settings". Locate and click on the "Use Custom Pixel" option.
  • Once you have selected the "Use Custom Pixel" option, navigate to the script box and click on the "Copy to Clipboard" button.
    • (See Figure 3)
Step 3 screenshot

Figure 3

Access Shopify Customer Events Settings:

  • Once you have copied the Custom Pixel script, access your Shopify store.
    • Click on the "Settings" button located in the bottom left-hand corner of the homepage.
    • Once in the Shopify settings, use the left-hand navigation menu to click on the "Customer events" tab.
      • (See Figure 4)
Step 4 screenshot

Figure 4

Add Custom Pixel:

  • Once you have accessed the customer events settings, click on the "Add Custom Pixel" button located in the top right-hand corner of the page.
    • An additional pop-up window will appear titled "Add Custom Pixel". Use the text box labeled "Pixel Name" and name the Custom Pixel.
    • Once you have entered all of the required information for adding a Custom Pixel, click on the "add pixel" button located in the bottom right-hand corner of the window.
      • (See Figure 5)
Step 5 screenshot

Figure 5

Configure and Save Custom Pixel:

  • Navigate to the section of the page titled "Code" and paste the Custom Pixel script previously copied from the Elevar app.
    • Be sure to review the selected customer privacy settings for the Custom Pixel. Follow this guide to learn how to set up customer privacy settings in Shopify Custom Pixel.
  • Once you have entered all of the required information for configuring the Custom Pixel, click on the "Save" button located at the top of the page. Then click on the "Connect" button located in the top right-hand corner of the page.
    • (See Figure 6)
Step 6 screenshot

Figure 6


How to Remove a Custom Pixel

Only remove your Custom Pixel if you've updated your settings to use app pixel.

Access Shopify Source:

  • Begin on the Elevar dashboard and use the left-hand navigation menu to click on the "My Tracking" tab.

  • Navigate to your list of sources and click on the Shopify Source.

    • (See Figure 7)
Step 1 screenshot

Figure 7

Access Shopify Advanced Options:

  • Once in the Shopify Source, use the "Setup Steps" box to click on the "General Settings" tab.
  • Navigate to the section of the page titled "General Settings" and click on the "Advanced Options" drop-down.
    • (See Figure 8)
Step 2 screenshot

Figure 8

Enable App Pixel:

  • Navigate to the section of the page titled "Web Pixel Settings". Locate and click on the "Use App Pixel" option.
  • Once you have selected the "Use App Pixel" option, click on the "Save" button located at the bottom of the page.
    • (See Figure 9)
Step 1 screenshot

Figure 9

Access Shopify Customer Events Settings:

  • Once you have copied the Custom Pixel script, access your Shopify store.
    • Click on the "Settings" button located in the bottom left-hand corner of the homepage.
    • Once in the Shopify settings, use the left-hand navigation menu to click on the "Customer events" tab.
      • (See Figure 10)
Step 4 screenshot

Figure 10

Remove Custom Pixel:

  • Once you have accessed the custom events settings in Shopify, locate your previously configured Custom Pixel. Note the Elevar app pixel will have a purple logo, while the Custom Pixel will have a click icon as the logo.
  • Once you have located the Custom Pixel, click on the three dots. An additional pop-up menu will appear, click on the "Delete" option.
    • (See Figure 11)
Step 1 screenshot

Figure 11


Did this page help you?