L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Un guide simple / blogs / perficient
Dans cet article, nous apprendrons à stocker des cookies à l’aide d’une fonction de consentement des cookies, en utilisant HTML, CSS et JavaScript.
Les cookies sont de petites données stockées sur l’appareil d’un utilisateur lors de sa visite sur un site Web. Ils sont utilisés pour stocker des informations, ce qui aide à charger les données plus rapidement et à améliorer l’expérience utilisateur globale. Les cookies jouent également un rôle dans la gestion des séances des utilisateurs, permettant aux utilisateurs de rester connectés à mesure qu’ils naviguent à travers différentes pages sur le même site.
Pour vérifier où les cookies sont stockés, suivez ces étapes:
- Cliquez avec le bouton droit sur la page et sélectionnez l’option «Inspecter» dans le menu.
- Accédez à l’onglet «Application».
- Dans la section «Stockage», cliquez sur «Cookies».
- Ouvrez la section «cookies» pour afficher tous les cookies stockés par le site.
Aperçu:
Vous pouvez également gérer les cookies ici, tels que l’édition, les supprimer ou les stocker.
Il s’agit d’une simple implémentation d’un pop-up modal qui informe les utilisateurs des cookies et des pistes s’ils l’ont rejeté. Il utilise HTML, CSS et JavaScript. Le modal s’affiche lorsqu’un bouton est cliqué, et une fois que l’utilisateur le rejette, un cookie est défini pour se souvenir de son action, empêchant le modal de se montrer à nouveau lors des visites suivantes.
Étape 1: index.html (structure de la page)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://blogs.perficient.com/2025/01/31/implementing-a-cookie-banner-with-javascript-a-simple-guide/./index.css" rel="stylesheet">
<title>Cookies Modal Pop Up</title>
</head>
<body>
<h2>Cookies Modal Pop Up</h2>
<button class="myBtn">Click Open To Modal</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>This websites uses cookies to ensure you get the best experience on the websites.</p>
<a href="https://www.office.com/?auth=2" class="modal-content-link">Learn More</a>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Ce code fournit la structure de la fenêtre contextuelle modale. Il contient un bouton (cliquez sur ouvrir à Modal) qui ouvre le modal, qui informe l’utilisateur des cookies. Le modal comprend un bouton de fermeture (×) pour le fermer.
Étape 2: index.js (logique javascript)
let modal = document.querySelector(".modal");
let clear = document.querySelector(".close");
let btn = document.querySelector(".myBtn");
function checkCookie() {
var cookies = document.cookie.split(";");
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
if (cookie.indexOf("dismissed=") === 0) {
return true;
}
}
}
function setCookie() {
document.cookie = "dismissed=true;";
}
btn.addEventListener('click', function () {
if (!checkCookie()) {
modal.style.display = "block";
}
});
clear.addEventListener('click', function () {
modal.style.display = "none";
setCookie();
});
Vous trouverez ci-dessous l’explication du code index.js fourni ci-dessus:
Sélecteurs:
- modal: Sélectionne l’élément modal qui affiche l’avertissement de cookie.
- clair: Sélectionne le bouton Fermer qui cache le modal.
- btn: Sélectionne le bouton qui active le modal à ouvrir.
Fonctions:
- Vérifiez Cookie (): Cette fonction vérifie si l’utilisateur a déjà rejeté le modal en recherchant un cookie nommé rejeté. Si ce cookie est trouvé, il renvoie vrai, ce qui signifie que le modal ne s’affiche pas à nouveau.
- setcookie (): Cette fonction définit un cookie nommé rejeté avec une valeur de vrai lorsque l’utilisateur ferme le modal. Cela garantit que le modal n’apparaîtra plus lors de la prochaine visite de l’utilisateur.
Auditeurs d’événements:
- addEventListener (‘click’,…): Lorsque le bouton est cliqué, il vérifie si le cookie rejeté existe. Sinon, le modal sera affiché.
- addEventListener (‘click’,…): Lorsque l’utilisateur clique sur le bouton Fermer (& Times;), le modal est caché et le cookie rejeté est défini, garantissant que le modal ne se montre pas à nouveau lors des futures visites.
Étape 3: index.css (Styliser la page avec CSS)
Dans le index.css Fichier, vous pouvez personnaliser les styles d’éléments en fonction de vos préférences.
Sortir:
Lorsqu’un utilisateur visite le site pour la première fois et clique sur le ‘Open Modal’ bouton, la sortie suivante sera affichée:
Comme vous pouvez le voir ci-dessus, le modal est apparu. Maintenant, fermez le modal et la sortie ci-dessous sera affichée:
Après avoir fermé le modal, un cookie est stocké pour se souvenir de vos préférences.
Conclusion:
Ce code fournit une solution simple pour afficher un avis de cookie à l’aide d’une fenêtre contextuelle modale. Un modal est une petite fenêtre qui apparaît au-dessus du contenu de la page Web, généralement pour les notifications ou les alertes. Dans ce cas, il informe les utilisateurs de l’utilisation des cookies par le site Web. En définissant un cookie licencié = True Cookie Lorsque l’utilisateur ferme le modal, le site Web se souvient de la préférence de l’utilisateur, empêchant le modal d’apparaître lors de visites ultérieures. Cette méthode aide à se conformer aux réglementations sur le consentement des cookies tout en améliorant l’expérience utilisateur en ne montrant pas l’avis à plusieurs reprises une fois rejeté.
Source link