Shopify integration (Checkout.extensibility / pixel)

Modified on Thu, 11 Jul at 3:48 PM

Following the latest updates from Shopify regarding its order thank you page, it is now possible to place Affilae scripts via pixels. Below are the steps to install Affilae in this case.

Track clicks from your partners

This script must be placed on all pages in the<body> tag. In Shopify, go to the admin and click:

” Online store “ menu
Then, on ” Action “ button
And on ” Edit HTML / CSS “

Then select the theme.liquid file in the tree and add the following code in the <body> tag.

➜ Caution! This script is an example, you must replace PROGRAM_ID by the program_id available in your program configuration, tracking then integration with an Affilae plugin.

<!-- STARTING AFFILAE TRACKING CODE -->

<script type="text/javascript">
    var _ae = {
        "pid":"PROGRAM_ID",
    };
    (function() {
        var element = document.createElement('script'); element.type = 'text/javascript'; element.async = true;
        element.src = '//static.affilae.com/ae-v3.5.js';
        var scr = document.getElementsByTagName('script')[0]; scr.parentNode.insertBefore(element, scr);
    })();
</script>

<!-- ENDING AFFILAE TRACKING CODE -->

Track the sales of your affiliate partners

In the Shopify admin, please navigate to Settings, then on the Customer Events page. It is on this page that you will be able to add the sales tracking pixel.

Click on the Add custom pixel button.

Name your pixel

Delete the text in the box and replace it with the following pixel:

const PROGRAM_ID = 'YOUR_PROGRAM_ID';
const KEY = 'YOUR_KEY';
const AFFILAE_TRACKING = 'https://lb.affilae.com/';
const VERSION = '1.3';
// https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed

let aeCidsLocalStorage = browser.localStorage.getItem('aeEvents' + PROGRAM_ID);
let aeCidsCookie = browser.cookie.get('_affilae' + PROGRAM_ID);

Promise.all([aeCidsLocalStorage, aeCidsCookie,]).then((aeCids) => {
    analytics.subscribe('checkout_completed', (event) => {
        const checkout = event.data.checkout;
        const discountCodes = checkout.discountApplications.map((discount) => {
            if (discount.type === 'DISCOUNT_CODE' || discount.type === 'code') {
                return discount.title;
            }
        });
        const productIds = checkout.lineItems.map((line) => {
            return line.variant.product.id;
        });

        const totalDiscounts = checkout.discountsAmount ? checkout.discountsAmount.amount : 0;
        const adjustedSubtotal = checkout.subtotalPrice.amount - totalDiscounts;

        const cids = (aeCids[0]) ? JSON.parse(aeCids[0]).value : aeCids[1];
        const type = (aeCids[0]) ? 'ls' : 'cookie';

        let aeConvUrl = AFFILAE_TRACKING + '?key=' + KEY;
        aeConvUrl += '&id=' + checkout.order.id;
        aeConvUrl += '&amount=' + adjustedSubtotal.toFixed(2);
        aeConvUrl += '&payment=online';
        aeConvUrl += '&voucher=' + discountCodes.join(';');
        aeConvUrl += '&product=' + productIds.join(';');
        aeConvUrl += '&currency=' + checkout.subtotalPrice.currencyCode;
        aeConvUrl += '&customer=' + checkout.order?.customer?.id;
        aeConvUrl += '&cids=' + cids;
        aeConvUrl += '&type=' + type;
        aeConvUrl += '&source=shopify';
        aeConvUrl += '&v=' + VERSION;

        fetch(aeConvUrl, {
            'method': 'GET',
            'keepalive': true,
            'referrer': 'about:client',
            //'headers': {'referer': event.context.window.location.origin}
        });
    }).catch((error) => {
        console.log(error);
    });

}).catch((error) => {
    console.log(error);
});

You need to modify two pieces of information in this script:

Line 2 : Replace the 'YOUR.ROGRAM_ID' variable with the program ID available in your interface configuration, under tracking, and then integrations with an Affilae module.
Line 3 : Replace the 'YOUR.KEY' variable with the conversion code key also available in the integrations with an Affilae module section of your program's configuration.

Then you will have a pixel that looks like this:

You will then need to save and connect the pixel to your store.

With your pixel now connected, you can proceed to the tracking test step.

Before moving on to the tracking stage, please contact the support team so that they can check your tracking at the same time.

Attachments (1)

Capture d’éc....png
167 KB

Shopify integration (Checkout.extensibility / pixel)

Track clicks from your partners

Track the sales of your affiliate partners

Click on the Add custom pixel button.

Name your pixel

Delete the text in the box and replace it with the following pixel: