Depuis la version 32.0.0 de la CMP, l'implémentation dans votre site web a été simplifiée. Dans cette page, nous allons voir comment migrer pas à pas de l'ancienne implémentation vers la nouvelle.
Nouvelle implementation
Le code à implémenter dans votre site web est fourni sous chaque notice dans l'interface de configuration et est facilement copiable grace au bouton "Copier". Il ne reste plus qu'à coller le code dans la section <head> de votre site web.
L'event listener a été intégré directement dans la notice, il n'est donc plus nécessaire de l'ajouter sur toutes les pages de votre site web. Vous pouvez donc supprimer le script suivant de votre site web.
A SUPPRIMER
<!-- ADD EVENTLISTENER --><scripttype="text/javascript"> (adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=1,window.dataLayer=window.dataLayer||[],__tcfapi("addEventListener",2,function(e,n){if(n&&e.gdprApplies&&("tcloaded"===e.eventStatus||"useractioncomplete"===e.eventStatus)){if((adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0,e.purpose.consents) for(var s in window.dataLayer.push({AppConsent_IAB_PURPOSES:e.purpose.consents}),e.purpose.consents)e.purpose.consents[s]&&window.dataLayer.push({event:"appconsent_ctrl_"+s});var o,a;e.acExtraPurposes&&(o={},e.acExtraPurposes.forEach(function(e){o[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_PURPOSES:o})),e.acExtraVendors&&(a={},e.acExtraVendors.forEach(function(e){a[e]=!0}),window.dataLayer.push({AppConsent_EXTRA_VENDORS:a})),e.purpose.consents&&e.vendor.consents&&("object"==typeof sfbxguardian&&e.purpose.consents[1]&&window.sfbxguardian.unblock(),"function"==typeof gtag&&(e.purpose.consents[1]&&e.vendor.consents[755]?gtag("consent","update",{analytics_storage:e.purpose.consents[7]||e.purpose.consents[9]?"granted":"denied",ad_storage:e.purpose.consents[3]?"granted":"denied "}):gtag("consent","update",{analytics_storage:"denied",ad_storage:"denied"})))}window.dataLayer.push({event:"appconsent_loaded"})});</script><!--ENDEVENTLISTENER-->
Les commandes init et show
Désormais, les commandes init et show sont automatiquement exécutées à l'initialisation de la notice et cela implique des changements dans l'implémentation de la notice.
La commande init
Auparavant, il était nécessaire d'implémenter le script suivant dans la section <body> des pages HTML.
A SUPPRIMER
Callback de la commande init
Si vous avez défini un callback dans la commande init, vous devez désormais l'ajouter à la variable de configuration configSFBXAppConsent dans le paramètre callbacks.
Pour rappel, ce callback sera exécuté à la fin de l'initialisation de la notice. Et prend comme paramètres d'entrées error et state.
INFO
Dans la documentation de l'ancienne implémentation, nous proposions de mettre console.log en callback de la commande. Si vous êtes dans ce cas, il n'est plus nécessaire de le mettre en callback.
Exemple de la configuration d'un callback :
La commande show
Comme pour la commande init, la commande show n'a plus besoin d'être implémentée comme ceci :
A SUPPRIMER
Callback de la commande show
Si vous avez défini un callback dans la commande show, vous devez désormais l'ajouter à la variable de configuration configSFBXAppConsent dans le paramètre callbacks.
Pour rappel, ce callback sera exécuté à la fin de l'exécution de la commande. Et prend comme paramètre d'entrée error.
INFO
Dans le code d'exemple de l'ancienne implémentation, nous proposions dans la documentation de mettre console.log en callback de la commande. Si vous êtes dans ce cas, il n'est plus nécessaire de le mettre en callback.
Exemple de la configuration d'un callback :
Changement dans la configuration de la cmp
Option url
L'option url a désormais comme valeur par défaut l'url suivante : https://collector.appconsent.io. Il n'est donc plus nécessaire d'avoir cette option dans la configuration votre CMP, SI vous utilisez cette url.
ANCIENNE IMPLÉMENTATION
NOUVELLE IMPLÉMENTATION
Option lazy
L'option lazy est désormais activé par défaut. Si vous aviez déjà activé cette option dans la commande show, il n'est plus nécessaire de l'avoir dans la configuration.
ANCIENNE IMPLÉMENTATION
NOUVELLE IMPLÉMENTATION
Guardian
Si vous n'avez pas implémenté guardian, vous pouvez passer à la suite.
La configuration de guardian a été changée. Auparavant, il était nécessaire d'ajouter une balise <script> dans le lequel on définissait les urls qu'on souhaiter blacklister ou whitelister.
ANCIENNE IMPLÉMENTATION
Maintenant, cette configuration doit être mise dans la variable de configuration configSFBXAppConsent avec le paramètre dynamicallyLoadedScripts avec deux sous parties blacklist et whitelist.
Le script de Guardian a été changée pour pouvoir s'adapté cette nouvelle façon de configurer guardian. Il faut donc remplacer l'ancienne balise <script> contenant le code de Guardian par celle-ci :
GCM (Google Consent Mode)
Désormais, le blocage des cookies et scripts ajoutés par Google Analytics est effectué par le script loader à l'initialisation de la notice. Par défaut, le blocage n'est pas actif, pour l'activer vous devez ajouter la propriété enableGCM à la configuration configSFBXAppConsent.
NOUVELLE IMPLÉMENTATION
Auparavant, 3 solutions étaient proposées pour activer le blocage de Google Analytics, ces 3 solutions ne sont plus nécessaires et peuvent être supprimées.
Solution 1 - IAB TCF
Il faut simplement supprimer la définition gtag_enable_tcf_support dans la variable window.
A SUPPRIMER
Solution 2 - GCM
L'ancienne implémentation de GCM doit être supprimée.
Pour cela, vous devez supprimer le script contenant Google Tag et le script d'ajout de la variable dataLayer.
A SUPPRIMER
Il faut aussi supprimer le script de l'event listener de vos pages.
A SUPPRIMER
Solution 3 - Google Tag Manager
La troisième solution proposée était d'utiliser votre gestionnaire de balises pour déclencher les balises Google Analytics en fonction des purpose_events envoyés au dataLayer. Selon ce que vous avez implémenté dans vos pages, vous pouvez le supprimer pour migrer vers la nouvelle implémentation.
<script>
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).sfbxguardian={})}(this,function(t){"use strict";function o(e,t){return e&&(!t||t!==c)&&(!s.blacklist||s.blacklist.some(function(t){return t.test(e)}))&&(!s.whitelist||s.whitelist.every(function(t){return!t.test(e)}))}function l(t){var e=t.getAttribute("src");return s.blacklist&&s.blacklist.every(function(t){return!t.test(e)})||s.whitelist&&s.whitelist.some(function(t){return t.test(e)})}if(typeof configSFBXAppConsent === 'undefined'){console.error('SFBX Guardian has not been executed! The configuration (configSFBXAppConsent) must be placed before calling the script '); return}if(!configSFBXAppConsent.dynamicallyLoadedScripts||(!configSFBXAppConsent.dynamicallyLoadedScripts.blacklist&&!configSFBXAppConsent.dynamicallyLoadedScripts.whitelist)){console.warn('SFBX Guardian: No whitelist or blacklist has been defined'); return;}var c="javascript/blocked",s={blacklist:configSFBXAppConsent.dynamicallyLoadedScripts.blacklist,whitelist:configSFBXAppConsent.dynamicallyLoadedScripts.whitelist},u={blacklisted:[]},f=new MutationObserver(function(t){for(var e=0;e<t.length;e++)for(var i=t[e].addedNodes,r=function(t){var r=i[t];if(1===r.nodeType&&"SCRIPT"===r.tagName){var e=r.src,n=r.type;if(o(e,n)){u.blacklisted.push([r,r.type]),r.type=c;r.addEventListener("beforescriptexecute",function t(e){r.getAttribute("type")===c&&e.preventDefault(),r.removeEventListener("beforescriptexecute",t)}),r.parentElement&&r.parentElement.removeChild(r)}}},n=0;n<i.length;n++)r(n)});f.observe(document.documentElement,{childList:!0,subtree:!0});var i=document.createElement,a={src:Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"src"),type:Object.getOwnPropertyDescriptor(HTMLScriptElement.prototype,"type")};function p(t,e){return function(t){if(Array.isArray(t))return t}(t)||function(t,e){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var r=[],n=!0,i=!1,o=void 0;try{for(var c,a=t[Symbol.iterator]();!(n=(c=a.next()).done)&&(r.push(c.value),!e||r.length!==e);n=!0);}catch(t){i=!0,o=t}finally{try{n||null==a.return||a.return()}finally{if(i)throw o}}return r}(t,e)||r(t,e)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function d(t){return function(t){if(Array.isArray(t))return n(t)}(t)||function(t){if("undefined"!=typeof Symbol&&Symbol.iterator in Object(t))return Array.from(t)}(t)||r(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function r(t,e){if(t){if("string"==typeof t)return n(t,e);var r=Object.prototype.toString.call(t).slice(8,-1);return"Object"===r&&t.constructor&&(r=t.constructor.name),"Map"===r||"Set"===r?Array.from(t):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(t,e):void 0}}function n(t,e){(null==e||e>t.length)&&(e=t.length);for(var r=0,n=new Array(e);r<e;r++)n[r]=t[r];return n}document.createElement=function(){for(var t=arguments.length,e=new Array(t),r=0;r<t;r++)e[r]=arguments[r];if("script"!==e[0].toLowerCase())return i.bind(document).apply(void 0,e);var n=i.bind(document).apply(void 0,e);try{Object.defineProperties(n,{src:{get:function(){return a.src.get.call(this)},set:function(t){o(t,n.type)&&a.type.set.call(this,c),a.src.set.call(this,t)}},type:{set:function(t){var e=o(n.src,n.type)?c:t;a.type.set.call(this,e)}}}),n.setAttribute=function(t,e){"type"===t||"src"===t?n[t]=e:HTMLScriptElement.prototype.setAttribute.call(n,t,e)}}catch(t){console.warn("sfbxguardian: unable to prevent script execution for script src ",n.src,".\n",'A likely cause would be because you are using a third-party browser extension that monkey patches the "document.createElement" function.')}return n};var y=new RegExp("[|\{}()[\\]^$+*?.]","g");t.unblock=function(){for(var t=arguments.length,r=new Array(t),e=0;e<t;e++)r[e]=arguments[e];r.length<1?(s.blacklist=[],s.whitelist=[]):(s.blacklist&&(s.blacklist=s.blacklist.filter(function(e){return r.every(function(t){return"string"==typeof t?!e.test(t):t instanceof RegExp?e.toString()!==t.toString():void 0})})),s.whitelist&&(s.whitelist=[].concat(d(s.whitelist),d(r.map(function(e){if("string"==typeof e){var r=".*"+e.replace(y,"\\$&")+".*";if(s.whitelist.every(function(t){return t.toString()!==r.toString()}))return new RegExp(r)}else if(e instanceof RegExp&&s.whitelist.every(function(t){return t.toString()!==e.toString()}))return e;return null}).filter(Boolean)))));for(var n=document.querySelectorAll('script[type="'.concat(c,'"]')),i=0;i<n.length;i++){var o=n[i];l(o)&&(u.blacklisted.push([o,"application/javascript"]),o.parentElement.removeChild(o))}var a=0;d(u.blacklisted).forEach(function(t,e){var r=p(t,2),n=r[0],i=r[1];if(l(n)){var o=document.createElement("script");for(var c in"undefined"!==n.src&&o.setAttribute("src",n.src),o.setAttribute("type",i||"application/javascript"),n)c.startsWith("on")&&(o[c]=n[c]);document.head.appendChild(o),u.blacklisted.splice(e-a,1),a++}}),s.blacklist&&s.blacklist.length<1&&f.disconnect()},Object.defineProperty(t,"__esModule",{value:!0})});
</script>
