Contrôlez vos cookies en Javascript

Intégration des cookies suite à l'intégration du sdk Axeptio sur le site

1. Présentation Vidéo

2. Intégration des cookies

Avant de passer à cette étape, il est nécessaire d'avoir suivi la partie intégration du sdk et d'avoir finalisé la configuration des cookies que vous souhaitez intégrer. Si cela n'est pas fait vous pouvez consulter :
Vous listez l'ensemble des cookies que vous souhaitez intégrer et vous vous rendez sur le back office de votre site.
Nous allons prendre la balise Hubspot pour l'exemple :
Code de chargement fourni par hubspot.
<!-- Start of HubSpot Embed Code -->
<script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/XXXXXXX.js"></script>
<!-- End of HubSpot Embed Code -->
Il s'agit d'HTML donc on ne peut pas l'utiliser tel quel. Il nous faut le transformer en Javascript. L'identifiant passé dans l'URL du script correspond au client ID permettant à hubspot d'identifier votre compte, nous avons choisi de le passer en paramètre car c'est plus propre.
function loadHubspot(clientId){
var el = document.createElement('script');
el.setAttribute('id', 'hs-script-loader');
el.setAttribute('type', 'text/javascript');
el.setAttribute('async', true);
el.setAttribute('defer', true);
el.setAttribute('src', '//js.hs-scripts.com/'+clientId+'js');
document.body.append(el);
}
Vous pouvez ainsi copier coller la fonction sur votre back office le script sera chargé sur votre site. Il ne vous reste plus qu'à paramétrer le dépôt du cookie au clic sur le Widget cookie Axeptio. Pour cela :
void 0 === window._axcb && (window._axcb = []);
window._axcb.push(function(axeptio) {
axeptio.on("cookies:complete", function(choices) {
if(choices.hubspot) {
loadHubspot(XXXXXX);
}
})
});
Une acception claire informée et univoque est bien nécessaire avant le dépôt su cookie sur le site 👊

3. Exemple pour Google Analytics

Vous allez chercher le script pour Google Analytics
Code de chargement fourni par Google Analytics.
<!-- Start of Google Analytics -->
<script>
(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');
ga('create', 'UA-00000000-1', 'auto');
ga('send', 'pageview');
</script>
<!-- End of Google Analytics -->
Vous le transposez en Javascript et vous pouvez ainsi copier coller la fonction sur votre back office. Il ne vous reste plus qu'à paramétrer le dépôt du cookie au clic sur le Widget cookie Axeptio et cela donne
function launchGA(){
(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');
ga('create', 'UA-00000000-1', 'auto');
ga('send', 'pageview');
}
void 0 === window._axcb && (window._axcb = []);
window._axcb.push(function(axeptio) {
axeptio.on("cookies:complete", function(choices) {
if(choices.google_analytics) {
launchGA();
}
});

4. Exemple pour le Facebook pixel et Google analytics

Vous allez chercher le script pour le Facebook Pixel :
<!-- Facebook Pixel Code -->
<script>
!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');
fbq('init', '159702201342042');
fbq('set','agent','tmgoogletagmanager', '159702201342042');
fbq('track', "PageView");
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=159702201342042&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->
Vous le transposez en Javascript et vous pouvez ainsi copier coller la fonction sur votre back office. Il ne vous reste plus qu'à paramétrer le dépôt du cookie au clic sur le Widget cookie Axeptio et cela donne :
function launchFB(){
!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');
fbq('init', '159702201342042');
fbq('set','agent','tmgoogletagmanager', '159702201342042');
fbq('track', "PageView");
}
function launchGoogleAnalytics(){
(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');
ga('create', 'UA-00000000-1', 'auto');
ga('send', 'pageview');
}
void 0 === window._axcb && (window._axcb = []);
window._axcb.push(function(axeptio) {
axeptio.on("cookies:complete", function(choices) {
if(choices.facebook_pixel) {
launchFB();
}
if(choices.google_analytics) {
launchGoogleAnalytics();
}
});
});
Félicitation tout marche parfaitement ! 🤘