Popups d'intention de sortie sur Shopify : Comment en créer une qui convertit

Points clés

• Une popup d’intention de sortie Shopify se déclenche au moment où un acheteur semble sur le point de partir, vous donnant une dernière chance de capturer un e-mail ou d’offrir une réduction.
• Sur ordinateur, elle se déclenche lorsque le curseur se dirige rapidement vers la barre du navigateur. Sur mobile, il n’y a pas de sortie de souris, on se rabat donc sur le bouton retour, un défilement rapide vers le haut, ou un délai d’inactivité.
• L’implémentation est légère : un détecteur de mouseout, une modale, et un contrôle de la fréquence (frequency capping) dans le localStorage pour qu’elle ne s’affiche qu’une fois et disparaisse après avoir été fermée.
• Les directives de Google sur les interstitiels intrusifs ciblent principalement les popups qui bloquent le contenu dès l’arrivée depuis une recherche sur mobile. Une popup de sortie qui se déclenche quand l’utilisateur part présente généralement un risque plus faible, mais les règles de design restent importantes.
• Fudge crée la popup sous forme de code de thème natif avec les bons déclencheurs et limitations, ce qui vous évite d’utiliser une application tierce lourde.

Une popup d’intention de sortie Shopify (ou exit intent popup) est une fenêtre qui apparaît lorsqu’un visiteur signale qu’il est sur le point d’abandonner la page. C’est l’un des rares moyens de s’adresser à un acheteur au moment précis où il s’en va, avant que l’onglet ne se ferme et que la session ne soit perdue pour de bon.

Ce guide explique ce qu’est l’intention de sortie, son utilité en CRO, comment la créer de façon native sur ordinateur et mobile, et les règles de pénalité de Google à respecter pour que la popup aide aux conversions sans nuire à votre référencement.

Pourquoi vous pouvez nous faire confiance

Nous travaillons dans l’écosystème Shopify depuis plus de quatre ans et avons aidé des centaines de marques à optimiser leurs boutiques. Nous développons Fudge, l’opérateur IA pour les boutiques Shopify, qui a une note de 4.9 sur le Shopify App Store. Nous travaillons donc sur la même couche de thème qu’une popup et voyons exactement ce qui casse quand elle est mal codée.

Qu’est-ce qu’une popup d’intention de sortie ?

Un pop-up d’intention de sortie est une modale qui reste dormante jusqu’à ce que le visiteur montre son intention de partir, puis s’affiche une fois. C’est un déclencheur basé sur le comportement, pas un minuteur qui s’active dès la première seconde.

Sur ordinateur, “l’intention de partir” est lue depuis la souris. Quand le curseur se déplace vers le haut et sort de la zone d’affichage en direction de la barre d’adresse, du bouton retour ou d’un autre onglet, le navigateur déclenche un événement mouseout ou mouseleave avec le pointeur au-dessus de la page. Cette sortie par le haut est le signal classique de l’intention de sortie.¹

Le contenu est généralement une seule offre ciblée : un code promo pour une première commande, une inscription à la newsletter ou un rappel des articles qui attendent encore dans le panier.

L’intérêt pour le CRO

Tout est dans le timing. Une popup classique interrompt un acheteur en pleine navigation. Une popup de sortie n’interrompt presque jamais personne, car elle apparaît quand le visiteur est déjà sur le départ.

Cela en fait une solution de rattrapage à faible coût. Un visiteur qui allait partir les mains vides laisse finalement une adresse e-mail, ou reconsidère son choix grâce à une réduction. Vous ne volez pas l’attention d’un acheteur engagé, vous le rattrapez sur le pas de la porte.

L’intention de sortie n’est qu’une tactique au sein d’une stratégie de conversion plus large. Pour avoir une vue d’ensemble, consultez notre guide CRO Shopify. Pour l’aspect capture d’e-mails en particulier, voir Comment ajouter une popup e-mail sur Shopify.

Comment créer une popup d’intention de sortie sur Shopify

