Vous vous demandez comment il faut faire pour que vos visiteurs arrêtent d’aller voir la concurrence pour trouver le meilleur deal ? Il suffit de leur mettre un bon coup de pression pour qu’ils cèdent et achètent chez vous.
Souvent les popup on n’aime pas ça, sauf que…
Hum, je suis sûr que vous êtes comme moi, combien de fois les popup m’ont agacé sur des sites ? Des centaines de fois… oui forcément à peine 2 secondes que je suis sur le site et on me harcèle… « Inscrivez-vous » ici… « Regardez ça » etc… Le popup a finalement mauvaise réputation ! Mais pourquoi ? Et bien tout simplement parce qu’elles sont mal utilisées et de manière « redondantes »… Souvent on dirait que les sites ont une IA à 0% d’intelligence avec la gestion des popup.
L’Exit Popup c’est quoi ce truc ?
Contrairement à la popup standard qui s’affiche un peu n’importe quand vous naviguez sur un site, l’Exit Popup va s’afficher uniquement lorsque l’internaute va partir de votre site e-commerce. En fait quand le curseur sort de la fenêtre principale, à ce moment-là le popup surgit… Ce qui est intéressant c’est qu’on sait que l’utilisateur va partir ailleurs voir autre chose (la concurrence peut-être) et il faut donc lui montrer un message percutant pour qu’il reste encore.
L’emplacement stratégique pour faire ça ?
Ahaha trop souvent je vois ceci, afficher l’Exit Popup sur toutes les pages du site… Cela veut dire que si vous regardez un produit et que vous partez « HOP » on fait afficher le message (qui bien souvent est un code PROMO). C’est à mon sens une mauvaise stratégie, car l’utilisateur comprend rapidement que l’on fait ça sur toutes les pages (il ne ressentira la sensation de bonne affaire).
En revanche, il est bien plus pertinent d’afficher l’Exit Popup avec le code PROMO uniquement sur la page panier & processus de commande, car le client se concentre principalement sur le montant du panier, combien ça va lui coûter et se demande « Est-ce que je vais acheter ici ? » ce qui n’est pas le cas encore durant les phases précédentes.
Le bon moyen pour leur mettre une pression indirecte
Si je vous donne un bon de réduction, vous êtes content… mais vous allez peut-être encore réfléchir avant d’acheter. Une méthode simple consiste à simplement dire par exemple « le code est valable 30 minutes », ce qui stimule considérablement l’urgence et la prise de décision.
Vous allez me dire mais sur Prestashop on ne peut pas faire ça ? C’est vrai, mais est-ce si important ? En réalité le code sera valable pour une durée indéterminée, mais qui va vous reprocher cela ? Au contraire vous pourrez même vous en justifier si on vous fait la remarque en privé et répondre : « En ce moment on fait un geste, parce qu’on aime vraiment nos clients, mais CHUUUT ne le dites à personne »…
Aujourd’hui vous gagnez 53€ en lisant ce billet
Cette idée m’est venue en regardant la dernière newsletter de Prestahop, le module officiel Exit Popup est vendu 53€, et j’ai juste regardé dans Google s’il existant un truc pas trop compliqué en Javascript pour s’en rapprocher… et Ohhhh j’ai trouvé un code magique sur Codepen (ces contributeurs sont incroyables).
En plus de ça, ce qui est intéressant dans la méthode d’intégration que je vous montre, c’est la réflexion à avoir… Vous savez je vois souvent des modules très bien faits techniquement, mais qui n’ont pas toujours les bonnes options d’affichage comportemental (c’est paradoxal).
Bien sûr ici on ne fera pas une approche aussi aboutie que le module officiel Exit Popup (qui lui est bien plus étoffé), mais je pense que ce qu’on va créer ensemble donnera satisfaction à la plupart des e-commerçants.
Pour ce tutoriel Prestashop vous avez à disposition :
- 1 x fichier exit-popup.tpl (avec le message promotionnel)
- 2 x fichiers footer.tpl (pour intégrer l’Exit Popup)
- 1 x fichier custom.css (histoire de designer tout ça)
Résumé de la vidéo : L’Exit Popup peut booster le taux de conversion sur Prestashop
- Règle n°1 : se servir du travail des autres… et oui un site comme Codepen, propose vraiment des ressources intéressantes cela vaut la peine de s’y intéresser & de farfouiller les codes.
- Il faut bien réfléchir à l’emplacement stratégique où vous voulez faire afficher le popup, je propose de le faire dans le panier & le processus de checkout (là où le client est chaud).
- En ce qui concerne l’intégration, on va créer un fichier « exit-popup.tpl » dédié, qui embarquera le HTML et le JS et ensuite on va injecter ce fichier à la fin des 2 footers de Prestashop.
- Pour ce qui est du rendu visuel les règles sont à déposer dans le fichier « custom.css » comme habituellement… et si vous désirez changer l’arrière-plan vous pouvez utiliser le générateur CSS Gradien
- Concernant le message que vous affichez au client, essayez de trouver une phrase courte, mais impactante.
Bonjour,
C’est une super idée que d’introduire une exit pop-up !
Cette implémentation fonctionne-t-elle aussi sur un presta 1.6 ?
Cordialement
Bonjour,
Le même concept est certainement applicable, mais sous un Prestashop 1.6 il faudrait mettre le code dans le « footer.tpl » du thème. Certaines variables aussi sont à changer… par ex. {$page.page_name} deviendrait {$page_name}.
A bientôt !
Hello
Merci pour ce petit tuto, par contre, je ne pige pas pourquoi, moi j’ai un petit bug au « mouse out » lorsque je reviens avec la souris sur la page, cela fige le contenu, je ne peux plus scroll mais je n’ai aucune erreur JS dans la console et la popup ne s’affiche pas.. 🙁
Cache bien supprimé, code bien présent dans la page.
Bonjour, j’ai eu le problème est j’avais des {} de trop dans une partie du code… Si ça peut vous mettre sur la voie …
Bon en même temps c’était il y a 2 ans =D
Bonjour Germain,
ça marche tres bien sur le PC, merci.
Par hasard tu n’aurais pas une solution comme ça pour le mobile?
Bjr
J’ai regardé une bonne partie des tutos
Tous très pertinents.
Bravo !!
Bonjour Germain,
Petit bug au niveau smartphone
Voir capture d’écran https://postimg.cc/CRRw1dwf
Une idée ?