Live Coding : Gérer les cookies avec Tarteaucitron.js

Temps de lecture : 10 minutes environ.

Suite à la mise en place du RGPD, il est maintenant nécessaire de mettre en place une gestion spécifique pour les cookies stockés par nos sites web.

Nous avons maintenant l'obligation d'obtenir un consentement explicite des utilisateurs avant d'écrire des cookies sur le disque.

Les bandeaux mentionnant "En continuant votre navigation sur ce site vous acceptez l'utilisation de cookies" ne sont plus suffisants.

Le service tarteaucitron.io propose un script javascript permettant de gérer les cookies de façon automatique et conforme aux recommandations du RGPD.

Installation

Les fichiers de tarteaucitron.js sont disponibles dans leur dépôt GIT.

Nous allons télécharger le code source et le décompresser dans un dossier dédié de notre projet comme dans l'image ci-dessous.

Nous intégrerons ensuite le fichier tarteaucitron.js et le code d'initialisation au début de la balise head.

<!DOCTYPE html>

<html lang="fr">

<head>



    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Cookies</title>



    <script src="tarteaucitron/tarteaucitron.js"></script>

    <script>

        tarteaucitron.init({

            "privacyUrl": "", /* URL de la page de la politique de vie privée */



            "hashtag": "#tarteaucitron", /* Ouvrir le panneau contenant ce hashtag */

            "cookieName": "tarteaucitron", /* Nom du Cookie */



            "orientation": "middle", /* Position de la bannière (top - bottom) */

            "showAlertSmall": true, /* Voir la bannière réduite en bas à droite */

            "cookieslist": true, /* Voir la liste des cookies */



            "adblocker": false, /* Voir une alerte si un bloqueur de publicités est détecté */

            "AcceptAllCta": true, /* Voir le bouton accepter tout (quand highPrivacy est à true) */

            "highPrivacy": true, /* Désactiver le consentement automatique */

            "handleBrowserDNTRequest": false, /* Si la protection du suivi du navigateur est activée, tout interdire */



            "removeCredit": false, /* Retirer le lien vers tarteaucitron.js */

            "moreInfoLink": true, /* Afficher le lien "voir plus d'infos" */

            "useExternalCss": false, /* Si false, tarteaucitron.css sera chargé */



            //"cookieDomain": ".my-multisite-domaine.fr", /* Cookie multisite */



            "readmoreLink": "/cookiespolicy" /* Lien vers la page "Lire plus" */

        });

	</script>

</head>



<body>



</body>

</html>

Mise en place des services

Une fois le script initialisé, il faut remplacer les différents codes des services déposant des cookies par le code proposé par l'assistant d'installation.

Quelques exemples ci-dessous.

Google Analytics

Le code de suivi Google Analytics actuel est le suivant

<!-- Global site tag (gtag.js) - Google Analytics -->

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXX-X"></script>

<script>

    window.dataLayer = window.dataLayer || [];

    function gtag() { dataLayer.push(arguments); }

    gtag('js', new Date());

    gtag('config', 'UA-XXXXXXXX-X');

</script>

Nous allons le remplacer par le code suivant

tarteaucitron.user.gtagUa = 'UA-XXXXXXXX-X';

tarteaucitron.user.gtagMore = function () { /* add here your optionnal gtag() */ };

(tarteaucitron.job = tarteaucitron.job || []).push('gtag');

Vidéo Youtube

Le code d'intégration d'une vidéo youtube est le suivant

<iframe width="560" height="315" src="https://www.youtube.com/embed/Gjrrgv4-S9k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Nous le remplacerons par le code suivant

Dans le javascript

(tarteaucitron.job = tarteaucitron.job || []).push('youtube');

Dans le HTML, à la place de l'iframe

<div class="youtube_player" videoID="Gjrrgv4-S9k" width="560" height="315" theme="light" rel="0" controls="1" showinfo="1" autoplay="0"></div>

Ce sera le même principe pour chacun des services.

Obtenir de l'aide

Pour obtenir de l'aide, vous pouvez accéder au serveur Discord pour une entraide par chat

Visualisez les fichiers de cet article sur GitHub

Live Coding : Gérer les cookies avec Tarteaucitron.js
Article publié le - Modifié le

Catégories : Javascript Tutoriel Live-Coding

Mots-clés : Tutoriel Javascript RGPD Youtube Live-Coding html html5 cookies

Partager : Partager sur Facebook Partager sur Twitter Partager sur LinkedIn