Customer events are main actions performed by your audiences that provide insight into how they interact with your business through different points of engagement. This includes making payments, initiating a sale, which is a crucial interaction point. Integrated third-party services improve your marketing automation and analytics by using customer event data generated by pixels.

Having a better understanding of these behaviors can significantly improve your selling strategy by providing data to refine your marketing automation, analytics, and audience targeting. Integrated third-party services can utilize this customer event data, also referred to as log, generated by pixels to fine-tune your selling approach.

This blog will help brand developers understand to add and manage these pixels through your Shopify account. Well, let's try to start with the basics, shall we?

What are pixels?

From an introduction to what pixels are, to creating custom ones for your B2B audience, and to ensuring their successful implementation in your store across various channels, this guide covers all facets you need to know to effectively manage customer interactions within your Shopify community.You may manage pixels that track customer events with the Shopify Pixel Manager.

The Shopify pixels manager lets you add and manage pixels for tracking customer events. Customer events are actions that occur in the customer's browser, such as clicking a link or adding an item to a shopping cart.

The Customer events section of your Shopify administration is where experts can add and manage pixels.

Pixels can be added or migrated to your online store in two ways: app pixels, installed by marketing and data collection apps, and custom pixels, which a developer can add manually through the pixel manager in your account.

Before, merchants could add JavaScript snippets to their online store by hand. They could do this in online preferences, checkout scripts, and apps. They could do this in online preferences, checkout scripts, and English apps. Most of the time, these scripts weren't checked for quality, and managing them took a lot of time. With the pixel manager, your scripts are kept in a single management tool and run in a sandbox environment

Ensure that your theme does not contain any existing tracking codes before beginning. This code is usually found in liquid templates like theme.liquid, product.liquid, and checkout.liquid, as well as in the additional scripts field in the checkout settings. This step is essential to ensure you can confidently press forward without concerns over conflicting scripts.

Benefits for including app pixels or custom pixels in your store

• Access to a stream of customer events, like checkout events, on your online store.
• Additional protection for your online store and your customers, including better control over the customer information you share with third-party providers.
• Prevents unauthorized code from executing non-functioning Javascript or messing with your online store and checkout.
• Integrated tools for privacy compliance

Create the code for a custom pixel 

Creating the third-party JavaScript SDK

The code that is connected with the pixel is given to you by the third-party service you are using. The tracking code and a Javascript SDK are typically the two parts of a pixel. The Shopify pixel sandbox only permits JavaScript, so any HTML in the code for the third-party service must be removed.

This is an example of a Meta pixel. There will be a small variation in pos pixels between third parties.

Image credits: Shopify

You may find domains pixels that are loaded with script src=. Shopify's pixels don't work with HTML, so you'll need to change this to a JavaScript equivalent. The code for tracking PageView events has also been taken out, since it will be added in the next step.

 Image credits: Shopify

You may find pixels that are loaded with script src=. Shopify's pixels don't work with HTML, so you'll need to change this to a JavaScript equivalent. 

You can also take a look at how to subscribe to standard events and custom customer events, which allow you to track additional customer events, such as when someone clicks a button. For instance, if you want to track the occurrence of specific orders, you can create a custom event for that purpose and subscribe to it.

Here is an example of a Google Analytics pixel:

Image credits: Shopify

You can use the following JavaScript code in place of the script src= portion. Make sure the src attribute always matches the HTML version:

Image credits: Shopify

Subscribe to standard events

The PageView event for Meta's pixel looks like this. You should be aware that the function fbq("track") is a part of the Meta code, and that each business will have a different version for which you must consult their documentation.

Image credits: Shopify

You can transfer metadata from some events into your pixel. An example of providing some product information to Meta's ViewContent event is seen below:

Image credits: Shopify

Subscribe to custom customer events

You can add custom customer events if you wish to track extra customer events, such as when someone clicks a button. Standard events and custom events can be subscribed to in the same manner. 

Declare the name of the event to which you wish to subscribe and send this information to the pixel of the third-party service provider.

This is an example of how a custom event may appear in the liquid files of your theme:

Image credits: Shopify

Here's one way you could set up your pixel to subscribe to that custom event:

Image credits: Shopify

Add a custom pixel

Before adding a custom pixel, remove or alter any existing pixels to prevent double counting of customer events. Existing pixel code should be removed manually from all locations, including theme.liquid, checkout.liquid, and additional scripts in your checkout settings.

Steps: 
1. Open settings > Customer events via the Shopify admin.

Image credits: Shopify

2. Give your pixel a distinctive name. If you enter the name of an existing custom pixel, you will be asked to give your pixel a new name.

3. To access the event editor, click Add pixel.

Image credits: Shopify

4. In the Code window, paste your own JavaScript pixel code.

5. To Save your custom pixel, click Save. If you are prepared to connect your custom pixel and begin tracking your events, you may do so by clicking Connect pixel.

Connect a custom pixel in your Shopify store 

After adding a custom pixel, you must connect it to your store so that it can begin tracking customer events.

Steps: 

1. Click on Custom pixels from the Customer events page in your Shopify admin.
2. Under the heading Disconnected pixels, you can see all of the custom pixels that aren't currently connected. Click Connect on the line that has the right custom pixels.

Read the Terms of Service for Shopify. If your Pixel meets the requirements for the service, click Connect.

Disconnect and delete a custom pixel 

You must manually detach the pixel from your online store to stop tracking the events for which you added a custom pixel.

Steps: 

1. Click on Custom pixels from the Customer events page in your Shopify admin. 
2. The custom pixels that are currently linked are displayed at the top of the list. Click Disconnect on the custom pixel line you wish to disconnect. When a pixel is disconnected, it is not deleted. 

You can also get rid of any custom pixels you don’t need anymore.

Steps: 

1. On your Shopify admin’s Customer events page, click Custom pixels. 
2. Click the… button on the custom pixel line you want to change. 

Click Delete. If you confirm the removal, the custom pixel will be taken out of the pixel manager.

Wrap up 

Make sure you are familiar with pixel configuration before creating a custom pixel. 

Here are some things to keep in mind: 

• Always make sure you understand the code you place to your website’s checkout, or get a custom pixel from a Shopify Expert. 
• Because pixels operate in a secure sandbox environment, there are restrictions on what data can be published. 
• The web pixel extension API lets you access browser APIs and subscribe to customer events with the Shopify Lax or Strict sandboxes.

Driven by the expertise of our content engine.