Vous faites votre tracking via un custom pixel dans votre store Shopify ?

Les custom pixels dans Shopify sont des environnement dits “Sandbox”, dans lesquels vous pouvez suivre un ensemble d’évènements envoyés à Shopify, pour par exemple les envoyer à votre conteneur GTM et vos différents outils d’analyse de trafic.

De par leur nature “Sandbox”, les custom pixels ne peuvent pas accéder aux éléments du contenu principal du site, comme par exemple le consentement Axeptio. Ceci peut s’avérer problématique, notamment si vous déclenchez vos outils sur les évènements Axeptio.

Par conséquent, il vous faudra transmettre les évènements Axeptio vers votre custom pixel. Nous verrons dans cette documentation comment.

Envoyer les évènements Axeptio depuis le theme.liquid

Il est possible d’envoyer des évènements depuis votre site vers la sandbox en utilisant les évènements natifs de Shopify, et ainsi faire passer des informations du site au custom pixel. C’est ce que nous allons faire pour transmettre le consentement Axeptio.

Tout d’abord, il va nous falloir envoyer cet évènement. Rendez-vous dans votre fichier theme.liquid, et rajoutez ces quelques lignes de code à la fin de la balise body :

<script> 
window._axcb = window._axcb || []; 
window._axcb.push(function(sdk){ 
 sdk.on('cookies:complete', function(choices){ 
  Shopify.analytics.publish('cookies:complete', {axeptioConsent: choices});
 });
}); 
</script>

Ensuite, rendez-vous dans votre custom pixel.

Au début de celui-ci, rajoutez le code de réception de l’évènement :

// RECEPTION DU CONSENTEMENT VIA LE THEME.LIQUID // 
window.dataLayer = window.dataLayer || []; 
window.analytics = window.analytics; 
function gtag() { 
 dataLayer.push(arguments); 
} 

gtag("consent", "default", { 
 ad_storage: "denied", 
 analytics_storage: "denied", 
 ad_user_data: "denied", 
 ad_personalization: "denied", 
 wait_for_update: 500, 
}); 

analytics.subscribe("cookies:complete", function (data) { 
 let axeptioConsent = data.customData.axeptioConsent; 
 let axeptioChoices = []; 
 for (let entry in axeptioConsent) { 
  if (entry.indexOf("$") === -1 && axeptioConsent[entry]) {  
   dataLayer.push({ event: `axeptio_activate_${entry}` });  
   axeptioChoices.push(entry); 
  } 
 } 
 dataLayer.push({ event: "axeptio_update", axeptio_authorized_vendors: axeptioChoices, }); 
 gtag("consent", "update", { 
  ad_storage: axeptioConsent.$$googleConsentMode.ad_storage, 
  ad_user_data: axeptioConsent.$$googleConsentMode.ad_user_data, 
  ad_personalization: axeptioConsent.$$googleConsentMode.ad_personalization, 
  analytics_storage: axeptioConsent.$$googleConsentMode.analytics_storage,  
 }); 
});

Ce code va recréer les signaux normalement envoyés par Axeptio, et les envoyer dans le dataLayer de GTM. Il va également recréer les signaux de consentement propres au Google Consent Mode v2.

Recréer les évènements Axeptio sur votre checkout

Depuis Août 2024 et le basculement sur le nouveau checkout de Shopify, ce dernier n’est plus basé sur le theme.liquid, et la seule méthode de rajouter du code se fait via les custom pixels.

Par conséquent, Axeptio ne peut pas être chargé sur le checkout, et n’enverra donc pas ses évènements.

Pour pouvoir accéder aux consentement Axeptio et le transmettre à vos outils de tracking, il va nous falloir recréer les informations de consentement à partir des cookies Axeptio stockant le consentement.

Pour cela, rajoutez ce code dans votre custom pixel, toujours au début :

// REGENERATION DU CONSENTEMENT DANS LE CHECKOUT // 
function getCookie(name) { 
 const value = "; " + document.cookie; 
 const parts = value.split("; " + name + "="); 
 if (parts.length === 2) return parts.pop().split(";").shift(); 
} 

