Custom Pixel For Tracking ATC Events

The Problem

Fueled provides an out-of-the-box solution for tracking add to cart events on your Shopify store. This solution adds a javascript event listener on your store’s “Add to Cart” buttons.

For most merchants, this works quite well. We have tested this default solution against many different Shopify 2.0 themes, and it will correctly track add to cart events on most Product Description Pages and Product Collection Pages.

However, some Shopify themes have been customized in ways that make it more difficult for our default solution to capture all add to cart events. Examples of when our default solution might not capture all of these events include:

• add to cart offers listed in side carts.

• “Bundled” add to cart buttons that add multiple products to a shopping cart at the same time.

• Custom add to cart buttons that don’t use Shopify’s standard product forms.

• add to cart buttons that immediately redirect to the Cart page or Checkout.

The Solution

In late 2022, Shopify released its Web Pixel API. This API provides an alternative solution for tracking attribution events. While the API has many benefits, it’s not a perfect solution for full attribution tracking — so we haven’t migrated Fueled over to the Web Pixel API completely.

That said, there are certain use cases, such as with add to cart events, where the Web Pixel API can be quite helpful.

Tracking add to cart events with Fueled with the Web Pixel API

Merchants can leverage the Web Pixel API for tracking add to cart events in two steps.

1. By setting up a Custom Pixel in the Shopify Admin, which leverages this API.

2. By disabling Fueled’s default add to cart tracking event.

Step 1: Setting up a Custom Pixel in the Shopify Admin UI

To set up a Custom pixel, go to:

https://admin.shopify.com/store/[your-store-name]/settings/customer_events

(The click-through path to this configuration screen is: Settings > Customer Events)

Here, you should see the screen below:

Screenshot of the custom events configuration page.

From this screen, click “Add custom pixel”, and name it Fueled Add To Cart:

Screenshot for the Shopify interface for adding a custom pixel

This will take you to a screen where you can enter the Custom Pixel code:

Screenshot of the Shopify user interface for adding custom pixel code.

On this screen, you will want to enter the code snippet found at:

https://github.com/fueled-io/client-scripts/blob/main/shopify/custom_pixel.js

It should look like this:

Screenshot of Fueled custom pixel code added to the Custom Pixel UI in Shopify

From there, click “Save” and “Connect”.

If you’d successfully connected this Custom Pixel, you should see the following:

Screenshot of what a merchant will see after successfully saving and connecting Fueled's custom pixel

Step 2: Disabling Fueled’s default add to cart tracking event

Once you have set up the Custom Pixel, you will want to go into the Fueled App for Shopify and disable our standard add to cart event tracking:

If you are using Fueled's custom pixel for your add_to_cart events, be sure to deactivate our standard add_to_cart event.

Set this value to “Deactivated”, so that it reads:

Standard “Add to Cart” tracking is currently deactivated.