Shopify avec Checkout Extensibility

Depuis Aout 2024, Shopify a mis en place Checkout Extensibility ce qui fait que beaucoup d'applications et outils de tracking ne peuvent pas fonctionner à partir du moment ou l'utilisateur est dans la partie Paiement / Checkout.

C'est aussi le cas d'Axeptio, le script n'est pas chargé, nos événements ne sont pas envoyés et donc pour les intégrations avec Google Tag Manager il est un peu compliqué de récupérer le consentement.

Procédure pour récupérer les événements Axeptio

Vous pouvez utiliser notre app shopify, intégrer Axeptio en dur via un snippet ou via Google Tag Manager c'est comme vous voulez.

Intégrer Axeptio lors du Checkout

Vous avez normalement créé un pixel personnalisé dans les événements clients de votre boutique Shopify pour charger Google Tag Manager. Le problème, c'est que nous n'avez pas les événements Axeptio comme axeptio_update et axeptio_activate_xxx
Ne créez pas un autre pixel personnalisé, il faut ajouter le code ci dessous pour ajouter nos événenements. Et dans le même pixel, car ils sont sandboxés.

A ajouter en haut de votre pixel personnalisé déjà présent.

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

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/")
) {
  gtag("consent", "default", {
    ad_storage: "denied",
    analytics_storage: "denied",
    ad_user_data: "denied",
    ad_personalization: "denied",
    wait_for_update: 500,
  });
  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",
      })
  });
}