Intégration / synchronisation custom

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 !

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>