Skip to main content

Shopify Pixel Web SDK

Written by Daria Mamchenkova

When a user moves from the checkout page to the thank-you page, the order ID is sometimes lost and not sent to Affise via the postback pixel. Since advertisers require the order ID to approve transactions or conversions, missing IDs result in lost revenue. This issue arises when a Shopify store uses a third-party payment gateway. In such cases, the order ID may not be passed to the thank-you page.

For such a case, you can use Shopify Pixel. This guide walks you through the latest and most reliable method for integrating your Shopify store with the Affise platform using the Affise Web SDK. By connecting the two, you’ll be able to precisely track conversions, attribute sales to the right affiliate channels, and optimize campaign performance - all without relying on outdated tracking methods.

Shopify has changed how tracking works

Shopify has deprecated legacy tracking setups like injecting code into the theme.liquid file or using the Additional scripts section under Checkout settings. The only supported and future-proof method is via Shopify Customer Events, which lets you track store activity using secure and structured event streams.

This guide follows the official approach recommended by Shopify.

Key benefits of using this integration:

  • Accurate conversion tracking: get precise attribution of affiliate-driven sales directly inside your Affise reports.

  • Fully compliant & secure: built to meet Shopify’s latest standards for performance, privacy, and security.

  • Easy to manage: all your tracking logic lives in one place - within the Shopify admin panel.

Before you begin, make sure you have:

  • An active Affise admin account.

  • A Shopify store with admin access.

Integration steps (via Customer Events)

Shopify’s Custom Pixels feature is used to set up the integration. This allows you to listen for events like “Add to cart” or “Checkout completed” and pass conversion data to Affise using the Web SDK.

Step 1. Get your SDK tracking code

  1. In your Affise dashboard, go to Offers > Postbacks > Web SDK.

  2. Copy your script template.

    This code will be adapted for your Shopify store using Customer Events.

🔎 In this guide, we use a customized script that listens for the product_added_to_cart event.

Step 2. Add a custom pixel in Shopify

  1. In your Shopify admin, go to Settings > Customer Events.

  2. Click Add custom pixel.

Step 3. Paste the integration code

  1. Give your pixel a name (e.g., Affise Conversion Tracker).

  2. Click Add Pixel to open the code editor.

  3. Replace the boilerplate with the following script:

// Step 1: Load the Affise Web SDK
// This should be placed in your Shopify Customer Events pixel configuration.
const script = document.createElement('script');
// Important: Replace YOUR_DOMAIN with your actual Affise tracking domain.
script.src = 'https://YOUR_DOMAIN/websdk.js';
script.async = true;
document.head.appendChild(script);

// Step 2: Once the SDK is loaded, set up the event listeners
script.onload = () => {

// A. Track the initial click and store the Offer ID
// This event fires on page loads where URL parameters from affiliates are present.
analytics.subscribe('page_viewed', (event) => {
const url = new URL(event.context.document.location.href);
const offerId = url.searchParams.get('offer_id');
const affiliateId = url.searchParams.get('pid'); // 'pid' is the standard parameter for affiliate_id

// Only generate a click if the required params from the tracking link are present.
if (offerId && affiliateId) {
ASDK.click({
offer_id: offerId,
affiliate_id: affiliateId
})
.then(() => {
// Store the offerId so we can retrieve it on subsequent events
sessionStorage.setItem('affise_offer_id_for_conversion', offerId);
})
.catch(error => {
console.error('Affise SDK: Error tracking click:', error);
});
}
});

// B. Track a conversion when a product is added to the cart
// NOTE: This is an example. For sales tracking, use the 'checkout_completed' event.
analytics.subscribe('product_added_to_cart', (event) => {
const cartLine = event.data.cartLine;

// Retrieve the Offer ID that we stored when the click was tracked
const offerId = sessionStorage.getItem('affise_offer_id_for_conversion');

if (!offerId) {
// If there's no offerId, we can't track the conversion.
// This is expected if the user started their session without an affiliate link.
return;
}

// Get the click_id associated with this offer
const clickId = ASDK.clickId(offerId);

if (!clickId) {
// No clickId found for this offer, so we can't attribute the conversion.
return;
}

// When a product is added to the cart, send the conversion data to Affise
ASDK.conversion({
click_id: clickId,
offer_id: offerId,
status: '1', // 1 = confirmed
sum: cartLine.cost.totalAmount.amount,
order_currency: cartLine.cost.totalAmount.currencyCode,
comment: `Product Added to Cart: ${cartLine.merchandise.title}`
})
.catch(error => {
console.error('Affise SDK: Error tracking conversion:', error);
});
});
};

How it works:

  • Tracks clicks & conversions: the script listens for two separate events. It first captures the offer_id and pid(affiliate ID) from the tracking link on any page view to generate a click. It then uses this click information to attribute a conversion when the product_added_to_cart event fires. For the script to work properly, offer_id and pid must be present in the tracking URL that leads to Shopify store. This ensures uninterrupted tracking even in the browsers that don’t support 3rd party cookies like Safari.

  • Dynamic Offer ID: the script automatically finds the offer_id from the URL, stores it in the user's session, and uses it to fire the conversion, so you don't have to hard-code any IDs.

  • Event-based tracking: this example uses product_added_to_cart. To track actual sales revenue, you would simply change this event to checkout_completed and adjust the parameters to match that event's data structure.

🔎 Shopify supports a wide range of events. You can view full list of supported events here. You can also enrich your tracking with custom values like SKUs, currency, and product IDs.

Step 4. Save and activate your pixel

  1. In the top-right corner of the pixel editor click Save.

  2. Go to Settings > Customer Events.

  3. Click Connect next to your newly created pixel.

Testing the integration

It’s important to verify that everything is working correctly before going live. For that, do the following:

  1. Generate a tracking link in your Affise dashboard from the offer preview page.

  2. Visit your Shopify store using that link (this sets the click ID).

  3. Trigger a test event (e.g., add a product to cart).

  4. Check Statistics > Conversions in your Affise account to see if a conversion was recorded. If conversion doesn’t appear for some reason, you can check Statistics > Server Postback section to investigate the problem.

If you see the conversion inside Affise, you’re all set.

🔎 Troubleshooting tips:

  • Make sure you’ve correctly inserted your tracking domain and offer ID.

  • Use your browser’s console to inspect event.data for the right structure.

  • Test using an Incognito window with all browser extensions disabled.

  • Reach out to [email protected] if you need help.


Please contact the Affise Customer Support team regarding all raised questions via the e-mail: [email protected].

Did this answer your question?