modal-souscription.jpg

Vous cherchez à fidéliser vos nouveaux visiteurs lorsqu'ils arrivent en bas de page de votre site lors de leur première visite ? Voici en quelques lignes de code comment fabriquer un Pop-In intelligent qui vous permettra de transformer vos nouveaux visiteurs en lecteurs et évitera de les perdre définitivement.

La première étape consiste à construire le Pop-In grâce aux "modal box" proposées par la librairie Bootstrap. Placez le code source suivant de préférence en bas de vos pages Web et complétez le contenu du corps de la Pop-In avec les liens vers votre flux RSS et vos réseaux sociaux.

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="subscribeModal" id="subscribeModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h3 class="modal-title text-center">Rejoignez ma communauté</h3>
      </div>
      <div class="modal-body">

	 <div class="row">

	    <!-- Placez ici les liens vers votre flux RSS ou vos pages sociales -->

        </div>

      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

La seconde étape consiste à déclencher l'affichage de la Pop-In lorsque les nouveaux visiteurs arriveront pour la première fois en bas d'une des pages Web de votre site Internet. Pour cela, nous allons détecter les actions de scroll sur le navigateur pour identifier le moment où la personne est arrivée en bas d'une page Web.

$(window).on("scroll", function() {

	var scrollHeight = $(document).height();
	var scrollPosition = $(window).height() + $(window).scrollTop();

        // Si nous sommes en bas de la page Web
	if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
	
           // Si le visiteur n'a pas encore de cookie
	   if ($.cookie('modal_shown') == null){

               // On positionne un cookie valable 365 jours
	       $.cookie('modal_shown', 'yes', { expires: 365, path: '/' });

               // On affiche la Pop-In
               $('#subscribeModal').modal({
                        show: true
               });
	   }
	}
    });

Nous positionnons un cookie d'une durée de 1 an qui permettra aux visiteurs réguliers de ne pas être pollués par le Pop-In. Pour pouvoir faire fonctionner la fonction $.cookie, vous devrez préalablement avoir chargé le module JQuery Cookie dans votre page.

Vous voilà un expert des Pop-In sociales, à vous de jouer !

1. Le , 09:45 par ZeGuigui
dbdfe79c104b594fcde2bfd1379e6add

Il faut aussi penser à renouveler le cookie au chargement de la page sinon toutes les 3 semaines les visiteurs réguliers se tapent le pop-in :-)

2. Le , 12:27 par Cath
57f2689827a3a0589b3d1ca6c12cdd2f

Fidéliser ? Honnêtement, en ce qui me concerne, ce genre de procédé me fait fuir ! Ça ressemble presque à une agression. Pire, ça donne une image de mendiant : "hey ! t'as pas un like à m'donner ?"
Si on veut fidéliser, il faut avoir du contenu pertinent et intéressant.
Si on veut inciter les visiteurs à devenir fidèle et à nous suivre, il faut mettre les éléments de suivi (tels les réseaux sociaux) en évidence. Par exemple, une petite barre sur le côté qui suit le scroll lors de la navigation et qui est donc toujours à porté de clic du visiteur.
Mais surtout, ne pas mettre des pop-in pour inciter à suivre ! Ce n'est pas ergonomique, ça casse la navigation, et c'est pénible.

3. Le , 23:24 par Ludovic
9ab09dd3e305f924f8930e20e1a35843

@ZeGuigui : Effectivement, j'ai utilisé une durée d'un an.

@Cath : Oui, je conçois que ce soit énervant quand la popin arrive en pleine lecture de page et que l'on se sente agressé, moi-même cela m'énerve. Cependant je ne trouve pas agressant le fait d'ouvrir une popin une fois que l'article a été complément lu ainsi que les commentaires. Cela signifie que le contenu a eu un intérêt et que proposer à la personne de souscrire au flux RSS du site peut avoir du sens par rapport à sa visite. Pour les personnes qui n'ont pas trouvé le contenu intéressant, ils n'arrivent généralement pas jusqu'en bas de la page sauf pour laisser un commentaire pour dire que l'article n'est pas intéressant ;-)
Sur la durée du cookie, il faut effectivement positionner une durée suffisamment longue pour éviter de polluer des visiteurs réguliers. L'idée de la barre social qui scroll est une bonne idée, on retrouve ce type de barre sur quelques sites.

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.