Gérer les cookies avec Tarteaucitron.js

17 avril 2020 - : Javascript Tutoriel Live-Coding - : 2 commentaires - Tutoriel Javascript RGPD Youtube Live-Coding html html5

Visualisez les fichiers de cette série sur GitHub

Dernière modification le 18 avril 2020

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

Visualisez les fichiers de cette série sur GitHub

Partager

Partager sur Facebook Partager sur Twitter Partager sur LinkedIn

Commentaires

Ecrire un commentaire

Sarah a écrit le 17 juillet 2020 à 10:20

Bonjour,

La vidéo est concise et efficace.Cependant lors de la mise en application, j'obtiens un bug quant à la vidéo youtube.En effet, suite à suppression de l'iframe que je remplace par le code associé dans tarte au citron avec l'ID de ma vidéo, je charge la page contenant la vidéo.Je refuse les cookies.J'ai bien un bouton autorisé sur la vidéo.Lorsque j'autorise via clic depuis la vidéo, elle ne s'affiche plus autrement dit je me retrouve avec un espace vide.

Je vous remercie pour votre aide,

 

Sarah

Répondre

Nouvelle-Techno.fr a répondu le 19 juillet 2020 à 18:01

Bonjour et merci.

Pour l'aide technique, ce serait plus pratique sur Discord.

Répondre

Ecrire un commentaire