Das Wichtigste in Kürze
- Ein Exit Intent Shopify Popup wird in dem Moment ausgelöst, in dem ein Käufer die Seite verlassen will, und gibt dir eine letzte Chance, eine E-Mail-Adresse zu erfassen oder einen Rabatt anzubieten.
- Auf dem Desktop wird es ausgelöst, wenn der Cursor schnell in Richtung Browser-Chrome wandert. Auf dem Handy gibt es keinen echten Maus-Exit, daher greifst du auf den Zurück-Button, ein schnelles Scrollen nach oben oder einen Timeout zurück.
- Der Aufbau ist klein: ein Mouseout-Detektor, ein Modal und Frequency Capping im localStorage, damit es nur einmal pro Sitzung ausgelöst wird und nach dem Schließen verschwunden bleibt.
- Googles Richtlinien für aufdringliche Interstitials zielen hauptsächlich auf Pop-ups ab, die Inhalte beim Einstieg über die mobile Suche blockieren. Ein Exit-Popup, das beim Verlassen der Seite ausgelöst wird, ist im Allgemeinen ein geringeres Risiko, aber die Designregeln sind trotzdem wichtig.
- Fudge erstellt das Popup als nativen Theme-Code mit den richtigen Triggern und Limits, sodass du eine schwerfällige Drittanbieter-App vermeidest.
Ein Exit Intent Shopify Popup ist ein Pop-up, das erscheint, wenn ein Besucher signalisiert, dass er die Seite verlassen möchte. Es ist eine der wenigen Möglichkeiten, einen Käufer genau in dem Moment anzusprechen, in dem er die Seite verlässt, bevor der Tab geschlossen ist und die Sitzung endgültig vorbei ist.
Dieser Leitfaden behandelt, was Exit Intent ist, den Nutzen für die CRO, wie man es nativ auf Desktop und Mobile baut und die Google-Richtlinien für Abstrafungen, die du beachten musst, damit das Popup den Conversions hilft, ohne dem Ranking zu schaden.
Warum du uns vertrauen kannst
Wir arbeiten seit über vier Jahren im Shopify-Bereich und haben Hunderten von Marken geholfen, ihre Storefronts zu optimieren. Wir entwickeln Fudge, einen KI-Storefront-Editor mit einer 4.9-Bewertung im Shopify App Store. Wir arbeiten also auf derselben Theme-Ebene, auf der auch ein Popup lebt, und sehen genau, was kaputt geht, wenn es schlecht gemacht ist.
Was ist ein Exit Intent Pop-up?
Ein Exit Intent Popup ist ein Modal, das inaktiv bleibt, bis der Besucher eine Absicht zeigt, die Seite zu verlassen. Es ist ein Verhaltens-Trigger, kein Timer, der sofort nach dem Landen auf der Seite abläuft.
Auf dem Desktop wird die “Absicht zu gehen” an der Maus abgelesen. Wenn der Cursor sich nach oben aus dem Viewport heraus in Richtung Adressleiste, Zurück-Button oder einem anderen Tab bewegt, löst der Browser ein mouseout- oder mouseleave-Event aus, während sich der Zeiger über der Seite befindet. Dieser Exit nach oben ist das klassische Exit-Intent-Signal.1
Der Inhalt ist meist ein einzelnes, fokussiertes Angebot: ein Rabattcode für die erste Bestellung, eine Newsletter-Anmeldung oder eine Erinnerung an Artikel, die noch im Warenkorb liegen.
Der CRO-Aspekt
Der wahre Wert liegt im Timing. Ein normales Popup unterbricht einen Käufer, der sich noch umsieht. Ein Exit Popup unterbricht niemanden, da es erst erscheint, wenn der Besucher sich bereits entschieden hat zu gehen.
Das macht es zu einer kostengünstigen Rückgewinnungsmaßnahme (Recovery Layer). Ein Besucher, der eigentlich ohne etwas zu kaufen gehen wollte, hinterlässt stattdessen eine E-Mail-Adresse oder überdenkt seine Entscheidung wegen eines Rabatts. Du stiehlst einem engagierten Käufer nicht die Aufmerksamkeit, du fängst ihn ab, wenn er quasi schon zur Tür draußen ist.
Exit Intent ist eine Taktik innerhalb einer umfassenderen Conversion-Strategie. Für das Gesamtbild, schau dir unseren Shopify CRO Guide an. Wenn es speziell um das Einsammeln von E-Mails geht, lies nach, wie man ein E-Mail-Pop-up in Shopify hinzufügt.
So baust du ein Exit Intent Pop-up in Shopify
Du brauchst dafür keine separate App. Ein nativer Build besteht aus drei Teilen: dem Exit-Detektor, dem Modal und dem Frequency Cap, das verhindert, dass es nervig wird.
1. Exit auf dem Desktop erkennen
Das zuverlässigste Desktop-Signal ist der Mauszeiger, der den oberen Rand des Dokuments verlässt. Lausche auf ein mouseleave-Event im Dokument und prüfe, ob der Zeiger am oder über dem oberen Rand des Viewports ist.
document.addEventListener('mouseleave', (event) => {
// clientY <= 0 bedeutet, dass der Mauszeiger den oberen Rand verlassen hat
if (event.clientY <= 0) {
showExitPopup()
}
})
Die Prüfung auf clientY <= 0 ist wichtig. Ohne sie würdest du das Popup jedes Mal auslösen, wenn der Mauszeiger die Seite in irgendeine Richtung verlässt – auch beim Bewegen nach unten zur Taskleiste, was kein echtes Exit-Signal ist.
2. Das Mobile-Problem lösen
Mobile Geräte haben keinen Mauszeiger, also gibt es kein echtes Mouseout-Event zu erkennen. Ein Desktop-Exit-Intent-Skript bringt auf dem Smartphone nichts, und der meiste Shopify-Traffic ist mobil.
Die ehrliche Antwort ist, dass mobiles Exit Intent nur eine Annäherung ist. Stattdessen wählt man ein Proxy-Signal:
| Signal | Wie es als “Verlassen” gedeutet wird | Worauf du achten musst |
|---|---|---|
| Klick auf den Zurück-Button | history.pushState, dann fängt ein popstate-Listener das Tippen auf Zurück ab | Kann sich manipulativ anfühlen, wenn es die Navigation blockiert |
| Schnelles Scrollen nach oben | Ein schnelles Scrollen nach oben deutet darauf hin, dass die Adressleiste angesteuert wird | Löst beim normalen Surfen leicht versehentlich aus |
| Inaktivitäts-Timeout | Keine Berührung für N Sekunden deutet auf fehlendes Interesse hin | Kein echtes Verlassen, nur Untätigkeit |
Keines davon ist so sauber wie das Desktop-Signal. Der Zurück-Button-Ansatz kommt der echten Absicht (Exit Intent) am nächsten, aber gehe vorsichtig damit um: Sperre den Shopper niemals komplett auf der Seite ein und lass die Zurück-Aktion des Browsers weiterhin funktionieren.
3. Frequency Capping, damit es nur einmal feuert
Ein Exit-Popup, das auf jeder Seite und in jeder Session wieder auftaucht, führt ganz schnell zum Bounce. Speichere ein Flag, damit es nur einmal feuert und respektiert wird, wenn es weggedrückt wurde.
const SEEN_KEY = 'exit_popup_seen'
function showExitPopup() {
// in dieser Session schon gezeigt oder geschlossen, nichts tun
if (localStorage.getItem(SEEN_KEY)) return
openModal()
localStorage.setItem(SEEN_KEY, '1')
}
Nutze localStorage für ein Capping, das über mehrere Besuche hinweg bestehen bleibt, oder sessionStorage, wenn du es nur für die aktuelle Session unterdrücken willst. Wenn der Shopper das Popup schließt oder konvertiert, sorgt dasselbe Flag dafür, dass es nicht wiederkommt.
Die Regel ist einfach: Akzeptiere das Schließen. Wenn jemand das Popup schließt, hat er geantwortet. Frage beim nächsten Seitenaufruf nicht noch einmal.
Schädigen Exit Intent Pop-ups das SEO?
Das ist der Teil, den die meisten Guides falsch verstehen. Hier ist die genaue Erklärung.
Google hat Richtlinien zu aufdringlichen Interstitials veröffentlicht, die den Zugang zu Inhalten erschweren. Das betrifft vor allem Seiten, bei denen der Content über die mobile Suche aufgerufen wird und bei denen ein Pop-up den Hauptinhalt direkt beim Laden oder kurz danach blockiert.2
Was die Richtlinie als Problem einstuft:
- Ein Pop-up, das den Hauptinhalt verdeckt, sobald der Besucher von einem Suchergebnis kommt.
- Ein eigenständiges Interstitial, das der Nutzer erst wegklicken muss, bevor er etwas lesen kann.
- Ein Layout, bei dem der “Above-the-fold”-Bereich (der sofort sichtbare Teil) mehr aus dem Interstitial als aus dem eigentlichen Inhalt besteht.
Was Google allgemein als risikoärmer einstuft:
- Interstitials, die gesetzlich vorgeschrieben sind, wie z. B. Cookie-Einwilligungen oder Altersverifizierungen.
- Login-Dialoge für Inhalte, die nicht öffentlich indexiert werden sollen.
- Banner, die ein angemessenes Maß an Platz einnehmen und leicht zu schließen sind.
Ein Exit Intent Popup ist hier auf der sichereren Seite, da es ausgelöst wird, wenn der Nutzer die Seite verlässt, und nicht, wenn er über die Suche ankommt. Es blockiert den Inhalt beim Einstieg nicht – und genau darauf zielt die Richtlinie ab.
Betrachte dies als Best-Practice-Designrichtlinie und nicht als garantierte Ranking-Strafe. Es gibt keinen offiziell veröffentlichten Prozentsatz für eine Abstrafung, und du solltest jedem Guide gegenüber skeptisch sein, der einen erfindet. Baue das Popup so, dass es beim Exit feuert, mach es leicht schließbar, und du bleibst absolut im Rahmen der Regeln.
Design- und UX-Regeln für Exit Pop-ups
Ein Popup, das konvertiert, und ein Popup, das nervt, unterscheiden sich nur durch ein paar Details.
- Niemals beim Einstieg feuern. Der ganze Sinn besteht darin, dass es bei einem Exit Intent auslöst, und nicht durch einen Timer in der Sekunde, in der die Seite geladen wird.
- Mach das Schließen offensichtlich. Ein klarer Schließen-Button, ein Klick auf den Hintergrund (Backdrop) und die
Escape-Taste sollten es alle schließen können. Ein eingesperrter Käufer ist ein verlorener Käufer. - Fokus nur einfangen, solange es offen ist (Focus Trap). Ein Modal sollte den Tastaturfokus behalten, während es sichtbar ist, damit die Tab-Reihenfolge darin bleibt. Beim Schließen muss der Fokus auf die Seite zurückkehren. Dies ist der einzige Ort, an dem ein Focus Trap richtig ist, und er muss sich lösen, sobald das Popup schließt.
- Füge das richtige ARIA hinzu. Nutze
role="dialog"mitaria-modal="true"und einem Label, damit Screenreader es als Dialog ansagen. - Stapele keine Pop-ups. Wenn ein Cookie-Banner, ein Chat-Widget und ein Newsletter-Modal alle gleichzeitig feuern, hast du eine Wand aus Overlays. Prüfe, was bereits angezeigt wird, bevor du noch eines hinzufügst.
Wenn du das richtig machst, wirkt das Popup wie ein hilfreiches letztes Angebot und nicht wie ein Hindernis. Für eine auf Newsletter fokussierte Variante desselben Musters, sieh dir unseren Guide zum Shopify Newsletter Popup an.
App vs. Nativ: Der Kompromiss
Du kannst ein Exit Popup mit einer App in wenigen Klicks hinzufügen, und für einen nicht-technischen Shop ist das ein fairer Startpunkt. Die Kompromisse sind die altbekannten: eine monatliche Gebühr, zusätzliches JavaScript auf jeder Seite, ein Popup, das vielleicht nicht zu deinem Theme passt, und eine Abhängigkeit, die das Popup wieder mitnimmt, wenn du die App deinstallierst.
Nativer Code vermeidet alle vier Probleme. Der Haken ist, dass jemand den Detektor, das Modal, das Frequency Capping und die Barrierefreiheit (Accessibility) richtig programmieren muss. Genau diese Lücke füllt der nächste Abschnitt.
Wo Fudge ins Spiel kommt
Fudge ist ein KI-Storefront-Editor, der nativen Theme-Code schreibt. Du beschreibst das Popup einfach in Klartext: “Füge ein Exit Intent Popup hinzu, das 10% Rabatt anbietet, wenn ein Desktop-Besucher gehen will, mit einem Zurück-Button-Fallback auf Mobile, das nur einmal pro Session angezeigt wird.” Er schreibt das Liquid, CSS und JavaScript direkt in dein Theme.
Da der Output nativ ist, gibt es kein Third-Party-Widget, das über deinen Store gerendert wird, kein zusätzliches App-Script auf jeder Seite und keine monatlichen Popup-Gebühren. Das Frequency Capping und die Exit-Trigger sind integriert, sodass es einmal feuert und ein Schließen respektiert.
Und weil es Theme-Code ist, überlebt es eine Deinstallation. Wenn du Fudge kündigst, bleibt das Popup genau da, wo es ist – das Gegenteil von einem App-gerenderten Element, das verschwindet, wenn du die App entfernst. Das Gleiche gilt für alles andere, was du mit dem Shopify Store Editor baust.
FAQ
Auf dem Desktop achtet es darauf, wenn der Cursor die Seite oben verlässt. Ein mouseleave-Event auf dem Dokument mit einer clientY von oder unter Null bedeutet, dass sich der Mauszeiger nach oben in Richtung Browser-Chrome bewegt hat, was das klassische Exit-Signal ist. Auf dem Handy gibt es keinen Cursor, daher verlässt es sich auf Alternativen wie das Drücken des Zurück-Buttons, ein schnelles Scrollen nach oben oder einen Inaktivitäts-Timeout.
Nicht auf die gleiche Weise. Handys haben keine Maus, also gibt es keinen echten Mouseout abzufangen. Der übliche Workaround besteht darin, auf ein Tippen des Zurück-Buttons mithilfe der History-API zu achten, da dies der echten Exit-Absicht am nächsten kommt. Vermeide es nur, den Besucher vollständig auf der Seite gefangen zu halten oder die normale Navigation zu blockieren.
Im Allgemeinen ist das Risiko geringer als bei anderen Pop-ups. Googles Richtlinien für aufdringliche Interstitials zielen hauptsächlich auf Pop-ups ab, die Inhalte beim Einstieg über die mobile Suche blockieren. Ein Exit-Popup wird ausgelöst, wenn der Besucher geht, nicht wenn er ankommt, daher blockiert es die Inhalte nicht in der Weise, auf die die Richtlinien abzielen. Mach es einfach wegzuklicken, um auf der sicheren Seite zu sein.
Höchstens einmal pro Sitzung, und nach einem Wegklicken nie wieder. Speichere ein Flag im localStorage oder sessionStorage, wenn es angezeigt wird, und überprüfe dieses Flag, bevor du es wieder auslöst. Dasselbe Popup wiederholt anzuzeigen, ist ein schneller Weg, um einen Bounce zu kassieren und wiederkehrende Käufer zu verärgern.
Nein. Ein Exit-Popup ist nur ein bisschen nativer Theme-Code: ein Mouseout-Detektor, ein Modal mit guter Barrierefreiheit und Frequency Capping. Apps sind zwar schneller installiert, bringen aber monatliche Gebühren, zusätzliches JavaScript und eine Abhängigkeit mit, die das Popup bei einer Deinstallation entfernt. Fudge baut genau dasselbe als nativen Code ein, der auch nach einer Kündigung bestehen bleibt.
Beschränke es auf eine fokussierte Anfrage. Ein Rabatt auf die erste Bestellung, eine Newsletter-Anmeldung oder eine Erinnerung an die Artikel, die noch im Warenkorb liegen, funktionieren alle gut, weil sie einem zögernden Käufer einen konkreten Grund geben, zu bleiben. Vermeide es, mehrere Angebote oder lange Formulare zu stapeln, da diese zusätzliche Hürden in dem Moment schaffen, in dem jemand bereits gehen möchte.
Footnotes
-
MDN Web Docs, “Element: mouseleave event” und “Document: mouseout event” - wenn der Mauszeiger ein Element verlässt, werden diese Events ausgelöst. Wenn man beim Dokument
clientY <= 0ausliest, erkennt man einen Cursor, der über den oberen Rand des Viewports hinausgegangen ist. https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event ↩ -
Google Search Central Blog, “Nutzer dabei unterstützen, Inhalte auf Mobilgeräten leicht zugänglich zu machen” (2016) - beschreibt aufdringliche Interstitials, die Inhalte auf Seiten schlechter zugänglich machen können, auf die über eine Suche zugegriffen wird. Nennt Ausnahmen einschließlich Interstitials, die aufgrund gesetzlicher Verpflichtungen erforderlich sind (wie Cookie- oder Altersüberprüfungen) und Banner, die angemessen viel Platz auf dem Bildschirm einnehmen und leicht wegzuklicken sind. https://developers.google.com/search/blog/2016/08/helping-users-easily-access-content-on ↩