Comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow
outils :
Introduction
Dans ce tutoriel, Sandro cofondateur de l'agence Webflow Gemeos vous montre comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow
Contrôler l'affichage et la fermeture d'une bannière publicitaire en utilisant le stockage local du navigateur permet d'améliorer l'expérience utilisateur. Cette technique permet d'éviter de réafficher la bannière à chaque visite, améliorant ainsi l'expérience de l'utilisateur en réduisant les interruptions et les distractions.
Voici comment faire :
1. Ajoutez l'ID "banner" à votre bannière
2. Ajoutez la classe "close-btn" à votre élément permettant de fermer votre bannière
3. Cachez votre bannière par défaut
Votre bannière doit être en position Display : None par défaut
Cela permet d'éviter un comportement étrange qui affiche la bannière par défaut et la cache ensuite une fois la page chargée
4. Ajoutez ce code dans le <body> de votre page
<script>
// Vérifier si la bannière doit être fermée lors du chargement de la page
document.addEventListener('DOMContentLoaded', function() {
if (localStorage.getItem('bannerClosed') !== 'true') {
document.getElementById('banner').style.display = 'flex';
}
});
// Ajouter un gestionnaire d'événements pour fermer la bannière
document.querySelector('.close-btn').addEventListener('click', function() {
document.getElementById('banner').style.display = 'none';
localStorage.setItem('bannerClosed', 'true');
});
</script>
Growth Marketer, expert Webflow et touche à tout. Je m'occupe des opérations commerciale, veille au bon déroulement des projets et m’occupe des problématiques liées au marketing (SEO, Tracking, Copywriting, etc)
développés avec les meilleurs outils et les meilleures pratiques
Gemeos ne vous propose pas simplement un site web, mais une expertise sur les meilleurs outils pour vous garantir un retour sur investissement optimal.
