Proposition de contribution pour organiser le projet avec un gestionnaire de paquet

[pactole]

Hello,

Je suis dev au sein de Mediapart et aimerions utiliser ce projet pour la mise en place du cookie consent.

Pourquoi nous aimerions l'utiliser :

• Parce que c'est open source.
• Parce qu'il est cool à l'usage pour les internautes (gestion fine des cookies).
• Parce que côté developement, il permet facilement l'ajout de services.
• ...

Ce que nous avons compris du projet :

• Il doit être facilement utilisable
• Il est modulaire

Ce qui nous préoccupe :

• Le nombre de lignes de code par fichier est très important
• La logique et l'affichage sont imbriqués
• La taille des fichiers rend difficile la participation par la communauté et les code review
• Il ne suit pas les logiques actuelles du développement js (npm + un gestionnaire de paquet)

Comment nous pouvons contribuer :

• Nous avons des services à ajouter
• Nous souhaitons découper logique et rendu pour rendre plus modulaire l'intégration de ce projet
• Nous aimerions utiliser un gestionnaire de paquet (avec les docs et scripts d'installation)
  • Pour l'intégrer au sein de sites qui en utilisent.
  • Pour découper le code de tarte au citron sans multiplier les requêtes http.

Bien sûr, ces modifications peuvent être importantes et je préfère qu'on en parle ensemble,

Objectifs : Nous nous attacherons à rendre le projet utilisable facilement et sans gestionnaire de paquet pour les développeurs / ou non développeur qui n'ont pas la possibilité d'en utiliser en proposant un fichier minifié issu de la compilation. Cette architecture permettrai d'augmenter les participations de développeurs plus habitués au gestionnaires de paquets

A bientôt,

JacJac pour l'équipe de Mediapart.

[AmauriC]

Bonjour JacJac :)

Ce serait une excellente chose !

La librairie n'avait pas vocation a devenir si populaire et j’avoue que ce n'est pas vraiment agréable à modifier.

J'ai moins de temps à consacrer au projet mais si je peux aider, n'hésitez pas.

[pactole]

Ok, c'est noté, je m'en va préparer des PR. Pour la deadline du 25 mai, je ne suis pas sûr d'avoir le temps de tout mettre en place, mais pour la suite, avec plaisir.

[shirokoweb]

Hello @jacjac

C'est superbe comme idée, je pensais à quelque chose de similaire mais via Google Tag Manager. Créer des Tags, des Triggers et de Variables personnalisables.

Extrait d'un tag :

tarteaucitron.user.analyticsUa = '{{tarteaucitron - UAcode}}';

{{tarteaucitron - UAcode}} étant une la référence d'une variable constante avec la valeur UA-XXXXXXX-X

Les constantes peuvent être utilisées pour passer n'importe quel paramètre :

var tarteaucitronForceLanguage = '{{tarteaucitron - language}}'; (viable contante fr, en, es...) ou "highPrivacy": {{tarteaucitron - highPrivacy}}, (contante true ou false)

ou encore personnaliser l'apparence pour utiliser des classes existantes dans la (les) feuille(s) de style du site, comme les boutons par exemple : économie de chargement d'une ressource supplémentaire (roundtrip)

On peut aussi imaginer héberger le script sur un CDN et le télécharger de façon async...

Avoir des constantes avec false ou true pour les différents services addthis, addtoanyshare, alexa, amazon.... et un chargement conditionnel du code correspondant au service en fonction de la valeur de la constante (false or true). Ce qui allègerait considérablement le code en ne chargeant QUE ce qui est nécessaire.

Exemple :

if (tarteaucitron.servicesused.addthis.value == "true")
       dataLayer.push( { event: '{{tarteaucitron - addthis}}' } );

[tameroski]

Hello @jacjac , quelles sont les news sur le sujet ? C'est toujours d'actualité ? Merci

[pactole]

Bon, je n'ai pas réussi à reprendre tarteaucitron :(

Notre besoin était similaire : rendre facile la gestion d'un service externe et fonctionner avec des modules. Nos contraintes techniques étaient d'avoir :

• un module ES6 intégrable à notre stack avec webpack.
• le minimum de fichiers js appelés par les navigateurs Notre contrainte métier comme vous l'avez peut-être vu sur Mediapart :
• ne pas proposer une désactivation par cookie, mais par famille.

Je peux envisager la mise en ligne en open source de notre cœur de projet, mais ce n'est pas une V2 de tarteaucitron.

[encreinformatique]

Bon, je n'ai pas réussi à reprendre tarteaucitron :(

Que veux-tu dire par là ? Au final vous êtes parti de zéro pour votre projet ? Vous avez rencontré un problème particulier?

Je suis aussi d'accord (avec tout le monde et même je pense @AmauriC ) que ce serait mieux d'avoir un fichier par service (plus facile à modifier, à maintenir et à tester) avec mise sous npm et/ou yarn.

[AmauriC]

100% d'accord mais je manque de temps :/

Je peux facilement faire le découpage de tarteaucitron.services.js

Quelle architecture serait la bonne ? Une hiérarchie par type comme https://opt-out.ferank.eu/json.php ?

[tameroski]

@jacjac Fonctionnellement, votre solution fait bien le job, ça m'irait bien. C'est un bon compromis entre TarteAuCitron et CookieConsent. Si y'a moyen de mettre ça en open source, ce serait top.

