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>

5. Plus qu'à tester

Photo de l'auteur
Sandro D.
Mis à jour le
8/10/2024
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)
Vous êtes bridé avec votre site actuel ?
On en discute ?
Accueil
>
Gemeos Académie
>
Comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow
Ces tutoriels pourraient vous intéresser

Nos tutoriels de la même catégorie

Voir tous nos tutoriels
Illustration traits
Nous utilisons les meilleurs outils

développés avec les meilleurs outils et les meilleurs 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. 

Figma

Pour le design de votre site web

Webflow

Pour l’intégration de votre site web

Client-first

Pour organiser vos projets

Wized

Pour ajouter des fonctionnalité à vos projets

Make

Pour l’automatisation de vos flux de travail