Aller au contenu principal

Migration de l'implémentation de la CMP

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.

Pour plus d'informations, voir la page Web cmp.

Event listener​

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 -->
<script type="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>
<!-- END EVENTLISTENER -->

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.

À supprimer
<script type="text/javascript">
    __tcfapi('init', 2, console.log, {
        appKey: 'YOUR_APP_KEY',
        url: 'https://collector.appconsent.io',
        // targetCountries: ['FR', 'UK', 'US'],
        // forceGDPRApplies: true,
    })
</script>

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 :

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY',
        callbacks: {
            init: ( error, state ) => {},
        }
    }
</script>

La commande show​

Comme pour la commande init, la commande show n'a plus besoin d'être implémentée comme ceci :

À supprimer
<script type="text/javascript">
    __tcfapi('show', 2, console.log, {
        lazy: true,
    })
</script>

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 :

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY',
        callbacks: {
            show: ( error ) => {}
        }
    }
</script>

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
<script type="text/javascript">
    __tcfapi('init', 2, console.log, {
      appKey: 'YOUR_APP_KEY',
      url: 'https://collector.appconsent.io',
    })
</script>

Nouvelle implementation :

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY'
    }
</script>

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
<script type="text/javascript">
    __tcfapi('show', 2, console.log, {
        lazy: true,
    })
</script>

Nouvelle implementation :

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY'
    }
</script>

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
<script>
    window.SFBX_GUARDIAN_BLACKLIST = [
        /facebook/, /youtube/,
    ]
    // Or a whitelist
    window.SFBX_GUARDIAN_WHITELIST = [
        /appconsent/,
    ]
</script>

Maintenant, cette configuration doit être mise dans la variable de configuration configSFBXAppConsent avec le paramètre dynamicallyLoadedScripts avec deux sous parties blacklist et whitelist.

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY',
        dynamicallyLoadedScripts: {
            blacklist: [
                /facebook/, /youtube/,
            ],
            whitelist: [
                /appconsent/,
            ]
        },
    }
</script>

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 :

A changer
<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>

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 implementation :

<script type="text/javascript">
    const configSFBXAppConsent = {
        appKey: 'YOUR_APP_KEY',
        enableGCM: true
    }
</script>

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
    <script type="text/javascript">
        window['gtag_enable_tcf_support'] = true;
    </script>

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
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('consent', 'default', {
        'ad_storage': 'denied',
        'analytics_storage': 'denied'
        });
        gtag('js', new Date());
        gtag('config', 'UA-XXXXXXXXX-1');
    </script>

Il faut aussi supprimer le script de l'event listener de vos pages.

A supprimer
    <script type="text/javascript">
        __tcfapi('addEventListener', 2, function(tcData, success) {
            if (success && tcData.gdprApplies && (tcData.eventStatus === 'tcloaded' || tcData.eventStatus === 'useractioncomplete') ) {
                if (tcData.purpose.consents[1]) {
                    gtag('consent', 'update', {
                        'ad_storage': 'granted', 
                        'analytics_storage': 'granted'
                    })
                } 
            }
        })
    </script>

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.

Pour plus d'information voir la page : Installer Appconsent avec Google Tag Manager

Dernière mise à jour le