[pactole]

Nous sommes parti de 0 en ES6. Nous n'avons pas rencontré de problèmes particuliers. Chaque service a son fichier. Tout les fichiers sont mergés, babelisés et minifiés avec webpack.

L'archi :

Point d'entrée : un main.js qui load le module cookie-consent

Côté consentement

• une classe agreement.js qui joue le rôle d'interface pour connaître les consentement utilisateur, c'est lui qui lit et écrit dans le cookie de consentement en passant par des micro-interface consent-cookie.js et location-cookie.js (ce dernier va notamment gérer le déclenchement au scroll)
• une abstract modal.js et ses instances pour la bannière, les popin...

Côté services

• en inline dans les pages du site on alimente une collection de configs

  window.cookieConsent.services.push({
  "name" : "service_name",
  "params" : {
      "script" : {
          "url" : "url_js_file",
          ...
      },
      "tracking" : {
          "url" : "url_pixel_file",
          ...
      }
  }
  });

• une abstract/interface service.js qui load le service et gère la partie script et/ou tracking (avec ses instances pour chaque service)
• un loader qui active les services en fonction de l'agrément.

Je vais voir comment le publier.

[encreinformatique]

@AmauriC au minimum, je dirais un dossier services avec un fichier par service. Rien que ça permet de gagner en maintenance (mais tu ajoutes des requêtes http sauf si les fichiers sont regroupés avant mise en production) Cette partie semble assez simple vu l'organisation du fichier services.

Et idéalement, il faudrait une interface pour homogénéiser les services et t'assurer d'avoir les mêmes méthodes pour chaque service.

[florianbouvot]

@jacjac des nouvelles concernant la publication de votre module ?

[alanmac]

This would be of huge benefit to have it packaged as an NPM module and enable tighter integration with custom build environments like bundling and minification with other assets.

It would also be good if it would be possible to override some of the default messaging without editing the source files e.g. perhaps I want to change "Manage Services" to "Manage Cookies" but without changing the source which may get updated in a subsequent release.

Making it available on NPM would also expose the project to many new developers while still keeping it accessible to those that don't use package managers.

My 2-cents, and apologies that it's not in French!

[doricci]

@alanmac In the pull request #182 I added the possibility to customize all the texts available in the script.

You just have to keep the same structure as in the language source file, but with only the text that you want to change and it's done in a js variable before the initialisation so it's not erased with a tarteaucitron update.

It doesn't support multiple languages.

[alanmac]

@d4rk694 thanks for pointing me towards that.

[tameroski]

Looks like it's finally available as an npm package (see #240). Not tested yet though ...

[Imaginaerum]

100% d'accord mais je manque de temps :/

Je peux facilement faire le découpage de tarteaucitron.services.js

Quelle architecture serait la bonne ? Une hiérarchie par type comme https://opt-out.ferank.eu/json.php ?

C'est top mais il y a un soucis avec la sortie:

Exemple -> "aduptech_ads": { "about": { "name": "Ad Up Technology (ads)", "privacy": "https:\/\/www.adup-tech.com\/datenschutz" }, "code": { "js": "", "html": [ "Array", "Array" ] }, "cookies": [], "detection": { "domain": "adup-tech", "tracker": "\/\/ static ads (synchronous)\n<script type=\"text\/javascript\" \n src=\"https:\/\/s.d.adup-tech.com\/ads\/display.js?p=PLACEMENT_KEY\">\n<\/script>\n\n\n\/\/ static ads (asynchronous)\n<div id=\"adup1\"><\/div>\n<script type=\"text\/javascript\">\n window.uAd_init = function() {\n window.uAd.embed(\"adup1\", {\n placementKey: \"PLACEMENT_KEY\",\n responsive: false\n });\n }; \n if (typeof window.uAd === \"object\") window.uAd_init();\n else (function(d, t) {\n var g = d.createElement(t), s = d.getElementsByTagName(t)[0];\n g.src = \"https:\/\/s.d.adup-tech.com\/jsapi\";\n g.async = true;\n s.parentNode.insertBefore(g, s);\n }(document, \"script\"));\n<\/script>\n\n\n\/\/ responsive ads (synchronous)\n<div style=\"width:WIDTH;height:HEIGHT;\">\n <script type=\"text\/javascript\" \n src=\"https:\/\/s.d.adup-tech.com\/ads\/responsive.js?p=PLACEMENT_KEY\">\n <\/script>\n<\/div>\n\n\n\/\/ responsive ads (asynchronous)\n<div id=\"adup1\" style=\"width:WIDTH;height:HEIGHT;\"><\/div>\n<script type=\"text\/javascript\">\n window.uAd_init = function() {\n window.uAd.embed(\"adup1\", {\n placementKey: \"PLACEMENT_KEY\",\n responsive: true\n });\n }; \n if (typeof window.uAd === \"object\") window.uAd_init();\n else (function(d, t) {\n var g = d.createElement(t), s = d.getElementsByTagName(t)[0];\n g.src = \"https:\/\/s.d.adup-tech.com\/jsapi\";\n g.async = true;\n s.parentNode.insertBefore(g, s);\n }(document, \"script\"));\n<\/script>" } },

La section html retourne: "html": [ "Array", "Array" ]

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.