Il y a 389 articles et 19 utilisateurs inscrits (ce bandeau est défini dans MediaWiki:Sitenotice)
Orejime : gestionnaire de cookies
Aller à la navigation
Aller à la recherche
Introduction
[modifier | modifier le wikicode]Orejime est un gestionnaire de cookies a intégrer dans Pleade.
Voir : https://github.com/empreinte-digitale/orejime
Important :
Documentation à mettre à jour une fois l'intégration dans Pleade terminée.
Pour son intégration, on est passé par première étape de vérification et de test.
La seconde étape consistera à ajouter proprement orejime dans Pleade : ajout de variables notamment pour les intégration de code GA et du script de configuration personnalisé d'orejime.
Notice :
On devra pouvoir activer ou désactiver orejime dans Pleade, pour les clients qui utilisent Drupal..
Dans ce cas, on utilisera le module https://www.drupal.org/project/orejime et l'appel du script devra être activé "manuellement". Voir la documentation orejime.
Important :
Pour cette intégration, on utilise la distribution 1.2.3. La 2.2.1 ne fonctionne pas avec Pleade ???.
Intégration "en dur"
[modifier | modifier le wikicode]Fonctionne actuellement sur http://ad44-recette.pleade.com/
Fichiers modifiés dans /recette/ad44/tomcat/webapps/pleade/
- commons/xsl/pleade-aggregate.xsl
Fichiers ajoutés :
- theme/css/local/orejime.css
Ces fichiers ont été ajouté dans ad44/surcharges/internet
Modification des templates Pleade
[modifier | modifier le wikicode]Templates concernées :
- pleade/theme/module-eadeac-template-search.html
- pleade/theme/module-eadeac-template-ead.html
Supprimez la balise <script> GTM_UA des 2 templates (globalement partout où est fait cet appel) pour tout gérer depuis pleade-aggregate.xsl
Modification de la xsl pleade-aggregate
[modifier | modifier le wikicode]Dans /pleade/commons/xsl/pleade-aggregate.xls
Pour fonctionner, Orejime a besoin d'un objet de configuration, d'un appel aux JS et css "de base", d'un appel à la css personnalisée (pour le client) et, si une app tiers partie est utilisée, des balises <script>, <noscript>.
- Ajout de la balise <noscript> Google Tag Manager.
- Intégration "en dur" du script qui va charger les éléments de personnalisation de la fenêtre de consentement : texte d'introduction, libellé des boutons, lien vers la politique RGPD, et leur traduction (dans l'exemple suivante en uniquement).
- Ajout de la balise <script> GTM.
- Ajout des appels css et JS.
Il faut variabiliser ces ajouts : on veut orejime | on ne veut pas orejime.
Ajout du GTM et du script de configuration d'orejime
[modifier | modifier le wikicode]Pour une intégration finalisée", il faut pouvoir charger, dans le body (donc on n'ajoute pas dans les templates), l'appel GTM et le script depuis un fichier externe à la xsl. Le contenu de ces fichiers varie d'un client à un autre.
On pourrait avoir un fichier "de base", inclus dans Pleade.
Il faut aussi prévoir une page "statique" de politique de consentement.
Ce même fichier sera modifié en fonction des spécificités des projets de chaque client.
Voir les différentes possibilités de configuration : https://github.com/empreinte-digitale/orejime#configuration.
Pour ce projet, on a retenu les paramètres suivants :
pleade-aggregate.xls : ligne 318
<div class="yui-skin-pleade">
<xsl:apply-templates select="node()" mode="template" />
</div>
+ <!-- Google Tag Manager (noscript) -->
+ <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=''GTM-MSJSP7S"
+ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+ <!-- End Google Tag Manager (noscript) -->
+ <!-- orejime config -->
+ <script>
+ <xsl:comment>
+ window.GTM_UA = 'GTM-MSJSP7S';
+ window.orejimeConfig = {
+ privacyPolicy: 'https://archives.loire-atlantique.fr/44/donnees-personnelles/c_30659',
+ logo: 'https://design.loire-atlantique.fr/assets/images/pictos/picto-cookies.svg',
+ cookieExpiresAfterDays: '1',
+ lang: 'fr',
+ translations: {
+ fr: {
+ consentModal: {
+ title: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.title">gestion de vos preferences sur les cookies</i18n:text>',
+ description: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.description">les fonctionnalités de ce site listées ci-dessous s’appuient sur des services proposés par des tiers (Statistiques Google Analytics, vidéo YouTube, etc.). Si vous donnez votre consentement, ces tiers déposeront des cookies qui vous permettront de visualiser directement sur archives.loire-atlantique.fr du contenu hébergé par ces tiers ou de partager nos contenus.\r\nVia ces cookies, ces tiers collecteront et utiliseront vos données de navigation pour des finalités qui leur sont propres, conformément à leur politique de confidentialité (liens ci-dessous). Cette page vous permet de donner ou de retirer votre consentement, soit globalement soit finalité par finalité.</i18n:text>',
+ privacyPolicy: {
+ name: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.privacyPolicy.name">politique de confidentialité</i18n:text>',
+ text: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.privacyPolicy.text">pour en savoir plus, merci de lire notre {privacyPolicy}</i18n:text>'
+ }
+ },
+ consentNotice: {
+ description: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.description">Le site archives.loire-atlantique.fr utilise des cookies afin d’améliorer votre expérience, personnaliser notre contenu et nos annonces, vous offrir des fonctionnalités relatives aux médias sociaux et analyser notre trafic. Cliquez sur le bouton « J’accepte » pour donner votre consentement à ces opérations. Vous pouvez modifier vos préférences en cliquant sur le bouton « Je paramètre »</i18n:text>',
+ learnMore: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.learnMore">Je paramètre les cookies</i18n:text>',
+ privacyPolicy: {
+ name: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.privacyPolicy.name">politique de confidentialité</i18n:text>',
+ text: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.privacyPolicy.text">Pour en savoir plus, merci de lire notre {privacyPolicy}</i18n:text>'
+ }
+ },
+ accept: '<i18n:text catalogue="module-orejime" key="orejime.button.accept">j’accepte les cookies</i18n:text>',
+ acceptAll: '<i18n:text catalogue="module-orejime" key="orejime.button.acceptAll">j’accepte tout</i18n:text>',
+ decline: '<i18n:text catalogue="module-orejime" key="orejime.button.decline">je refuse les cookies</i18n:text>',
+ declineAll: '<i18n:text catalogue="module-orejime" key="orejime.button.declineAll">je refuse tout</i18n:text>',
+ save: '<i18n:text catalogue="module-orejime" key="orejime.button.save">sauvegarder</i18n:text>',
+ saveAll: '<i18n:text catalogue="module-orejime" key="orejime.button.saveAll">sauvegarder</i18n:text>',
+ close: '<i18n:text catalogue="module-orejime" key="orejime.button.close">fermer - Gestion de vos préférences sur les cookies</i18n:text>',
+ purposes: {
+ analytics: '<i18n:text catalogue="module-orejime" key="orejime.purposes.analytics">analyse</i18n:text>'
+ },
+ "jsessionid":{
+ description: '<i18n:text catalogue="module-orejime" key="orejime.purposes.jsessionid.description">ce cookie est utilisé par le serveur pour identifier une session utilisateur et permettre une navigation correcte. Il est supprimé lors de la fin de la session de navigation ou à la fermeture du navigateur.</i18n:text>',
+ },
+ "google-tag-manager":{
+ description: '<i18n:text catalogue="module-orejime" key="orejime.purposes.google-tag-manager.description">nous utilisons Google Analytics par l’intermédiaire de Google Tag Manager pour collecter des informations analytiques sur nos utilisateurs.</i18n:text>',
+ },
+ "orejime":{
+ description: '<i18n:text catalogue="module-orejime" key="orejime.purposes.orejime.description">ce cookie est utilisé par notre gestionnaire de cookies pour mémoriser vos préférences.</i18n:text>',
+ },
+ },
+ en: {
+ consentModal: {
+ title: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.title">management of your cookie preferences</i18n:text>',
+ description: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.description">the features of this site listed below rely on services offered by third parties (Google Analytics statistics, YouTube video, etc.). If you give your consent, these third parties will place cookies that will allow you to view content hosted by these third parties directly on archives.loire\-atlantique.fr or to share our content.\r\nVia these cookies, these third parties will collect and use your browsing data for their own purposes, in accordance with their privacy policy (links below). This page allows you to give or withdraw your consent, either globally or on a purpose-by-purpose basis.</i18n:text>',
+ privacyPolicy: {
+ name: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.privacyPolicy.name">privacy Policy</i18n:text>',
+ text: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentModal.privacyPolicy.text">to find out more, please read our {privacyPolicy}</i18n:text>'
+ }
+ },
+ consentNotice: {
+ description: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.description">the archives.loire-atlantique.fr website uses cookies to improve your experience, personalize our content and ads, provide you with social media features and analyze our traffic. Click the "I accept” to give your consent to these operations. You can change your preferences by clicking on the "I set" button</i18n:text>',
+ learnMore: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.learnMore">I set cookies</i18n:text>',
+ privacyPolicy: {
+ name: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.privacyPolicy.name">politique de confidentialité</i18n:text>',
+ text: '<i18n:text catalogue="module-orejime" key="orejime.translations.consentNotice.privacyPolicy.text">to find out more, please read our {privacyPolicy}</i18n:text>'
+ }
+ },
+ accept: '<i18n:text catalogue="module-orejime" key="orejime.button.accept">I accept cookies</i18n:text>',
+ acceptAll: '<i18n:text catalogue="module-orejime" key="orejime.button.acceptAll">I accept everything</i18n:text>',
+ decline: '<i18n:text catalogue="module-orejime" key="orejime.button.decline">I refuse cookies</i18n:text>',
+ declineAll: '<i18n:text catalogue="module-orejime" key="orejime.button.declineAll">I refuse everything</i18n:text>',
+ save: '<i18n:text catalogue="module-orejime" key="orejime.button.save">save</i18n:text>',
+ saveAll: '<i18n:text catalogue="module-orejime" key="orejime.button.saveAll">save all</i18n:text>',
+ close: '<i18n:text catalogue="module-orejime" key="orejime.button.close">close - Managing your cookie preferences</i18n:text>',
+ purposes: {
+ analytics: '<i18n:text catalogue="module-orejime" key="orejime.purposes.analytics">analyse</i18n:text>'
+ },
+ "jsessionid":{
+ description: '<i18n:text catalogue="module-orejime" key="orejime.purposes.jsessionid.description">this cookie is used by the server to identify a user session and allow correct navigation. It is deleted when the browsing session ends or when the browser is closed.</i18n:text>',
+ },
+ "google-tag-manager":{
+ description: '<i18n:text catalogue="module-orejime" key="orejime.purposes.google-tag-manager.description">we use Google Analytics through Google Tag Manager to collect analytical information about our users.</i18n:text>',
+ },
+ "orejime":{
+ description: '<i18n:text catalogue="module-orejime" key="orejime.purposes.orejime.description">this cookie is used by our cookie manager to remember your preferences.</i18n:text>',
+ },
+ },
+ },
+ apps: [
+ {
+ name: 'google-tag-manager',
+ title: 'Google Analytics et Tag Manager',
+ cookies: [
+ '_ga',
+ '_gat',
+ '_gid',
+ '__utma',
+ '__utmb',
+ '__utmc',
+ '__utmt',
+ '__utmz',
+ '_gat_gtag_' + GTM_UA,
+ '_gat_' + GTM_UA
+ ],
+ optOut: true,
+ purposes: ['analytics']
+ },
+ {
+ name: 'jsessionid',
+ title: 'JSESSIONID',
+ purposes: [],
+ required: true
+ },
+ {
+ name: 'orejime',
+ title: 'orejime',
+ purposes: [],
+ required: true
+ }
+ ],
+ };
+ </xsl:comment>
+ </script> </body>
</xsl:template>
Ajout d'attributs aux balises <script>
[modifier | modifier le wikicode]Cette balise a été supprimée des templates (en supra), pour être gérée depuis la xsl.
S'il y a du code de suivi Google Analytics, modifiez les attributs de la balise script pour que le consentement prenne en compte le suivi GA.
- <script>
+ <script
+ type="opt-in"
+ data-type="application/javascript"
+ data-name="google-tag-manager">
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push [...]
</script>
Par exemple :
<script data-type="application/javascript" data-name="google-tag-manager" type="application/javascript" >(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','GTM-MSJSP7S');</script>
Placer la balise modifiée :
pleade-aggregate.xls : ligne 562
3) module-*.css
4) local/*.css
-->
+ <!-- Google Tag Manager + orejime pour les attributs -->
+ <script data-type="application/javascript" data-name="google-tag-manager" type="application/javascript" >(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','GTM-MSJSP7S');</script>
+ <!-- End Google Tag Manager -->
<xsl:variable name="css-template" select="xhtml:link[@rel='stylesheet'] | link[@rel='stylesheet']" />
<xsl:variable name="css-main" select="$main/xhtml:head/xhtml:link[@rel='stylesheet']" />
Ajout de l'appel de la css de base intégrée dans Pleade, ou avec CDN et appel css local
[modifier | modifier le wikicode]pleade-aggregate.xls : ligne 585
<link type="text/css" rel="stylesheet" href="{$themepath}css/db.css" />
<link type="text/css" rel="stylesheet" href="{$themepath}css/local/db.css" />
+ <!-- orejime ccs CDN desactive -->
+ <!-- <link href="https://unpkg.com/orejime@1.2.3/dist/orejime.css" rel="stylesheet" /> -->
+ <!-- /orejime CDN desactive -->
+
+ <!-- orejime css de base in pleade active -->
+ <link type="text/css" rel="stylesheet" href="{$themepath}css/orejime.css" />
+ <!-- /orejime css de base intregree active -->
+
+ <!-- orejime css locale in pleade active -->
+ <link href="{$themepath}css/local/orejime.css" type="text/css" rel="stylesheet" />
+ <!-- /orejime css locale intregree active -->
+
<!-- Modules Pleade -->
<xsl:apply-templates select="$css-template[starts-with(@href, 'css/module-')]" mode="template" />
<xsl:apply-templates select="$css-main[starts-with(@href, 'css/module-')]" mode="main" />
Création de l'appel du JS intégré à Pleade (v1.2.3) ou par CDN.
[modifier | modifier le wikicode]Important :
Attention au positionnement de cet appel ! À placer après les appels des autres JS, sinon, conflit !.
Important :
Avec Pleade, la distribution 2.2.1 ne fonctionne pas !!! Prendre la v 1.2.3.
pleade-aggregate.xls : ligne 781
<script type="text/javascript" src="{$themepath}js/pleade/module/cdc/CdcTreeView.js">// </script>
+
+ <!-- orejime CDN desactive -->
+ <!-- <script src="https://unpkg.com/orejime@1.2.3/dist/orejime.js"></script> -->
+ <!-- /orejime CDN -->
+
+ <!-- orejime in pleade active -->
+ <script type="text/javascript" src="{$themepath}js/orejime/orejime.js">// </script>
+ <!-- /orejime in pleade -->
+
<xsl:if test="$include-thesx = 'true'">
Autre exemple d'intégration d'app third-party
[modifier | modifier le wikicode]Dans le script de configuration, on peut ajouter d'autres applications third-party, comme ici le streaming
apps: [
{
name: 'streaming-video',
title: 'Streaming vidéo',
purposes: ['streamingvideo'],
optOut: false,
required: false,
onlyOnce: false,
callback: function(consent, app){
// This is an example callback function.
const overlays = document.querySelectorAll('.ds44-media-overlay');
consent ? overlays.forEach((overlay) => {
overlay.style.display = "none";
}) : overlays.forEach((overlay) => {
overlay.style.display = "table";
});
console.log("User consent for app " + app.name + ": consent=" + consent)
},
},
Notes pour l'intégration variabilisée dans Pleade
[modifier | modifier le wikicode]Après la vérification de la faisabilité de l'intégration "en dur" dans Pleade, voici ce que l'on attend pour intégrer "proprement" orejime dans Pleade.
Pour activer orejime, on a besoin des ajouts suivants :
Dans le HEAD
[modifier | modifier le wikicode]- pleade-aggregate : balise <script> si GTM_UA (paramétrable)
- pleade-aggregate : appel css et JS (CDN ou in Pleade : paramétrable)
Dans le BODY
[modifier | modifier le wikicode]- pleade-aggregate.xsl: balise <noscript> Google Tag Manager (si GTM_UA : paramétrable)
- pleade-aggregate.xsl: <script> de la configuration orejime personnalisée (appel fichier externe ?).
Ajout des i18n et des fichiers pour l'intégration in Pleade : css et JS
[modifier | modifier le wikicode]- /theme/css/orejime.css <- css de base.
- /theme/css/local/orejime.css <- css personnalisée.
- /theme/js/orejime/orejime.js <- js de base v1.2.3.
- /theme/i18n/module-orejime.xml
- /theme/i18n/module-orejime_en.xml
- /theme/i18n/local/module-orejime.xml
- /theme/i18n/local/module-orejime_en.xml
Les attentes
[modifier | modifier le wikicode]L'intégration a été testée :
- avec les appels externes CDN à orejime + le <script> personnalisé,
- en intégrant les fichiers orejime (v 1.2.3) : CSS et JS + le <script> personnalisé.
Ce que l'on souhaite :
- Activer ou désactiver orejime "en une seule action" = Un paramètre à activer quelque part.
- Permettre le choix : CDN ou intégration Pleade = Un paramètre à activer quelque part.
- Gérer avec des paramètres, les variables personnalisables de la configuration de l'objet orejime : par exemple : window.GTM_UA =, privacyPolicy:, logo:, cookieExpiresAfterDays:, cookieDomain:, mustConsent:, mustNotice:, debug:, etc (Voir : https://github.com/empreinte-digitale/orejime et aussi, le fichier de l'archive GitHub orejime-master/orejime.js pour voir la liste des paramètres de defaultConfig).
- Gérer en i18n, les libellés et les textes de translations {et son contenu}. Dans le <script>, les langues sont toutes présentes. Orejime utilise des fichiers "type" i18n en ".yml". Ce n'est pas actif dans la configuration installée pour orejime. Dans le contexte Pleade, il on va charger uniquement la langue choisie par l'utilisateur et laisser le mécanisme i18n de Pleade avec la locale faire le travail = Charger le contenu de translations: { [langue_contexte_pleade_locale] } et du paramètre de configuration lang:
- orejime gère le consentement lié aux apps third-party, comme GA, orejime, etc. = Gérer les apps présentes dans le <script> : GTM_UA, nos cookies JSON et orejime dans : apps: {et son contenu}. Pour les futures demandes (comme matomo pour Pandor), on fera un devis.
- Rendre l'ajout de balise GTM <script>, <noscript> paramétrables. L'ajout de l'ID GTM_UA est la seule personnalisation dans l'ajout de ces balises. Il faut prévoir les mises à jour de ce type de balise sans rentrer dans le code en dur.
- Créer une page statique dans Pleade avec la politique de consentement "par défaut" (pour éviter l'erreur "Pas de page de politique...").
Intégration dans Drupal
[modifier | modifier le wikicode]Lors d'une installation Drupal - Pleade intégré, voir si on garde orejime activé ou non.
Il y a une différence notable entre les deux prises en charge. Chargé depuis un module, orejime permet moins de possibilité sans développement supplémentaire.
Étudier la faisabilité d'utiliser orejime configuré dans Pleade pour Drupal.
Test dans msh-dijon avec orejime dans Pleade uniquement
[modifier | modifier le wikicode]Visible ici : http://msh-dijon-recette.pleade.com/pleade/
- Modification de pleade-aggregate avec ajout de tous les appels (hors <script>, <noscript> GTM non utilisé dans MSH). Génère un conflit lorsque l'appel CDN orejime.js est inclus dans pleade-aggregate avant l'appel des scripts JS. Ok si il est placé après.
- Visible uniquement dans la partie Pleade.
Les css et JS de orejime sont bien chargés dans la partie Drupal (par le module Pleade).
Le div id="orejime" ne se charge pas dans Drupal.
Important :
Analyser l'intégration avec le module Pleade de Drupal ? Ou autre approche.
Test dans cdf-recette avec module Drupal orejime
[modifier | modifier le wikicode]Visible ici : http://cdf-recette.pleade.com (login:mp dans fichier internals).
Pour ce test, orejime n'est pas intégré dans Pleade.
Notice :
Dans ce cas de figure, il faudrait désactiver orejime dans Pleade, qui deviendrait inutile.
Dans l'immédiat, ce n'est pas visible, puisque Drupal ne charge pas le DIV orejime.
À étudier selon le retour sur la faisabilité d'intégrer ce DIV DANS DRUPAL, lorsque orejime est activé dans Pleade..Module Drupal orejime
[modifier | modifier le wikicode]Voir : https://www.drupal.org/project/orejime
Important :
Au 20230323, le module n'est pas encore compatible avec Drupal 10.0.5..
Installer le module orejime :
composer require 'drupal/orejime:2.0.x-dev@dev'
Configurer le module : /admin/structure/orejime_service/settings
Ajoutez les app third-party dans admin/content/orejime_service en cochant la case :
|_| Statut de publication
A boolean indicating whether the Orejime is published.
Pré-requis Google Tag Manager
[modifier | modifier le wikicode]Pour que Google Analytics soit pris en compte dans le consentement, il faut paramétrer le module admin/config/services/google-analytics en ajoutant les "bouts" de code avant, et | ou, après avec les pré-requis concernant les attributs de la balise <script>.
Voir ajout des attributs dans la balise <script>
Problème avec le module qui plante Drupal
[modifier | modifier le wikicode]L'installation de la version 2.0.0 du module fait planter Drupal avec l'erreur et plus aucun accès à l'interface :
Drupal\Core\Entity\Query\QueryException : Entity queries must explicitly set whether the query should be access checked or not. See Drupal\Core\Entity\Query\QueryInterface::accessCheck(). dans Drupal\Core\Entity\Query\Sql\Query->prepare() (ligne 141 de /home/ajlsm/recette/cdf/drupal/web/core/lib/Drupal/Core/Entity/Query/Sql/Query.php).
Pour résoudre le problème :
- Supprimez le contenu de module "à la main" dans
$ rm -rf /web/modules/contrib/orejime/*
- Créer un fichier provisoire orejime.info.yml avec les infos suivantes :
name: 'Orejime'
type: module
description: 'Drupal integration of Orejime'
core_version_requirement: ^9 || ^10
package: 'orejime'
- Supprimez l'entrée dans la base de données, avec drush :
drush sql-query "DELETE FROM key_value WHERE collection='system.schema' AND name='orejime';"
drush sql-query "DELETE FROM key_value WHERE collection='system.schema' AND name='Orejime';"
- Videz les caches Drupal
$ drush cr