Shopify: Purchase Tracking Integration

Easily set up Neocom Purchase Tracking in your Shopify store

With Neocom Purchase Tracking, you can gain valuable insights into your customers' purchase behavior. This guide will walk you through the steps to integrate a custom pixel for purchase tracking in your Shopify store. This will allow you to accurately monitor purchase behavior and optimize your marketing efforts. Simply follow the instructions below to successfully set up the tracking. You can also watch our short setup video.

Step-by-Step Guide

In the admin area of your Shopify store, open Settings.
Click on Customer events.
Select Add custom pixel.
Enter a descriptive name for the pixel, such as Neocom Purchase Tracking.
Use the following settings.
Paste the custom pixel code and click Save.
Finally, press Connect to activate the tracking.

Custom Pixel Code

This code contains an identifier (Client Id) for your account, which you can get in the Admin Portal | Projects | Setup | Integration.

// Add your Neocom client ID below
const neocomClientId = "my-neocom-client-id"
const script = document.createElement('script')
script.type = "text/javascript"
script.src = "https://production.neocomapp.com/neocom.js?id=" + neocomClientId
script.async = true
script.setAttribute('fetchPriority', 'high')
document.head.appendChild(script)
function trackPurchase(purchaseData) {
if (window.Neocom) {
window.Neocom.trackPurchase(purchaseData);
} else {
window.addEventListener("neocomloaded", () => window.Neocom.trackPurchase(purchaseData));
}
}
analytics.subscribe("checkout_completed", (event) => {
try {
const checkoutData = event.data.checkout;
const order = checkoutData.order;
const lineItems = checkoutData.lineItems || [];
const contents = lineItems.map(item => {
const variant = item.variant;
return {
id: variant.product.id,
quantity: item.quantity,
price: variant.price.amount
};
});
const purchaseData = {
value: checkoutData.totalPrice.amount,
currency: checkoutData.currencyCode,
order_id: order.id,
contents: contents
};
trackPurchase(purchaseData);
} catch (error) {}
});

Watch all the steps again in this short video: