Installation de tarteaucitron.js - gestion des cookies -

Bonjour,
Un petit retour d'expérience sur l'installation de tarteaucitron.js sur un blog avec Googleanalytics.
Ilvous faut télécharger le répertoire sur https://github.com/AmauriC/tarteaucitron.js/releases
Et déposer le répertoire à la racine de votre thème.
Dans ce répertoire à la racine vous pourrez supprimer tous les fichiers .js, (voir capture d'écran en pièce-jointe) car on récupère le fichier tarteaucitron.js sur un dépôt CDN (pour être sur d'avoir la dernière version) et le reste est inclus dans le header.php comme ci-dessous :

Dans le fichier header.php il faut ajouter les lignes suivantes à la fin du fichier (avant )

tarteaucitron.init({ "privacyUrl": "https://blog-sensibilisation/confidentialite.htm", /* Privacy policy url */ "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */ "cookieName": "tartaucitron", /* Cookie name */ "orientation": "bottom", /* Banner position (top - bottom) */ "showAlertSmall": false, /* Show the small banner on bottom right */ "cookieslist": true, /* Show the cookie list */ "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */ "highPrivacy": true, /* Disable auto consent */ "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */ "removeCredit": true, /* Remove credit link */ "moreInfoLink": true, /* Show more info link */ "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */ "readmoreLink": "/cookiespolicy" /* Change the default readmore link */ });
    <script type="text/javascript">
    tarteaucitron.user.gajsUa = 'UA-XXXXXXXX-X';
    tarteaucitron.user.gajsMore = function () { /* add here your optionnal _ga.push() */ };
    (tarteaucitron.job = tarteaucitron.job || []).push('gajs');
    </script>

tarteaucitron.user.gajsUa = est le code attribué par google analytics

Pour l'instant, je suis encore en cours de développement, tout n'est pas en ligne.
Pour récupérer les codes des différents services, il suffit de le renseigner sur cette page : https://tarteaucitron.io/fr/install/

Pour la ligne "showAlertSmall": false, j'ai mis à false, sinon vous avez un petit rectangle qui apparait en bas à droite de l'écran indiquant le nombre de services actif.
Ce n'est pas parfait, il faudrait améliorer le css pour l'affichage de la fenêtre de consentement, car le bouton fermer n'est pas très lisible.
Cordialement

Réponses

  • tarteaucitron.init({ "privacyUrl": "http://blog-sensibilisation/confidentialite.htm", /* Privacy policy url */ "hashtag": "#tarteaucitron", /* Open the panel with this hashtag */ "cookieName": "tartaucitron", /* Cookie name */ "orientation": "bottom", /* Banner position (top - bottom) */ "showAlertSmall": false, /* Show the small banner on bottom right */ "cookieslist": true, /* Show the cookie list */ "AcceptAllCta" : true, /* Show the accept all button when highPrivacy on */ "highPrivacy": true, /* Disable auto consent */ "handleBrowserDNTRequest": false, /* If Do Not Track == 1, disallow all */ "removeCredit": true, /* Remove credit link */ "moreInfoLink": true, /* Show more info link */ "useExternalCss": false, /* If false, the tarteaucitron.css file will be loaded */ "readmoreLink": "/cookiespolicy" /* Change the default readmore link */ });
  • Bon pas facile de faire du copier/coller dans le forum, je l'ai donc copié dans Notepad .. et mis en pièce-jointe

  • En regardant le code de plus prêt, il ne sert de télécharger le dossier. Le dépôt CDN contient tout et il fait appel en css externe.
    Et le tarteaucitron.js téléchargé est en erreur, mais pas expert en javascript pout le déboguer.
    Désolé pour ce post un peu confu.

  • Le site est en ligne, tout fonctionne correctement.
    Pour résumé, vous téléchargez le dossier (https://github.com/AmauriC/tarteaucitron.js/releases) et vous ne conservez que le fichier tarteaucitron.css que vous placez dans le dossier CSS de votre thème.
    Dans le fichier header.php
    1. vous modifiez la ligne comme suit : "useExternalCss": true
    2. vous ajoutez tarteaucitron.css
    Ainsi ce sera css en local qui sera pris en compte pour l'affichage.
    Je vous met en pièce-jointe le fichier header.php
    Mon site avec tarteaucitron.js : https://blog.sensibilisation-numerique.fr/

  • décembre 2021 modifié

    Bonjour/bonsoir,

    En effet, c'est un peu confus ;) .

    Ne connaissant pas tarteaucitron.js mais étant cuisinier de métier, je me suis dit , tiens, Il y en a un qui à trouver le moyen de faire du télé-travail et d'envoyer ses tarte par mail !!!!

    Yes, c'est ce qu'il me faut !

    Il faut que je trouve la version bourguignon.js aussi ainsi que tomateFeta.js , peut-être même qu'il y a tout les recettes classiques dans une library dédiée.

    Blague à part, manque une petite intro au tout début pour savoir de quoi il s'agit.

    Pour les pâtés de code dans le forum, tu as les backticks : ``` seulement 3 a mettre en début et fin de ton code ... en te méfiant de l'indentation de ton code, des caractères que tu utilises dans le code et le bouton "aperçu" pour vérifier que ça passe avant de valider ton post.

    Tu peut aussi te servir de la balise <details>

    <details>
    ```
    // le code ici
                           // que tu
                                                   // veut partager
    ```
    </details> pour réduire la longueur du post initial .

    En gros ça donne :


    // le code ici // que tu // veut partager

    Enfin, si le forum veut bien prendre cette tentative de mise en forme de code ....

    ♣♣♣♣ <°(((((-{ ~ Mon site avec PluXml: https://re7net.com | Mes plugins : https://github.com/gcyrillus PluXml 5.8.7 sur free ? oui c'est possible : http://gcyrillus.free.fr/new }-))))°> ♣♣♣♣

  • Bonjour,
    @gcyrillus-nomade
    Merci pour tes conseils sur la rédaction de mes futurs billets.
    J'ai tester mon site avec jigsaw.w3.org/css-validator/ et j'ai une question concernant les css de pluxml :
    Pourquoi utiliser les - webkit , -moz, -ms et -o qui ne sont pas des fonctionnalités standards : https://developer.mozilla.org/en-US/docs/Web/CSS/::-moz-focus-inner.
    P.S.: j'ai regardé tes recettes concernant le DevWeb çà donne envie, mais je ne dois pas avoir tous les ingrédients : connaissance approfondie du css et des pseudo-class. (fait aperçu avant :) )

  • décembre 2021 modifié

    Salut,
    alors:

    Pourquoi utiliser les - webkit , -moz, -ms et -o qui ne sont pas des fonctionnalités standards ?

    Justement, parce qu’elles ne sont pas encore des standards dans certains navigateurs. Les fonctionnalités CSS sont en perpétuelles évolution, tantôt en mode brouillons, tantôt validées sur un niveau mais en cours de retouchage sur le prochain niveau ou jamais finalisées (display:run-in;par exemple) ou mises aux oubliettes (idem pour les balises et attributs qui deviennent obsolètes) . Pendant ce temps, les navigateurs font de leur coté leurs premières implémentations de ces règles (en mode test planétaire!) et corrigent au cours du temps les bugs et éventuelles nouvelles spécifications jusqu'au jour ou le préfixe n'est plus nécessaire (.. pour les dernières versions des navigateurs uniquement) . Ils servent donc à tester et rendre disponible au plus tôt les dernières fonctionnalités dispos ou encore en évolution.
    Les navigateurs proposent aussi de nouvelle fonctionnalités sans attendre et elles sont parfois reprisent dans les standards . ( `writing-mode' nous vient de IE5 par exemple , des années se sont écoulées avant qu'il ne revienne et devienne un standard, ...)

    Les règles préfixées n'invalident pas forcément ta feuilles de styles (tu peut les laisser) , mais comme elles sont hors standards, elles ne peuvent pas être validées non plus.

    voilou :)

    ♣♣♣♣ <°(((((-{ ~ Mon site avec PluXml: https://re7net.com | Mes plugins : https://github.com/gcyrillus PluXml 5.8.7 sur free ? oui c'est possible : http://gcyrillus.free.fr/new }-))))°> ♣♣♣♣

Connectez-vous ou Inscrivez-vous pour répondre.