Ajoutez la logique de chargement de vos services dans votre code

Après avoir installé notre SDK Javascript sur votre site web, le moment est venu de charger dynamiquement les scripts associés à chacun des vendors présents dans votre configuration.

Pour ce faire, 2 choses sont nécessaires :

Avoir la liste exhaustive des vendors présents dans votre configuration
Récupérer les scripts relatifs à chacun des vendors : généralement, ceux-ci se trouvent dans l'espace d'administration ou dans la documentation du vendor.

Passons maintenant à l'intégration. Prenons le scénario le cas de figure où nous avons un projet Axeptio avec une configuration contenant deux vendors :

Google analytics
Facebook Pixel

Commençons par écrire les fonctions permettant de charger le script de chaque vendor :

function loadGoogleAnalyticsTag() {
 const t = document.getElementsByTagName("script")[0];
 const e = document.createElement("script");
 e.async = true;
 e.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXX";
 t.parentNode.insertBefore(e, t);
 window.dataLayer = window.dataLayer || [];
 function gtag() {
  dataLayer.push(arguments);
 }

 gtag("js", new Date());
 gtag("config", "XXXXXXXXXXX"); // Remplacer XXXXX par votre ID GA4
}

function loadFacebookPixelTag() {
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

  // Modifier la valeur 000000000000000 par votre id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
}

Maintenant, utilisons les événements émis par le SDK Axeptio pour charger les scripts en fonction des choix fait par un visiteur :

void 0 === window._axcb && (window._axcb = []);
window._axcb.push(function (axeptio) {
  axeptio.on("cookies:complete", function (choices) {
    if (choices.google_analytics) {
      loadGoogleAnalyticsTag();
    }
    if (choices.facebook_pixel) {
      loadFacebookPixelTag();
    }
  });
});

Tada !

📌 Si vous utilisez Google Analytics 4 et/ou Google Ads, il vous restera à configurer le Consent Mode v2. Vous trouverez toutes les infos sur la mise en place du Consent Mode v2 ici : Installation du Google Consent Mode v2

Les scripts sont maintenant chargés dynamiquement en fonction des choix faits par vos visiteurs.

✅ Pour récapituler, voici ce que vous devez retrouver dans la balise script après l'installation d'Axeptio :

<script>
  window.axeptioSettings = {
    clientId: "votre-project-id-axeptio",
    cookiesVersion: "nom-de-votre-configuration",
  };
  (function (d, s) {
    var t = d.getElementsByTagName(s)[0],
    e = d.createElement(s);
    e.async = true;
    e.src = "//static.axept.io/sdk.js";
    t.parentNode.insertBefore(e, t);
  })(document, "script");

  function loadGoogleAnalyticsTag() {
    const t = document.getElementsByTagName("script")[0];
    const e = document.createElement("script");
    e.async = true;
    e.src = "https://www.googletagmanager.com/gtag/js?id=G-XXXXXX";
    t.parentNode.insertBefore(e, t);
    window.dataLayer = window.dataLayer || [];
    function gtag() {
     dataLayer.push(arguments);
    }

    gtag("js", new Date());
    gtag("config", "XXXXXXXXXXX"); // Remplacer XXXXX par votre ID GA4
  }

  function loadFacebookPixelTag() {
    !function(f,b,e,v,n,t,s)
    {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');

    // Modifier la valeur 000000000000000 par votre id
    fbq('init', '000000000000000');
    fbq('track', 'PageView');
  }

  void 0 === window._axcb && (window._axcb = []);
  window._axcb.push(function (axeptio) {
    axeptio.on("cookies:complete", function (choices) {
      if (choices.google_analytics) {
        loadGoogleAnalyticsTag();
      }
      if (choices.facebook_pixel) {
        loadFacebookPixelTag();
      }
    });
  });
</script>