Intégration Shopify (Checkout.extensibility / pixel)

Suite aux dernières mises à jour de Shopify concernant sa page de remerciement de commande, il est désormais possible de poser les scripts Affilae via des pixels.
Vous trouverez-ci-après les différentes démarches pour installer Affilae dans ce cas.

Important : Avant de passer à l’étape de tracking, veuillez obligatoirement contacter l’équipe support afin qu’elle réalise en parallèle des vérifications de votre tracking.

Tracker les clics de vos partenaires affiliés

Afin de tracker les clics envoyés par vos partenaires, le script ci-dessous doit être poser sur toutes les pages du site dans la balise<body>. Pour le faire dans votre Shopify, rendez-vous dans l’admin et cliquez sur :

Le menu Online store / Boutique en ligne
Cliquez sur le bouton Thème
Puis, le bouton Actions
Et sur Edit HTML / CSS / Modifier le code

Sélectionnez ensuite le fichier theme.liquid dans l’arborescence et ajouter le code suivant dans la balise <body>.

➜ Attention, ce script est exemple, vous devez remplacer le champ PROGRAM_ID par le program ID disponible dans la partie configuration de votre interface, puis tracking et enfin intégrations avec un module Affilae.

<!-- 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

Tracker les ventes de vos partenaires affiliés

Dans l’admin Shopify, veuillez vous rendre dans les paramètres puis sur la page évènements clients. C’est sur cette page que vous allez pouvoir ajouter le pixel de tracking des ventes.

Voici les différentes étapes :

Cliquez sur le bouton ajouter un pixel personnalisé.

Nommer votre pixel

Supprimer le texte de l’encart et le remplacer par le pixel suivant :

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);
});

Tracking des ventes Shopify (Pixel)

Il faut dans ce script modifier deux informations :

Ligne 2 : Remplacer la variable ‘YOUR.PROGRAM_ID‘ par le program ID disponible dans la configuration de votre interface, puis tracking et enfin intégrations avec un module Affilae.
Ligne 3 : Remplacer la variable ‘YOUR.KEY‘ par la clé du code de conversion disponible aussi dans la partie intégrations avec un module Affilae de la configuration de votre programme.

Vous aurez alors un pixel qui ressemble à ceci :

Restera à sauvegarder et à connecter le pixel à votre boutique.

Notes :

Le programme doit être en paramètre.

Votre pixel désormais connecté, vous pouvez passer à l’étape du test des trackings.

Intégration Shopify (Checkout.extensibility / pixel)

Tracker les clics de vos partenaires affiliés

Tracker les ventes de vos partenaires affiliés

Cliquez sur le bouton ajouter un pixel personnalisé.

Nommer votre pixel

Supprimer le texte de l’encart et le remplacer par le pixel suivant :

Notes :