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>