Vous n’avez pas besoin d’une application dédiée. Une implémentation native comporte trois parties : le détecteur de sortie, la modale, et la limite de fréquence qui l’empêche de devenir agaçant.

1. Détecter la sortie sur ordinateur

Sur desktop, le signal le plus fiable est le curseur quittant le bord supérieur du document. Écoutez l’événement mouseleave sur le document et vérifiez que le pointeur est au niveau ou au-dessus du haut du viewport.

document.addEventListener('mouseleave', (event) => {
    // clientY <= 0 signifie que le curseur est sorti par le bord supérieur
    if (event.clientY <= 0) {
        showExitPopup()
    }
})

Vérifier clientY <= 0 est important. Sans cela, vous déclencheriez le popup chaque fois que le curseur quitte la page dans n’importe quelle direction, y compris en descendant vers la barre des tâches, ce qui n’est pas un signal de sortie.

2. Gérer le problème du mobile

Le mobile n’a pas de curseur, il n’y a donc pas de véritable mouseout à détecter. Un script d’exit-intent pour desktop ne sert à rien sur un téléphone, et la majorité du trafic Shopify est mobile.

Pour être honnête, l’exit intent sur mobile est une approximation. À la place, vous choisissez un signal indirect (proxy) :

Aucun n’est aussi propre que le signal sur desktop. L’approche du bouton retour est la plus proche de la véritable intention, mais traitez-la avec précaution : ne piégez jamais complètement l’acheteur sur la page, et laissez l’action de retour du navigateur fonctionner.

3. Limiter la fréquence pour un affichage unique

Une popup de sortie qui réapparaît sur chaque page et à chaque session est un excellent moyen de faire fuir vos visiteurs. Enregistrez un marqueur (flag) pour qu’elle ne s’affiche qu’une fois et respecte la fermeture.

const SEEN_KEY = 'exit_popup_seen'

function showExitPopup() {
    // already shown or dismissed, do nothing
    if (localStorage.getItem(SEEN_KEY)) return

    openModal()
    localStorage.setItem(SEEN_KEY, '1')
}

Utilisez localStorage pour une limite qui persiste entre les visites, ou sessionStorage si vous voulez seulement la masquer pour la session en cours. Lorsque l’acheteur ferme la popup ou convertit, ce même marqueur l’empêche de revenir.

La règle est simple : respectez la fermeture. Si quelqu’un ferme la popup, il a donné sa réponse. Ne la lui reproposez pas au prochain chargement de page.

Les popups d’intention de sortie nuisent-elles au SEO ?

Google a publié des directives sur les interstitiels intrusifs qui peuvent rendre le contenu plus difficile d’accès. Cela s’applique principalement aux pages où le contenu est consulté depuis une recherche sur mobile, lorsqu’une popup bloque le contenu principal au chargement de la page ou juste après.²

Ce que ces directives considèrent comme un problème :

• Une popup qui recouvre le contenu principal dès que le visiteur arrive depuis un résultat de recherche.
• Un interstitiel indépendant que l’utilisateur doit fermer avant de pouvoir lire quoi que ce soit.
• Une mise en page où la zone au-dessus de la ligne de flottaison (above-the-fold) est majoritairement occupée par l’interstitiel plutôt que par le contenu.

Ce que Google décrit généralement comme étant à plus faible risque :

• Les interstitiels exigés par la loi, comme le consentement aux cookies ou la vérification de l’âge.
• Les boîtes de dialogue de connexion (login) sur un contenu qui n’est pas destiné à être indexé publiquement.
• Les bannières qui utilisent un espace raisonnable et qui sont faciles à fermer.

Une popup d’intention de sortie est plutôt du côté sûr, car elle se déclenche lorsque l’utilisateur part, et non lorsqu’il arrive depuis une recherche. Elle ne bloque pas le contenu à l’entrée, ce qui est le comportement visé par les directives.

