Affilae > Documentations > Shopify integration (Checkout.extensibility / pixel)

Shopify integration (Checkout.extensibility / pixel)

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.

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

 

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 -->
Tracking des clics Shopify

 

 

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.0';
const aeCids = browser.cookie.get('_affilae' + PROGRAM_ID).then(aeCids => {
    // https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_completed
    analytics.subscribe('checkout_completed', (event) => {
        const checkout = event.data.checkout;
        const discountCodes = checkout.discountApplications.map((discount) => {
            if (discount.type === 'DISCOUNT_CODE') {
                return discount.title + ';';
            }
        });
        const productIds = checkout.lineItems.map((line) => {
            return line.variant.product.id + ';';
        });

        let aeConvUrl = AFFILAE_TRACKING + '?key=' + KEY;
        aeConvUrl = aeConvUrl + '&id=' + checkout.order.id;
        aeConvUrl = aeConvUrl + '&amount=' + checkout.subtotalPrice.amount;
        aeConvUrl = aeConvUrl + '&payment=' + 'online';
        aeConvUrl = aeConvUrl + '&voucher=' + discountCodes;
        aeConvUrl = aeConvUrl + '&product=' + productIds;
        aeConvUrl = aeConvUrl + '&currency=' + checkout.subtotalPrice.currencyCode;
        aeConvUrl = aeConvUrl + '&customer=' + event.clientId;
        aeConvUrl = aeConvUrl + '&cids=' + aeCids;
        aeConvUrl = aeConvUrl + '&source=shopify';
        aeConvUrl = aeConvUrl + '&v=' + VERSION;

        fetch(aeConvUrl, {
            'method': 'GET',
            'keepalive': true,
        });
    });
}).catch((error) => {
    console.log(error);
});
Tracking des ventes Shopify (Pixel)

 

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

Line 2 : Replace the ‘YOUR.PROGRAM_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.

© Affilae. Affiliate marketing software. All right reserved.