Consentement pour fichiers témoins - Intégration du composant web
Veuillez prendre note que le texte de la section "Désactivation de fonctionnalités" a été mis à jour puisqu'une nouvelle version du composant a été mise en ligne le 2 novembre 2023. Si vous aviez commencé l'intégration du composant sur votre site avant cette date, certains scripts devront être modifiés.
Les instructions dans les autres sections (intégration de la modale et du lien pour ouvrir à nouveau les préférences), quant à eux, ont peu changé.
Le composant web
Le composant web pour l'acceptation des fichiers témoins est une fenêtre modale à ajouter sur tous les sites web afin de respecter la règlementation québécoise.
Cette page explique comment intégrer et configurer le composant développé à l'Université de Montréal.
 |
 |
Intégration de la modale
Il suffit d'ajouter la ligne suivante pour afficher le composant (fenêtre modale) permettant de recueillir le consentement de l'usager quant aux fichiers témoins.
<script src= "https://secretariatgeneral.umontreal.ca/udem_consentement_temoins.js"></script>
L'adresse https://secretariatgeneral.umontreal.ca/udem_consentement_temoins.js sera l'adresse définitive du composant. Pour utiliser une version en cours de développement (à ne pas utiliser en production!), privilégier l'adresse suivante : https://coquille.umontreal.ca/fileadmin/demo/udem_consentement_temoins_RC11.js (remplacer RC11.js par la version la plus à jour, s'il y a lieu).
Il est important que cette inclusion soit faite sur toutes les pages du site, donc à ajouter à la racine du site ou dans le gabarit principal, selon le système de gestion de contenu utilisé. Si le site possède plusieurs gabarits différents pour certaines sous-sections, il sera nécessaire de répéter ce bout de code à différents endroits. Il est important que le composant soit affiché sur toutes les pages du site.
Cet ajout permettra d'afficher la modale elle-même, toutefois vous devrez ensuite implémenter différentes fonctions pour activer et désactiver certaines fonctionnalités dans votre site. Il est important d'utiliser seulement les fonctions documentées dans cette page, sans quoi il n'est pas garanti que vos scripts continueront à fonctionner avec de nouvelles versions du composant. Le tout est expliqué plus en détails et avec des exemples dans la section "Désactivation de fonctionnalités".
Intégration du lien pour ouvrir à nouveau les préférences
Le composant ajoute un élément contenant un lien permettant à l'usager de modifier son consentement. Par défaut, ce lien est affiché soit à l'endroit où l'inclusion du script udem_consentement_temoins.js est faite, soit tout en bas de la page, ce qui pourrait sembler mal intégré au site :
Il suffit toutefois d'insérer un élément html avec l'identifiant udem_cookie_consent_toggle pour que celui-ci soit utilisé pour le lien. Il devient alors possible de le positionner ou styliser de la façon voulue.
<div id="udem_cookie_consent_toggle"></div>
Cet élément peut être inséré n'importe où dans les pages du site (via des fichiers html, gabarits, etc). Il est généralement conseillé de l'inclure en pied de page. Voici un exemple dans lequel l'élément a été ajouté à un pied de page existant.
Si le site possède plusieurs gabarits différents, il est important de s'assurer que l'élément sera bien ajouté sur toutes les pages du site.
Au besoin, des feuilles de styles css peuvent être appliquées pour changer l'apparence de l'élément, en ciblant l'identifiant udem_cookie_consent_toggle
#udem_cookie_consent_toggle {
background-color: red;
color: white;
}
Désactivation de fonctionnalités
Catégories de témoins
Il faudra d'abord déterminer de quelle catégorie sont les fichiers témoins et les fonctionnalités à considérer. Les catégories possibles sont les suivantes :
Témoins nécessaires - Toujours activés
Ces témoins sont essentiels au bon fonctionnement et à la sécurité de nos sites Web et services en ligne. Ils ne peuvent pas être désactivés. Ils nous permettent notamment de sécuriser votre connexion en recueillant vos informations d’identification, personnaliser votre interface (ex. : choix de langue) et conserver vos préférences.
Les renseignements suivants sont notamment recueillis :
- le type et la version du navigateur;
- le type et la version du système d’exploitation;
- le type et le modèle d’appareil (téléphone, tablette ou ordinateur);
- la résolution de l’écran de l’appareil que vous utilisez;
- la langue utilisée par le navigateur.
Témoins de performance (performanceCookies)
Ces témoins sont utilisés pour analyser la navigation sur nos sites (provenance des visiteurs, fréquence des visites, pages plus ou moins visitées, etc.) dans le but d’en améliorer le fonctionnement et d’offrir une meilleure expérience utilisateurs aux visiteurs. Toutes les informations collectées par ces témoins sont agrégées et donc anonymisées.
Témoins de fonctionnalité (functionalityCookies)
Ces témoins permettent d’améliorer les fonctionnalités et la personnalisation de nos sites. Par exemple, ils rendent possible l’utilisation de vidéos et de services de messagerie instantanée ou encore le partage de contenus de nos sites sur des plateformes de médias sociaux. Si vous désactivez ces témoins, votre expérience de navigation et les services que nous sommes en mesure de vous offrir peuvent être impactés.
Témoins publicitaires (adsCookies)
Ces témoins peuvent être activés sur nos sites web pour établir des profils sur vos intérêts. Ils nous aident à vous proposer des publicités et des contenus personnalisés. Si vous désactivez ces témoins, des publicités et des contenus moins ciblées sur vos intérêts vous seront proposés.
Fonctions à implémenter
Veuillez prendre note que le texte de cette section sera mis à jour prochainement puisque le composant est en cours de modification/amélioration - une mise en ligne de la nouvelle version est planifiée pour le 2 novembre 2023.
Si vous avez déjà commencé l'intégration du composant sur votre site, nous vous recommandons de patienter quelques jours car votre appel aux fonctions mentionnées ci-dessous devra être mis en jour en conséquences.
Pour chaque fichier témoin / fonctionnalité, s'il est dans les trois dernières catégories il faut ensuite effectuer une action en adéquation avec le choix de l'usager (selon qu'il accepte ou non cette catégorie de témoins). Cela doit se faire via les fonctions offertes par le composant. Seules les fonctions mentionnées dans l'encadré ci-dessous sont stables et doivent être utilisées.
// Exceptionnellement, en date du 20 octobre 2023, veuillez prendre note que la fonction mentionnée ici est sujette à changement prochainement. Une nouvelle fonction sera offerte. Elle sera documentée ici dès qu'elle sera disponible. Par la suite, le composant va demeurer stable.
// Avant le 2 novembre 2023
on_udem_cookie_consent(
category, // string : 'performanceCookies' ou 'functionalityCookies' ou 'adsCookies'
(category) => { ... }, // function (string): void Appelée lorsque le consentement est donné
(category) => { ... }, // function (string): void Appelée lorsque le consentement est retiré
);
// À partir du 2 novembre 2023
on_udem_cookie_update_consent(
(categories) => { ... }, // function (string): void Appelée lorsque le consentement est modifié (donné ou retiré pour une ou plusieurs catégories)
);
Bien que le composant repose ensuite sur le local storage du navigateur web, il est important de ne pas récupérer directement les valeurs de celui-ci. Il est essentiel de passer par les fonctions mentionnées ci-dessus (fonction on_udem_cookie_update_consent). Sans cela, il est possible que vos scripts doivent être modifiés lorsque de nouvelles versions du composant seront disponibles.
Voici un exemple d'utilisation de la fonction on_udem_cookie_update_consent et de fonctions utilitaires qui affichent en console l'interaction de l'usager avec la modale, pour la catégorie des témoins de performance. Évidemment ce script serait à adapter pour faire de réelles actions (ex. désactiver certaines fonctionnalités). Des exemples vous sont fournis plus bas.
<script>
// Avant le 2 novembre 2023 (fonction on_udem_cookie_consent)
window.addEventListener('load', () => {
if (typeof on_udem_cookie_consent === 'function') {
function admission_udem_cookie_consent_add(category) {
console.log("Consentement ajouté", category);
}
function admission_udem_cookie_consent_remove(category) {
console.log("Consentement supprimé", category);
}
on_udem_cookie_consent('performanceCookies', admission_udem_cookie_consent_add, admission_udem_cookie_consent_remove);
}
});
</script>
<script>
// À partir du 2 novembre 2023 (fonction on_udem_cookie_update_consent)
window.addEventListener('load', () => {
if (typeof on_udem_cookie_update_consent === 'function') {
function my_udem_consent_updated(categories) {
// Afficher les consentements des différents types de témoins.
console.log('adsCookies:', categories.adsCookies);
console.log('functionalityCookies:', categories.functionalityCookies);
console.log('performanceCookies:', categories.performanceCookies);
// Exemple de traitement des témoins de fonctionnalités. Les autres types de témoins pourraient être traités de manière similaire.
if (categories.functionalityCookies == true) {
console.log('Traiter ici les fonctionnalités à activer');
} else {
console.log('Traiter ici les fonctionnalités à désactiver');
}
}
on_udem_cookie_update_consent(my_udem_consent_updated);
}
});
</script>
Il est à noter que la désactivation par javascript n'est parfois pas suffisante pour garantir qu'aucun cookie n'est échangé. La programmation côté serveur ou le contenu lui-même pourrait devoir être modifié pour implémenter certaines solutions. C'est le cas notamment pour certains services externes via iframe, tel qu'il sera expliqué plus bas.
Désactivation de Google Analytics (GA) et/ou Google Tag Manager (GTM)
Selon la façon dont est configuré votre compte Google Tag Manager, deux options s'offrent à vous :
- Désactiver complètement GA et GTM :
Cette option n'est possible que pour les cas simples, par exemple ceux pour lesquels seulement Google Analytics est utilisé et qui n'ont pas le mode "Consent" activé
- Désactiver précisément par type de témoins :
Cette option doit être utilisée si vous utilisez des fonctionnalités autres que Google Analytics (ex. l'intégration du pixel Facebook via GTM), ou si l'application est programmée de façon à fournir certaines données à Google Tag Manager
En complément à ces deux options, il faut également supprimer la balise <noscript> fournie par Google, s'il y a lieu (cette balise vise à remplacer l'utilisation du javascript, toutefois un utilisateur qui n'utilise pas le javascript ne pourra pas accepter les témoins et donc on ne souhaite pas activer GTM et GA pour lui).
À noter que les exemples ci-dessous sont pour les sites qui incluent déjà le script https://www.googletagmanager.com/gtm.js et possèdent un identifiant GTM dont le format est généralement GTM-XXXXXX (identifiant qui est d'ailleurs à insérer dans le script, voir VOTRE_IDENTIFIANT_GTM). Si le site utilise plutôt le script https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y (avec un identifiant de format UA-XXXXX-Y) il devrait être possible d'adapter les scripts ci-dessous, mais sachez que cela sera désactivé par Google en juillet 2024. Il est donc conseillé de migrer. Finalement, si le site utilise un autre script GTM ou une version plus ancienne de Google Analytics (scripts ga.js, analytics.js ou conversion.js, entre autres), alors il faudra migrer le site à Google Tag Manager et utiliser le script gtm.js avec un identifiant GTM-XXXXXX.
Option 1 : Désactiver complètement GA et GTM
// Avant le 2 novembre 2023 (fonction on_udem_cookie_consent)
if (typeof on_udem_cookie_consent === 'function') {
function udem_performance_cookie_consent_add(category) {
// console.log("Consent ajoute", category);
// Ajout des triggers Google
if (typeof dataLayer === 'undefined') {
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','VOTRE_IDENTIFIANT_GTM');
}
}
function udem_performance_cookie_consent_remove(category) {
// console.log("Consent removed", category);
// Nettoyer cookies?
// Revoke Google consent
if (typeof dataLayer !== 'undefined') {
dataLayer = [];
}
on_udem_cookie_consent('performanceCookies', udem_performance_cookie_consent_add, udem_performance_cookie_consent_remove);
}
// À partir du 2 novembre 2023 (fonction on_udem_cookie_update_consent)
if (typeof on_udem_cookie_update_consent === 'function') {
function my_udem_consent_updated(categories) {
if (categories.functionalityCookies == true) {
// Ajout des triggers Google
if (typeof dataLayer === 'undefined') {
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','VOTRE_IDENTIFIANT_GTM');
}
} else {
// Supprimer le consentement Google
if (typeof dataLayer !== 'undefined') {
dataLayer = [];
}
}
}
on_udem_cookie_update_consent(my_udem_consent_updated);
}
Option 2 : Désactiver précisément par type de témoins
// Avant le 2 novembre 2023 (fonction on_udem_cookie_consent)
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Default ad_storage to 'denied'.
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied'
});
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','VOTRE_IDENTIFIANT_GTM');
function udemDispatchCookieEvent(data) {
window.dispatchEvent(new CustomEvent('udem_set_consent_cookie', {detail: data}));
}
window.addEventListener('load', () => {
// Ajout des triggers Google
if (typeof on_udem_cookie_consent === 'function') {
function udem_performance_cookie_consent_add(category) {
// Grant Google consent
console.debug('Update analytics_storage to granted.');
// Update analytics_storage to 'granted'.
gtag('consent', 'update', {
'analytics_storage': 'granted',
});
}
function udem_performance_cookie_consent_remove(category) {
// Revoke Google consent
if (typeof dataLayer !== 'undefined') {
console.debug('Update analytics_storage to denied.');
// Update analytics_storage to 'denied'.
gtag('consent', 'update', {
'analytics_storage': 'denied',
});
}
}
function udem_functionality_cookie_consent_add(category) {
// Grant Google consent
if (typeof dataLayer !== 'undefined') {
console.debug('Update func to granted.');
// Update analytics_storage to 'granted'.
gtag('consent', 'update', {
'functionality_storage': 'granted',
});
}
}
function udem_functionality_cookie_consent_remove(category) {
// Revoke Google consent
// Update functionality_storage to 'denied'.
gtag('consent', 'update', {
'functionality_storage': 'denied'
});
}
function udem_ads_cookie_consent_add(category) {
// Grant Facebook Pixel
var eventData = {category: category, action: "grant"}
udemDispatchCookieEvent(eventData);
// Grant Google consent
if (typeof dataLayer !== 'undefined') {
// Update ad_storage to 'granted'.
gtag('consent', 'update', {
'ad_storage': 'granted',
});
}
}
function udem_ads_cookie_consent_remove(category) {
// Revoke Pixel consent
var eventData = {category: category, action: "revoke"}
udemDispatchCookieEvent(eventData);;
// Revoke Google consent
// Update ad_storage to 'denied'.
gtag('consent', 'update', {
'ad_storage': 'denied',
});
}
on_udem_cookie_consent('performanceCookies', udem_performance_cookie_consent_add, udem_performance_cookie_consent_remove);
on_udem_cookie_consent('functionalityCookies', udem_functionality_cookie_consent_add, udem_functionality_cookie_consent_remove);
on_udem_cookie_consent('adsCookies', udem_ads_cookie_consent_add, udem_ads_cookie_consent_remove);
}
});
// À partir du 2 novembre 2023 (fonction on_udem_cookie_update_consent)
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Default ad_storage to 'denied'.
gtag('consent', 'default', {
'ad_storage': 'denied',
'analytics_storage': 'denied',
'functionality_storage': 'denied'
});
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','VOTRE_IDENTIFIANT_GTM');
window.addEventListener('load', () => {
// Ajout des triggers Google
if (typeof on_udem_cookie_update_consent === 'function') {
function udem_cookie_consent_update(categories) {
for (const [key, value] of Object.entries(categories)) {
categories[key] = (value === true) ? 'granted' : 'denied';
}
udem_google_cookie_consent_update(categories);
}
function udem_google_cookie_consent_update(categories) {
gtag('consent', 'update', {
'ad_storage': categories.adsCookies,
'functionality_storage': categories.functionalityCookies,
'analytics_storage': categories.performanceCookies
});
}
on_udem_cookie_update_consent(udem_cookie_consent_update);
}
// fin window.addEventListener('load', () => {
});
À noter que l'ordre est important :
- D'abord la création du dataLayer
- Puis les fonctions personnalisées (appels à gtag et on_udem_cookie_consent)
- Et finalement l'inclusion du script udem_consentement_temoins.js
Désactivation de services externes (vidéos youtube, par exemple)
Les services externes, notamment ceux de youtube sont intégrés via des iframes. La solution préconisée est de modifier l'attribut src de ces iframes pour en mettre le contenu plutôt dans data-src. Ceci aura pour effet de désactiver les iframes. Lorsque les témoins de fonctionnalité seront activés, le contenu sera remis dans l'attribut src, les rendant à nouveau disponibles.
Cette désactivation se fait en deux temps :
- Côté serveur et/ou côté contenu
- Côté client (javascript)
Côté serveur et/ou côté contenu, il est possible de le faire de deux façons :
- Désactivation manuelle
- Remplacer l'attribut src par data-src dans chacun des iframe
- À noter que chaque nouveau iframe ajouté dans le futur devra également être modifié pour avoir l'attribut src plutôt que data-src
- Désactivation automatique
- Si votre système de gestion de contenu le permet ou que vous pouvez modifier le code source côté serveur de votre site web, faites les modifications nécessaires
- Ceci peut se faire par un plugin de filtre, par exemple, qui remplace tous les attributs src de iframe par un attribut data-src avant de retourner le contenu web, ou par tout autre mécanique visant à trouver les iframe et remplacer leur src par data-src.
- Si votre système de gestion de contenu le permet ou que vous pouvez modifier le code source côté serveur de votre site web, faites les modifications nécessaires
Côté client (en javascript), deux possibilités sont offertes :
- Désactiver tous les iframes, et tous les réactiver lorsque les témoins de fonctionnalités sont acceptés
- Déterminer quels iframes désactiver ou non
- Ceci est utile si par exemple on veut pouvoir associer différents types de témoins (fonctionnalité, publicité, etc.) à différents types de iframe, ou s'il y a des iframe qu'on ne veut jamais désactiver (iframe strictement nécessaires ou n'utilisant pas de cookies, entre autres)
Bien que la désactivation côté client seulement puisse sembler suffisante, ce n'est généralement pas le cas. Il s'agit d'une protection supplémentaire seulement.
Option 1 : Désactiver tous les iframes
// Partie commune valide autant avant qu'après le 2 novembre 2023
function moveYouTubeSrc(consentGiven = false) {
// Select all iframe elements on the page
const iframes = document.querySelectorAll('iframe');
// Loop through each iframe
iframes.forEach((iframe) => {
if (!consentGiven) {
if (iframe.src) {
iframe.dataset.src = iframe.src;
iframe.removeAttribute('src');
}
} else {
// Move the data-src attribute back to src
const dataSrc = iframe.dataset.src;
if (dataSrc) {
iframe.src = dataSrc;
iframe.removeAttribute('data-src');
}
}
});
}
// Hide YT videos so they can't be played until consent is granted
window.addEventListener('DOMContentLoaded', () => {
// Call the function to move YouTube iframe src attributes to data-src attributes
moveYouTubeSrc(false);
});
// Avant le 2 novembre 2023 (fonction on_udem_cookie_consent)
window.addEventListener('load', () => {
if (typeof on_udem_cookie_consent === 'function') {
function udem_functionality_cookie_consent_add(category) {
// Grant YT permission
moveYouTubeSrc(true);
}
function udem_functionality_cookie_consent_remove(category) {
// Revoke YT permission
moveYouTubeSrc(false);
}
on_udem_cookie_consent('functionalityCookies', udem_functionality_cookie_consent_add, udem_functionality_cookie_consent_remove);
}
});
// À partir du 2 novembre 2023 (fonction on_udem_cookie_update_consent)
window.addEventListener('load', () => {
// Ajout des triggers Google
if (typeof on_udem_cookie_update_consent === 'function') {
function udem_cookie_consent_update(categories) {
for (const [key, value] of Object.entries(categories)) {
categories[key] = (value === true) ? 'granted' : 'denied';
}
if (categories.functionalityCookies === 'granted') {
// Grant YT permission/* */
moveYouTubeSrc(true);
} else {
// Revoke YT permission
moveYouTubeSrc(false);
}
}
on_udem_cookie_update_consent(udem_cookie_consent_update);
}
// fin window.addEventListener('load', () => {
});
Option 2 : Désactiver des iframes en particulier
Le code est le même que pour l'option 1, toutefois il y a deux lignes à modifier dans la fonction moveYouTubeSrc. Dans les deux cas, il faut ajouter la liste des iframes qui doivent être désactivés et réactivés (dans l'exemple, ce sont ceux provenant de youtube.com et youtube-nocookie.com : ces conditions doivent évidemment être modifiées s'il y a d'autres sites externes à considérer).
À noter qu'avec cette méthode, si de nouveaux fournisseurs sont utilisés, il sera important de les ajouter dans les deux conditions.
// Partie commune valide autant avant qu'après le 2 novembre 2023
function moveYouTubeSrc(consentGiven = false) {
// Select all iframe elements on the page
const iframes = document.querySelectorAll('iframe');
// Loop through each iframe
iframes.forEach((iframe) => {
if (!consentGiven) {
if (iframe.src && iframe.src.includes('youtube.com') || iframe.src && iframe.src.includes('youtube-nocookie.com')) {
iframe.dataset.src = iframe.src;
iframe.removeAttribute('src');
}
} else {
// Move the data-src attribute back to src
const dataSrc = iframe.dataset.src;
if (dataSrc && dataSrc.includes('youtube.com') || dataSrc && dataSrc.includes('youtube-nocookie.com')) {
iframe.src = dataSrc;
iframe.removeAttribute('data-src');
}
}
});
}
Il serait également possible d'adapter cette fonction pour désactiver tous les iframes SAUF ceux de certaines provenances, ce qui offrirait l'avantage de prendre en compte les nouveaux fournisseurs automatiquement, sans bloquer certaines fonctionnalités essentielles.
Pixel Facebook
Si Google Tag Manager (GTM) est utilisé pour gérer le pixel Facebook, voir les instructions plus haut, dans la section spécifique pour cet outil.
Sinon, si le pixel est inclus manuellement, le code à inclure est celui ci-dessous, en modifiant évidemment le code personnalisé, ou même toute la fonction dans le bas du script pour être conforme à celle fournie par Facebook. S'assurer d'ajouter les éléments propres à l'UdeM, par contre (udem_set_consent_cookie).
// Avant le 2 novembre 2023 (fonction on_udem_cookie_consent)
function udemDispatchCookieEvent(data) {
window.dispatchEvent(new CustomEvent('udem_set_consent_cookie', {detail: data}));
}
function udem_ads_cookie_consent_add(category) {
// Grant Facebook Pixel
var eventData = {category: category, action: "grant"}
udemDispatchCookieEvent(eventData);
}
function udem_ads_cookie_consent_remove(category) {
// Revoke Pixel consent
var eventData = {category: category, action: "revoke"}
udemDispatchCookieEvent(eventData);
}
on_udem_cookie_consent('adsCookies', udem_ads_cookie_consent_add, udem_ads_cookie_consent_remove);
!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('consent', 'revoke');
fbq('init', 'VOTRE_CODE_PERSONNALISÉ');
fbq('track', 'PageView');
window.addEventListener('udem_set_consent_cookie',function(e){
if (e.detail.category === 'adsCookies') {
fbq('consent',e.detail.action);
// console.log('fbq consent action',e.detail.action)
}
},!1)
// À partir du 2 novembre 2023 (fonction on_udem_cookie_update_consent)
function udemDispatchCookieEvent(data) {
window.dispatchEvent(new CustomEvent('udem_set_consent_cookie', {detail: data}));
}
window.addEventListener('load', () => {
// Ajout des triggers Google
if (typeof on_udem_cookie_update_consent === 'function') {
function udem_cookie_consent_update(categories) {
for (const [key, value] of Object.entries(categories)) {
categories[key] = (value === true) ? 'granted' : 'denied';
}
udem_fb_cookie_consent_update(categories);
}
function udem_fb_cookie_consent_update(categories) {
console.log('udem_fb_cookie_consent_update categories : ', categories);
if (categories.adsCookies === 'granted') {
// Grant Facebook Pixels
var eventData = {category: 'adsCookies', action: "grant"}
udemDispatchCookieEvent(eventData);
} else {
// Revoke Pixels consent
var eventData = { category: 'adsCookies', action: "revoke" }
udemDispatchCookieEvent(eventData);
}
}
on_udem_cookie_update_consent(udem_cookie_consent_update);
}
// fin window.addEventListener('load', () => {
});
Désactivations multiples
Dans plusieurs cas, il y aura des témoins de différents types à activer ou désactiver en même temps. Pour ce faire, les fonctions mentionnées précédemment devront être combinées, la même fonction devant, par exemple, inclure à la fois du code pour Google Analytics et pour les iframes. Voici un exemple.
// Avant le 2 novembre 2023 (fonction on_udem_cookie_consent)
function udem_functionality_cookie_consent_add(category) {
// Consentement Youtube.
moveYouTubeSrc(true);
// Consentement Google.
gtag('consent', 'update', {
'functionality_storage': 'granted',
});
// Autre consentement.
console.log('Autre consentement personnalisé ici');
}
// À partir du 2 novembre 2023 (fonction on_udem_cookie_update_consent)
window.addEventListener('load', () => {
if (typeof on_udem_cookie_update_consent === 'function') {
console.log('on_udem_cookie_update_consent');
function udem_cookie_consent_update(categories) {
console.log('udem_cookie_consent_update categories : ', categories);
for (const [key, value] of Object.entries(categories)) {
categories[key] = (value === true) ? 'granted' : 'denied';
}
udem_google_cookie_consent_update(categories);
udem_fb_cookie_consent_update(categories);
}
function udem_google_cookie_consent_update(categories) {
console.log('udem_google_cookie_consent_update categories : ', categories);
if (categories.functionalityCookies === 'granted') {
// Grant YT permission/* */
moveYouTubeSrc(true);
} else {
// Revoke YT permission
moveYouTubeSrc(false);
}
gtag('consent', 'update', {
'ad_storage': categories.adsCookies,
'functionality_storage': categories.functionalityCookies,
'analytics_storage': categories.performanceCookies
});
}
function udem_fb_cookie_consent_update(categories) {
console.log('udem_fb_cookie_consent_update categories : ', categories);
if (categories.adsCookies === 'granted') {
// Grant Facebook Pixels
var eventData = {category: 'adsCookies', action: "grant"}
udemDispatchCookieEvent(eventData);
} else {
// Revoke Pixels consent
var eventData = { category: 'adsCookies', action: "revoke" }
udemDispatchCookieEvent(eventData);
}
}
on_udem_cookie_update_consent(udem_cookie_consent_update);
}
// fin window.addEventListener('load', () => {
});
Historique des modifications du composant web
Version 2 - 2023-11-02
- Changements visuels (panneau pleine largeur, révision des actions et boutons disponibles, modifications de textes, corrections graphiques)
- Retrait de la fonction on_udem_cookie_consent (changement non rétrocompatible : les utilisateurs de cette fonction ont dû modifier leur code)
- Ajout de la fonction on_udem_cookie_update_consent
- Ajout d'un "cache buster" pour s'assurer que les nouvelles versions sont prises en compte plus rapidement par les navigateurs web
Version 1 - 2023-09-29
- Version initiale