CRO / Conversion

5 min

Comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow ?

Introduction

Élément	ID / Classe	Rôle
Bannière	id='banner'	Élément à afficher/cacher
Bouton fermeture	class='close-btn'	Déclenche la fermeture et le stockage
localStorage key	bannerClosed	Stocke l'état de fermeture

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

bon à savoir

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

‍

bon à savoir

Le localStorage persiste indéfiniment. Pour des bannières temporaires (ex: valable 7 jours), stockez une date d'expiration plutôt qu'un booléen : localStorage.setItem('bannerClosed', Date.now()), puis vérifiez si la date est inférieure à 7 jours.

5. Plus qu'à tester

‍

Comment contrôler l'affichage et la fermeture d'une bannière en utilisant le stockage local du navigateur dans Webflow ?

Introduction

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

4. Ajoutez ce code dans le <body> de votre page

5. Plus qu'à tester

Heading

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum

tutoriels similaires