Tracking Ecommerce Events on Shopify
For FigPii to track data on your Shopify store, you'll need to install the FigPii app from the Shopify App Store. The FigPii app allows you to connect a single Shopify store to your FigPii account. The plug-in automatically installs the tracking code on your Shopify store's pages.
Before gettings started
Retrieve your tracking code and access key from your FigPii dashboard.
Tracking code
1. Login to your FigPii account here
2. Click on Tracking ON / Tracking Stopped / Tracking OFF in the top left corner.
3. Click on Copy Code.
Save this aside, this code will be added to the <head> section of theme.liquid — and checkout.liquid if you're on Shopify Plus.
FigPii Access Key
Each website on FigPii has its own unique access key, to retrieve your access key, first copy your tracking code by following the steps above,
<!-- FigPii Asynchronous Tracking Code -->
<script>!function(){var n=document.createElement('script');n.crossOrigin='anonymous',n.async='async',n.src='https://tracking-cdn.figpii.com/1888276374.js',document.head.append(n),window._fpEvent=window._fpEvent||[]}();</script>
<!-- End FigPii Asynchronous Tracking Code -->
Your access key is placed within the tracking code, in the case above, the access key is 1888276374
Limitations of the FigPii Shopify App
Due to limitations from Shopify, it's best to manually add your FigPii tracking code to theme.liquid. You can follow these steps to add your tracking code Shopify.
Why install the app if I need to add the code manually?
The benefit of installing our app is you get backend tracking for conversions and revenue. Our app takes advantage of Shopify Webhooks to ensure 100% accuracy in revenue and conversion tracking.
Tracking and testing on Shopify Checkout
If you are on Shopify Plus and plan on running A/B tests, you can add your tracking code to checkout.liquid
You can follow the steps here to add your tracking code to checkout.liquid Shopify.
Due to Shopify limitations, testing on checkout is only supported on stores with checkout.liquid activated. Checkout Extensibility is not supported at the moment but we're working closely with Shopify to enable A/B testing on Checkout Extensibility.
Tracking Ecommerce Events
Before proceeding, make sure you're retrieved your Access Key by following the steps above.
How to add Custom Pixels to Shopify
All the Ecommerce events mentioned below are tracked using Shopify Custom Pixels. You can learn more here: Custom Pixels
To add a custom pixel to your store, first log in to your Shopify Admin.
1. Click on Settings in the lower left corner.
2. Switch to Customer Events.
3. Click on Add Custom Pixel.
4. Give your pixel a name, name suggestions are mentioned in the steps below. Then click on Add Pixel.
5. Paste the custom pixel code within the Code section.
6. Place in your Access Key and Click on Save.
7. Click on Connect.
That's it, you're done!
Tracking Orders and Revenue
To facilitate 100% accuracy in order and revenue tracking, add following Custom Pixel to your store.
| Recommended Pixel Name | FigPii Event Value |
| FigPii Order and Revenue Tracking | purchase |
Custom Pixel JavaScript Code:
analytics.subscribe("checkout_completed", event => {
const piiTester = document.createElement('script');
piiTester.crossOrigin = 'anonymous';
piiTester.src = "https://tracking-cdn.figpii.com/REPLACE_WITH_ACCESS_KEY.js";
document.head.append(piiTester);
window._fpEvent = window._fpEvent || [];
const data = event.data.checkout;
window._fpEvent.push(["addRevenue", {
revenue: data.totalPrice.amount
}]);
window._fpEvent.push(["eventConversion", {
value: "purchase"
}]);
for (let index = 0; index < data.lineItems.length; index++) {
const item = data.lineItems[index];
window._fpEvent.push(["addItem", {
price: parseFloat(item.variant.price.amount),
id: item.variant.id,
quantity: item.quantity,
name: item.title
}]);
}
window._fpEvent.push(["processOrder", {
revenue: parseFloat(data.totalPrice.amount),
orderId: data.order.id
}]);
window._fpEvent.push(["eventConversion", {
value: "ecommerceUniqueOrder" + data.order.id
}]);
});
Tracking Add To Cart
| Recommended Pixel Name | FigPii Event Value |
| FigPii Add To Cart Event | product_added_to_cart |
Custom Pixel JavaScript Code:
analytics.subscribe("product_added_to_cart", event => {
const piiTester = document.createElement('script');
piiTester.crossOrigin = 'anonymous';
piiTester.src = "https://tracking-cdn.figpii.com/REPLACE_WITH_ACCESS_KEY.js";
document.head.append(piiTester);
window._fpEvent = window._fpEvent || [];
window._fpEvent.push(["eventConversion", {
value: "product_added_to_cart"
}]);
});
Tracking Begin Checkout
| Recommended Pixel Name | FigPii Event Value |
| FigPii Begin Checkout Event | checkout_started |
Custom Pixel JavaScript Code:
analytics.subscribe("checkout_started", event => {
const piiTester = document.createElement('script');
piiTester.crossOrigin = 'anonymous';
piiTester.src = "https://tracking-cdn.figpii.com/REPLACE_WITH_ACCESS_KEY.js";
document.head.append(piiTester);
window._fpEvent = window._fpEvent || [];
window._fpEvent.push(["eventConversion", {
value: "checkout_started"
}]);
});
Tracking Remove From Cart
| Recommended Pixel Name | FigPii Event Value |
| FigPii Remove From Cart Event | product_removed_from_cart |
Custom Pixel JavaScript Code:
analytics.subscribe("product_removed_from_cart", event => {
const piiTester = document.createElement('script');
piiTester.crossOrigin = 'anonymous';
piiTester.src = "https://tracking-cdn.figpii.com/REPLACE_WITH_ACCESS_KEY.js";
document.head.append(piiTester);
window._fpEvent = window._fpEvent || [];
window._fpEvent.push(["eventConversion", {
value: "product_removed_from_cart"
}]);
window._fpEvent.push(["eventConversion", {
value: "product_removed_from_cart_id_" + event.data.cartLine.merchandise.product.id
}]);
});
Tracking View Cart
| Recommended Pixel Name | FigPii Event Value |
| FigPii View Cart Event | cart_viewed |
Custom Pixel JavaScript Code:
analytics.subscribe("cart_viewed", event => {
const piiTester = document.createElement('script');
piiTester.crossOrigin = 'anonymous';
piiTester.src = "https://tracking-cdn.figpii.com/REPLACE_WITH_ACCESS_KEY.js";
document.head.append(piiTester);
window._fpEvent = window._fpEvent || [];
window._fpEvent.push(["eventConversion", {
value: "cart_viewed"
}]);
});
Tracking Search Submitted
| Recommended Pixel Name | FigPii Event Value |
| FigPii Search Submitted Event | search_submitted |
Custom Pixel JavaScript Code:
analytics.subscribe("search_submitted", event => {
const piiTester = document.createElement('script');
piiTester.crossOrigin = 'anonymous';
piiTester.src = "https://tracking-cdn.figpii.com/REPLACE_WITH_ACCESS_KEY.js";
document.head.append(piiTester);
window._fpEvent = window._fpEvent || [];
window._fpEvent.push(["eventConversion", {
value: "search_submitted"
}]);
});
Define your events in FigPii Site Goals
After adding the Custom Pixels to your Shopify Store, head back to your FigPii dashboard and navigate to FigPii Site Goals.
Click on Add New Definition then New Goal.
Give your goal a name. For example, Add To Cart.
Then under Trigger Rules, choose Custom Event and paste in the FigPii Event Value in the pattern field.
You can fine the FigPii Event Value in the tables above under each Custom Pixel.