if ( window.location.href.includes("/checkout/") || window.location.href.includes("/checkouts/") ) { 
 analytics.subscribe("page_viewed", () => { 
  const axeptio_authorized_vendors = decodeURIComponent( getCookie("axeptio_authorized_vendors") ); 
  const axeptio_cookies = decodeURIComponent(getCookie("axeptio_cookies")); 
  dataLayer.push({ event: "axeptio_update", axeptio_authorized_vendors: axeptio_authorized_vendors, }); 
  const acceptedVendors = axeptio_authorized_vendors.split(","); 
  acceptedVendors.forEach((vendor) => { 
   if (vendor.length >= 1) { 
    let event = "axeptio_activate_" + vendor; 
    dataLayer.push({ event: event }); 
   } 
  }); 
 gtag("consent", "update", { 
  ad_storage: axeptio_cookies.includes('"ad_storage":"granted"') ? "granted" : "denied", 
  ad_user_data: axeptio_cookies.includes('"ad_user_data":"granted"') ? "granted" : "denied", 
  ad_personalization: axeptio_cookies.includes( '"ad_personalization":"granted"' ) ? "granted" : "denied", 
  analytics_storage: axeptio_cookies.includes( '"analytics_storage":"granted"' ) ? "granted" : "denied", 
  }); 
 }); 
}

Si vous passez uniquement par le custom pixel pour votre tracking, que ce soit pour le site principal ou pour le checkout, vous pouvez combiner ces deux codes afin d’assurer le bon fonctionnement du tracking sur tout le site.

Voici un exemple complet, avec le code de chargement de GTM inclus :


// CHARGEMENT GTM //

(function (w, d, s, l, i) {
  w[l] = w[l] || [];
  w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
  var f = d.getElementsByTagName(s)[0],
    j = d.createElement(s),
    dl = l != "dataLayer" ? "&l=" + l : "";
  j.async = true;
  j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
  f.parentNode.insertBefore(j, f);
})(window, document, "script", "dataLayer", "GTM-XXXXXXXX");

window.dataLayer = window.dataLayer || [];
window.analytics = window.analytics;
function gtag() {
  dataLayer.push(arguments);
}

gtag("consent", "default", {
  ad_storage: "denied",
  analytics_storage: "denied",
  ad_user_data: "denied",
  ad_personalization: "denied",
  wait_for_update: 500,
});

// RECEPTION DU CONSENTEMENT VIA LE THEME.LIQUID //

analytics.subscribe("cookies:complete", function (data) {
  let axeptioConsent = data.customData.axeptioConsent;
  let axeptioChoices = [];
  for (let entry in axeptioConsent) {
    if (entry.indexOf("$") === -1 && axeptioConsent[entry]) {
      dataLayer.push({ event: `axeptio_activate_${entry}` });
      axeptioChoices.push(entry);
    }
  }
  dataLayer.push({
    event: "axeptio_update",
    axeptio_authorized_vendors: axeptioChoices,
  });
  gtag("consent", "update", {
    ad_storage: axeptioConsent.$$googleConsentMode.ad_storage,
    ad_user_data: axeptioConsent.$$googleConsentMode.ad_user_data,
    ad_personalization: axeptioConsent.$$googleConsentMode.ad_personalization,
    analytics_storage: axeptioConsent.$$googleConsentMode.analytics_storage,
  });
});

// REGENERATION DU CONSENTEMENT DANS LE CHECKOUT //

function getCookie(name) {
  const value = "; " + document.cookie;
  const parts = value.split("; " + name + "=");
  if (parts.length === 2) return parts.pop().split(";").shift();
}
if (
  window.location.href.includes("/checkout/") ||
  window.location.href.includes("/checkouts/")
) {
  analytics.subscribe("page_viewed", () => {
    const axeptio_authorized_vendors = decodeURIComponent(
      getCookie("axeptio_authorized_vendors")
    );
    const axeptio_cookies = decodeURIComponent(getCookie("axeptio_cookies"));
    dataLayer.push({
      event: "axeptio_update",
      axeptio_authorized_vendors: axeptio_authorized_vendors,
    });
    const acceptedVendors = axeptio_authorized_vendors.split(",");
    acceptedVendors.forEach((vendor) => {
      if (vendor.length >= 1) {
        let event = "axeptio_activate_" + vendor;
        dataLayer.push({ event: event });
      }
    });
    gtag("consent", "update", {
      ad_storage: axeptio_cookies.includes('"ad_storage":"granted"')
        ? "granted"
        : "denied",
      ad_user_data: axeptio_cookies.includes('"ad_user_data":"granted"')
        ? "granted"
        : "denied",
      ad_personalization: axeptio_cookies.includes(
        '"ad_personalization":"granted"'
      )
        ? "granted"
        : "denied",
      analytics_storage: axeptio_cookies.includes(
        '"analytics_storage":"granted"'
      )
        ? "granted"
        : "denied",
    });
  });
}

Gérer le consentement Axeptio avec votre custom pixel Shopify

Envoyer les évènements Axeptio depuis le theme.liquid

Recréer les évènements Axeptio sur votre checkout