TABLE OF CONTENTS
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 cartoffers listed in side carts.- “Bundled”
add to cartbuttons that add multiple products to a shopping cart at the same time. - Custom
add to cartbuttons that don’t use Shopify’s standard product forms. add to cartbuttons 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.
- By setting up a Custom Pixel in the Shopify Admin, which leverages this API.
- By disabling Fueled’s default
add to carttracking 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:
This will take you to a screen where you can enter the Custom Pixel code:
On this screen, you will want to enter the code snippet found at:
(Note, you will not want to add javascript tags before/after this snippet. Shopify will add them on your behalf.)
Then, you will want to edit the following variables at the bottom of the script to use your Shopify store’s credentials:
To get these two variables (analyticsWriteKey and gTarget, you will want to open the HTML source for your Shopify site.
If you have Fueled’s client-side tracking library enabled you will find these two values here:
(Screenshot of a Shopify’s HTML source, pointing to the analyticsWriteKey and gTarget variables. You can also keyword search for these in the HTML source.)
Note: This values should be entered in quotes, like this:
From there, click “Save” and “Connect”.
If you’d successfully connected this Custom Pixel, you should see the following:
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:
Set this value to “Deactivated”, so that it reads:
Standard “Add to Cart” tracking is currently deactivated.