Intégration / synchronisation custom – Support Axeptio

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() {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  // Modifier la valeur UA-XXXXX-Y par votre UA
  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
}

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() {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), 
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    // Modifier la valeur UA-XXXXX-Y par votre UA
    ga('create', 'UA-XXXXX-Y', 'auto');
    ga('send', 'pageview');
  }

  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>

Articles associés