Considérez cela comme des conseils de bonnes pratiques en design, pas comme une baisse de classement garantie. Il n’y a pas de pourcentage de pénalité officiel, et vous devriez vous méfier de tout guide qui en invente un. Configurez la popup pour qu’elle se déclenche à la sortie, faites en sorte qu’elle soit facile à fermer, et vous resterez parfaitement en accord avec l’intention des règles.

Règles de design et d’UX pour les popups de sortie

Une popup qui convertit et une popup qui agace ne sont séparées que par quelques détails.

• Ne la déclenchez jamais à l’entrée. Tout l’intérêt est qu’elle se déclenche sur une intention de sortie, et non sur un minuteur à la seconde où la page se charge.
• Rendez sa fermeture évidente. Un bouton de fermeture clair, un clic sur l’arrière-plan, et la touche Échap doivent tous permettre de la fermer. Un acheteur piégé est un acheteur perdu.
• Emprisonnez le focus (focus trap) uniquement lorsqu’elle est ouverte. Une modale doit retenir le focus clavier tant qu’elle est visible pour que l’ordre des tabulations reste à l’intérieur, puis rendre le focus à la page à la fermeture. C’est le seul endroit où un focus trap est approprié, et il doit être relâché dès que la popup se ferme.
• Ajoutez les bons attributs ARIA. Utilisez role="dialog" avec aria-modal="true" et un label pour que les lecteurs d’écran l’annoncent comme une boîte de dialogue.
• N’empilez pas les popups. Si une bannière de cookies, un widget de chat et une modale de newsletter s’affichent tous en même temps, vous créez un mur de superpositions. Auditez ce qui s’affiche déjà avant d’en ajouter une autre.

Respectez ces règles et la popup sera perçue comme une dernière offre utile plutôt que comme un obstacle. Pour une variante de ce modèle centrée sur les newsletters, consultez notre guide sur la popup de newsletter Shopify.

App vs natif : le compromis

Vous pouvez ajouter un pop-up de sortie avec une application en quelques clics, et pour une boutique sans compétences techniques, c’est un bon point de départ. Les compromis sont connus : un abonnement mensuel, du JavaScript supplémentaire sur chaque page, un pop-up qui risque de ne pas correspondre à votre thème, et une dépendance qui supprime le pop-up avec elle lors de la désinstallation.

Le code natif évite ces quatre problèmes. Le hic, c’est que quelqu’un doit coder correctement le détecteur, la modale, la limite de fréquence et les détails d’accessibilité. C’est ce vide que la section suivante vient combler.

La place de Fudge

Fudge est l’opérateur IA pour les boutiques Shopify, et il écrit du code de thème natif. Vous décrivez la popup à son popup builder en langage naturel : “ajoute une popup d’intention de sortie qui offre 10 % de réduction lorsqu’un visiteur sur ordinateur s’apprête à partir, avec un plan de secours sur le bouton retour sur mobile, et qui ne s’affiche qu’une fois par session”. Il rédige le Liquid, le CSS et le JavaScript directement dans votre thème en tant que brouillon que vous pouvez prévisualiser, crée le code de réduction dans Shopify et, si vous lui demandez de se connecter à Klaviyo, envoie les inscriptions à la liste de votre choix.

Puisque le résultat est natif, il n’y a aucun widget tiers qui s’affiche par-dessus votre boutique, aucun script d’application supplémentaire sur chaque page, et aucun frais mensuel pour la popup. Le contrôle de la fréquence (frequency capping) et les déclencheurs de sortie sont intégrés, elle ne s’affiche donc qu’une fois et respecte les fermetures.

Et comme il s’agit de code de thème, il survit à la désinstallation. Si vous annulez Fudge, la popup reste exactement là où elle est, à l’inverse d’un élément généré par une application qui disparaît lorsque vous supprimez celle-ci. Il en va de même pour tout ce que vous créez avec le Shopify store editor. Après le lancement, Fudge compare les inscriptions et les commandes avant et après la mise en ligne de la popup, et suggère des modifications sur l’offre, le timing ou les pages sur lesquelles la popup apparaît.

FAQ