L'art de solliciter vos visiteurs au bon moment en 3 hacks

De nombreux sites ouvrent une popup à l’arrivée des visiteurs, généralement pour proposer de s’inscrire à une newsletter, liker une page fan ou profiter d’une offre événementielle.

Même si cela augmente la conversion avec un taux de rebond parfois peu affecté, c’est souvent loin d’être la meilleure solution. Pourquoi solliciter l’utilisateur avant même qu’il ait pu apprécier ce qu’il est venu chercher sur votre site ?

En déclenchant les sollicitations au bon moment, vous pouvez améliorer considérablement l’engagement de vos visiteurs. Dans cet article, j’entends par sollicitation toute apparition sur la page après coup permettant d’attirer l’attention du visiteur dans un objectif précis.

Voici trois petits hacks en JavaScript qui vous y aideront. Les deuxième et troisième exemples présentés nécessitent jQuery.

1. Déclenchement après un temps donné

Un moyen très simple de laisser l’utilisateur trouver ce qu’il est venu chercher avant le pousser à l’action. Tout l’enjeu est ici de déterminer qu’elle est la durée idéale.

Notification Quaraloo

Ouverture de la boite de dialogue Qualaroo au bout de quelques secondes

Attention de ne pas prendre le temps moyen de visite de Google Analytics comme base. Comme son nom l’indique c’est seulement une moyenne, qui cache souvent de fortes disparités ; le plus gros des visiteurs quitte le site très vite et seuls quelques-uns restent longtemps. Partez donc sur un délais beaucoup plus court et affinez ensuite avec des tests A/B.

function demanderQuelqueChose() {
// Déclenchez votre action ici
}

setTimeout(demanderQuelqueChose, 15000);

2. Déclenchement au scroll

Il s’agit de déclencher la sollicitation lorsque l’utilisateur a scrollé la page jusqu’à un certain niveau.

Notification Topito

Notification sur Topito après un certain niveau de scroll

Cette solution prend tout son sens dans un site de contenu. Sous-entendu : “Tu as parcouru tout mon article, cela t’a plu ? Voilà ce qu’on te propose maintenant”.

$(window).scroll(function () {
if ($(window).height() + $(window).scrollTop() == $(document).height()) {
// Déclenchez votre action ici
}
});

Ici on déclenche l’évènement quand l’utilisateur a scrollé en bas de page. Si vous souhaitez le déclencher plus tôt, adaptez la condition, par exemple, 200px avant la fin de page :

if ($(window).height() + $(window).scrollTop() > $(document).height() - 200) { ... }

3. Déclenchement à la sortie du visiteur

Sans doute la technique la plus redoutable. “Imaginez que vous ayez le pouvoir de transformer vos visiteurs sortants en clients” promet Bounce Exchange, qui a développé une technologie permettant d’anticiper la sortie d’un visiteur.

Popup Kissmetrics

Popup Kissmetrics à la sortie de l’utilisateur

En fait cette technologie n’est pas si compliquée à reproduire. Lorsqu’un visiteur s’aprête à quitter le site, il va généralement aller fermer son onglet ou cliquer sur la flèche pécédent de son navigateur. Or il est tout à fait possible de connaître la position de la souris en JavaScript. Bingo !

L’astuce, c’est donc de détecter l’instant où la souris dépasse le haut de page pour déclencher l’évènement. Cela doit fortement attirer l’attention car on s’adresse à un visiteur sur le départ. Bounce Exchange privilégie ainsi des popups de grande taille avec des couleurs vives.

En revanche, il faudra généralement proposer un engagement moins fort que celui proposé dans la page. Après tout, si vous êtes sur le point de perdre votre visiteur, c’est qu’il y a une raison. Dans l’exemple ci-dessus, Kissmetrics propose habilement de télécharger un livre blanc pour retenir le visiteur.

Voici comment détecter la sortie de la souris :

$(document).mousemove(function(e) {
if(e.pageY <= 5)
{
// Déclenchez votre action ici
}
});

A vous de jouer !

Ces trois méthodes de déclenchement peuvent se combiner, être affinées, tout cela en fonction du comportement de vos utilisateur, l’architecture de vos pages et vos objectifs.

A vous de faire également une utilisation judicieuse de cookies pour ajouter une dimension historique aux actions et éviter par exemple de faire la même proposition plusieurs fois au même visiteur.

I share what I learn on Facebook