Exit-Intent-Popup einrichten: Schritt-fuer-Schritt-Anleitung
- Julian Kaspari
- 12. Aug.
- 10 Min. Lesezeit
Ein Exit-Intent-Popup richtest du so ein: Auf dem Desktop erkennst du die Verlassensabsicht per mouseleave-Listener kombiniert mit einer clientY <= 0-Prüfung. Auf Mobilgeräten nutzt du Proxy-Trigger wie den Zurück-Button oder schnelles Hochscrollen. Frequency Capping via localStorage verhindert, dass das Popup denselben Besucher mehrfach belästigt. Dazu kommt die E-Mail- oder CRM-Integration für die Nachverfolgung.
Kurzcheckliste zum Einrichten:
Script asynchron laden (defer oder dynamisch)
Desktop-Trigger: mouseleave + clientY-Check
Mobile-Proxy-Trigger definieren (Zurück-Button, Scroll-Geschwindigkeit)
Frequency Capping: einmal pro Session, Persistenz über localStorage
DSGVO: Double-Opt-In, Einwilligungslog, Auftragsverarbeitungsvertrag mit ESP
A/B-Test vor dem Go-live einrichten
Tool-Quicklist:
Nativer Theme-Code: maximale Kontrolle, kein Overhead, erfordert Entwicklerkenntnisse
Plugin/SaaS (z. B. OptinMonster, Popup Maker): schnelle Einrichtung, monatliche Kosten, mehr externe Scripts
Shopify-App oder WooCommerce-Plugin: plattformspezifisch, oft No-Code, aber Abhängigkeit vom Anbieter
Wichtige Erkenntnisse
Ein Exit-Intent-Popup funktioniert nur dann zuverlässig, wenn Desktop-Trigger, Mobile-Proxy-Signale, Frequency Capping und DSGVO-konformes Opt-in von Anfang an zusammen geplant werden.
Thema | Details |
Desktop-Trigger | mouseleave plus clientY <= 0 verhindert Fehltrigger bei seitlichem Viewport-Verlassen. |
Mobile-Proxy | Zurück-Button (popstate) und Inaktivitäts-Timeout als verlässlichste Ersatzsignale einsetzen. |
Frequency Capping | localStorage mit Zeitstempel unterdrückt das Popup für mehrere Tage nach Interaktion. |
DSGVO-Pflicht | Double-Opt-In, Einwilligungslog und AVV mit dem ESP sind in Deutschland nicht optional. |
Kosten und Aufwand | Plugin/SaaS ab 0 €, native Implementierung —, Agentur — plus Betreuung. |
Inhaltsverzeichnis
Wie funktioniert ein Exit-Intent-Popup technisch?
Ein Exit-Intent-Popup ist ein Modal, das erscheint, sobald das System erkennt, dass ein Besucher die Seite verlassen will. Die Erkennung basiert auf Verhaltens-Triggern, nicht auf einem Klick auf den Schliessen-Button.
Desktop-Mechanik:
Auf dem Desktop überwacht ein JavaScript-Listener die Mausbewegung. Sobald der Cursor den Viewport nach oben verlässt, also Richtung Adressleiste oder Tab-Leiste, feuert das Event. Die verlässlichste Methode kombiniert mouseleave auf dem document mit einer Prüfung, ob clientY <= 0. Ohne diese Prüfung löst das Popup bei jedem Verlassen des Viewports aus, auch seitlich, was zu Fehltriggern führt.
Mobile-Proxy-Signale:
Auf Smartphones gibt es kein Maus-Tracking. Stattdessen kommen Ersatzsignale zum Einsatz:
Zurück-Button-Event: Der Browser-Verlauf wird per history.pushState manipuliert, ein popstate-Listener reagiert auf die Rückwärtsbewegung.
Schnelles Hochscrollen: Eine plötzliche Aufwärtsbewegung mit hoher Geschwindigkeit gilt als Abbruchsignal.
Inaktivitäts-Timeout: Nach einer definierten Zeit ohne Interaktion erscheint das Popup.
Typische E-Commerce-Anwendungsfälle:
Rabattcode beim Verlassen des Warenkorbs
Newsletter-Anmeldung mit Willkommens-Coupon
Warenkorb-Erinnerung für Abbrecher
Support-Angebot bei langer Verweildauer ohne Kauf
Wie richtest du ein Exit-Intent-Popup technisch ein?
Die Minimalimplementierung besteht aus drei Teilen: einem Detektor, einem Modal und einem Capping-Flag. Alles andere baut darauf auf.
Script asynchron einbinden. Lade das Script mit defer oder per dynamischem Import, damit es den Seitenaufbau nicht blockiert. Google empfiehlt ausdrücklich, Popups nicht beim Seitenaufruf den Hauptinhalt blockieren zu lassen, da dies Core Web Vitals und Rankings beeinträchtigt.
Exit-Intent-Detektor einrichten. Registriere einen mouseleave-Listener auf document. Prüfe innerhalb des Handlers event.clientY <= 0. Nur wenn diese Bedingung erfüllt ist, gilt der Trigger als valide.
Modal rendern. Injiziere das Modal-HTML per JavaScript oder halte es im DOM versteckt (display: none). Beim Trigger setzt du display: block und verwaltest den Fokus: Ein Focus Trap muss aktiv sein, solange das Modal sichtbar ist, und beim Schliessen muss der Fokus zum auslösenden Element zurückkehren.
Frequency Capping implementieren. Vor dem Anzeigen prüfst du ein localStorage-Flag. Ist es gesetzt, wird das Popup nicht gezeigt. Nach der Anzeige setzt du das Flag. Für reine Session-Begrenzung reicht sessionStorage; für persistentes Capping über mehrere Besuche hinweg brauchst du localStorage mit einem Zeitstempel.
Integration anschliessen. Das Formular im Modal sendet per fetch-Request an deinen ESP (z. B. Mailchimp) oder an einen Zapier-Webhook. Bestätige den Eingang serverseitig, bevor du das Modal schliesst.
Technische Prüfungen vor dem Go-live:
JavaScript-Konsole auf Fehler prüfen (besonders Event-Listener-Konflikte)
Content Security Policy (CSP) prüfen: Inline-Scripts können blockiert sein
Konflikte mit anderen Widgets (Chat, Cookie-Banner) testen
Incognito-Modus und deaktivierte Browser-Erweiterungen zum Testen nutzen
Profi-Tipp: Kombiniere mouseleave immer mit dem clientY <= 0-Check. Ohne diese Bedingung feuert das Popup bei jeder seitlichen Mausbewegung aus dem Viewport, was die Absprungrate erhöht und das Nutzererlebnis ruiniert.
Wie richtest du Exit-Intent-Popups auf Shopify, WooCommerce, Wix und Squarespace ein?
Jede Plattform hat ihren eigenen Weg. Das Grundprinzip bleibt gleich, aber Installationspfad und Integrationspunkte unterscheiden sich erheblich.
Shopify
Bei Shopify gibt es zwei Implementierungswege: eine App aus dem Shopify App Store oder nativer Theme-Code. Apps wie Privy oder Klaviyo-Popups sind schnell eingerichtet, bringen aber zusätzliche externe Scripts mit. Nativer Theme-Code über theme.liquid oder eine eigene Section reduziert den Overhead und gibt dir volle Kontrolle über Trigger-Logik und Capping.
Für Gutschein-Codes empfiehlt sich die Shopify Discount API: Generiere einmalige Codes serverseitig und übergib sie per AJAX an das Popup-Formular. So vermeidest du, dass statische Codes öffentlich kursieren.
Einrichtungsschritte Shopify (App-Weg):
App im Shopify App Store installieren
Popup-Template auswählen und Text anpassen
Trigger auf „Exit Intent“ setzen
E-Mail-Integration mit Klaviyo oder Mailchimp verbinden
Frequency Capping auf „einmal pro Session“ stellen
Vorschau im Theme-Editor prüfen, dann aktivieren
WooCommerce / WordPress
Für WordPress-Shops sind Plugins wie OptinMonster oder SeedProd die schnellste Option. Sie bieten No-Code-Editoren und direkte Mailchimp-Integration. Wer mehr Kontrolle will, bindet das Script per wp_enqueue_scripts-Hook ein und nutzt die WordPress REST API oder WooCommerce-Webhooks für die Datenweitergabe.
Wichtig: Auf Mobile setzen diese Plugins oft auf Scroll- oder Zeit-Trigger statt auf echtes Exit-Intent, da Maus-Tracking dort nicht verfügbar ist.
Wix und Squarespace
Beide Plattformen schränken den Zugang zum Theme-Code ein. Wix bietet über Velo (ehemals Corvid) begrenzte JavaScript-Möglichkeiten; Squarespace erlaubt Code-Injektionen im Header. In beiden Fällen ist ein SaaS-Widget die praktischere Lösung. Das Script wird per Code-Injection eingebunden, die Konfiguration erfolgt im jeweiligen SaaS-Dashboard.
E-Mail-Integrationen und Zapier
Mailchimp: Direkte API-Integration oder Formular-Embed; Double-Opt-In in den Mailchimp-Listeneinstellungen aktivieren
Andere ESPs (Klaviyo, ActiveCampaign): Webhook-Endpunkt im Popup-Script hinterlegen
Zapier: Als Brücke zwischen Popup-Formular und CRM oder ESP, wenn keine direkte Integration existiert; Zap mit Webhook-Trigger einrichten, Ziel-App verbinden
Profi-Tipp: Übergib E-Mail-Adressen sofort per API an den ESP, sobald das Formular abgesendet wird. Speichere keine Adressen im Client-Speicher oder in localStorage, da das DSGVO-Risiken erzeugt und bei Browser-Abstürzen zu Datenverlust führt.
Warum funktioniert Exit-Intent auf Mobilgeräten anders?
Auf Smartphones gibt es schlicht kein mouseout. Das ist keine Einschränkung eines bestimmten Browsers, sondern ein grundlegendes Merkmal von Touch-Interfaces. Wer ein Exit-Intent-Popup auf Mobile einrichten will, braucht Proxy-Signale.
Verfügbare Mobile-Trigger im Vergleich:
Zurück-Button (popstate): Trifft echte Verlassensabsicht gut, aber die History-API-Manipulation kann die Navigation stören, wenn sie nicht sorgfältig implementiert ist. Nutzer, die nur zur vorherigen Seite wollen, werden ungewollt unterbrochen.
Schnelles Hochscrollen: Gutes Signal für Abbruchsabsicht, aber auch normale Navigationsgeste. Hohe False-Positive-Rate auf Content-Seiten.
Inaktivitäts-Timeout: Sicher und wenig invasiv, trifft aber auch Nutzer, die nur kurz abgelenkt sind.
Profi-Tipp: Nutze history.pushState plus popstate-Listener für den Zurück-Button-Fallback, aber stelle sicher, dass die Navigation danach ungehindert weiterläuft. Das Popup darf den Zurück-Button nicht dauerhaft blockieren, sonst verletzt du Googles Richtlinien zu aufdringlichen Interstitials.
Für die meisten Shops ist eine Kombination sinnvoll: Zurück-Button als primäres Signal, Inaktivitäts-Timeout als Fallback. Schnelles Hochscrollen nur auf Produktseiten aktivieren, wo die Geste eindeutiger ist. Auf Checkout-Seiten Mobile-Popups generell deaktivieren, da sie dort die Conversion eher stören als fördern.
Welche Best Practices machen Exit-Intent-Popups wirklich wirksam?
Die Kernregel lautet: Nur beim Exit feuern, einmal pro Session, leicht schliessbar, klarer Nutzen für den Besucher. Alles andere ist Feintuning.
Design- und Copy-Checkliste:
CTA-Button mit konkretem Nutzen beschriften („10 % sparen“, nicht „Absenden“)
Angebot muss echt sein: Knappheit nur kommunizieren, wenn sie real ist
Schliessen-Button gross und sichtbar, alternativ Klick auf den Hintergrund
Escape-Taste schliesst das Modal (Accessibility-Pflicht)
Maximale Breite auf Mobile: 90 % des Viewports, keine horizontale Scrollbar
Segmentierung:
Warenkorb-Status: Besucher mit gefülltem Warenkorb bekommen ein anderes Angebot als leere-Warenkorb-Besucher
Wiederkehrende Nutzer: Zeige kein Popup, wenn jemand bereits konvertiert hat
Traffic-Quelle: Paid-Traffic-Besucher reagieren anders als organische; separate Angebote testen
Frequency Capping:
sessionStorage begrenzt das Popup auf eine Session. localStorage mit Zeitstempel verhindert die Anzeige für mehrere Tage nach einer Interaktion. Wer das Popup nach einer Ablehnung für 30 Tage unterdrückt, reduziert Frustration ohne nennenswerten Conversion-Verlust.
Accessibility:
ARIA-Rolle role="dialog" und aria-modal="true" setzen
aria-labelledby auf die Popup-Überschrift verweisen
Focus Trap nur aktiv, solange das Modal sichtbar ist
Beim Schliessen Fokus zum auslösenden Element zurücksetzen
Für weitere Ideen zur Segmentierung und Nutzeransprache lohnt sich ein Blick auf Best Practices für digitale Werbemassnahmen im E-Commerce.
Was musst du bei DSGVO und Datenschutz beachten?
Exit-Intent-Popups sind in Deutschland grundsätzlich zulässig. Sobald du aber personenbezogene Daten sammelst, also E-Mail-Adressen oder Tracking-Daten, brauchst du eine Rechtsgrundlage.
DSGVO-Checkliste:
Zweck der Datenerhebung klar im Formular benennen
Rechtsgrundlage festlegen: Einwilligung (Art. 6 Abs. 1 lit. a DSGVO) für E-Mail-Marketing
Double-Opt-In für alle E-Mail-Anmeldungen aus Popups
Einwilligungslog serverseitig speichern (Zeitstempel, IP-Adresse, Formularversion)
Aufbewahrungsfristen in der Datenschutzerklärung dokumentieren
Opt-out-Link in jeder Folge-E-Mail
Auftragsverarbeitungsvertrag (AVV) mit dem ESP abschliessen
Technische Hinweise:
Keine personenbezogenen Daten unverschlüsselt in localStorage speichern
E-Mail-Adressen sofort an den ESP übergeben, nicht im Client halten
Consent-Management-Plattform (CMP) kann Tracking-Scripts blockieren: Plane einen Fallback, wenn das Popup-Script von der CMP blockiert wird
Profi-Tipp: Speichere den Einwilligungslog direkt beim Opt-in serverseitig, inklusive Zeitstempel und der angezeigten Formularversion. Das ist dein Nachweis bei einer DSGVO-Anfrage.
Wie misst und optimierst du die Performance deines Popups?
Die wichtigsten KPIs für ein Exit-Intent-Popup sind: Conversion-Rate des Popups selbst, E-Mail-Lift (neue Abonnenten pro 1.000 Besucher), Warenkorb-Retention-Rate und Revenue per Visit für Besucher, die das Popup gesehen haben, im Vergleich zur Kontrollgruppe.
Empfohlene Tracking-Events:
popup_shown: Popup wurde angezeigt
popup_closed: Besucher hat geschlossen ohne Interaktion
popup_converted: Formular abgesendet oder CTA geklickt
popup_dismissed: Explizit abgelehnt (falls Ablehnungs-Button vorhanden)
Diese Events sendest du per GA4 gtag('event', ...) oder per Server-Side-Tagging an Google Analytics. Für CRM-Systeme nutzt du Webhook-Events aus dem ESP.
A/B-Test-Plan:
Definiere eine klare Hypothese, z. B. Lauf das Experiment mindestens so lange, bis jede Variante statistisch ausreichend Impressionen gesammelt hat. Entscheide nicht nach wenigen Tagen.
KPI | Definition | Messpunkt |
Popup-Conversion-Rate | Conversions / Impressionen | Event popup_converted / popup_shown |
E-Mail-Lift | Neue Abonnenten pro 1.000 Besucher | ESP-Dashboard vs. Gesamttraffic |
Warenkorb-Retention | Käufe nach Popup-Impression / Gesamtabbrecher | GA4-Funnel-Analyse |
Revenue per Visit | Umsatz / Besuche (Popup-Gruppe vs. Kontrollgruppe) | GA4-Segment-Vergleich |
Für die Verbindung von Popup-Leads mit Retargeting-Kampagnen findest du weiterführende Hinweise unter Retargeting-Kampagnen verstehen und für E-Commerce nutzen.
Fünf sofort einsetzbare Templates für deinen Onlineshop
Welches Template passt zu welchem Ziel? Hier die Kurzantwort: Rabattcode für Kaufabbrecher, Versandkosten-Freischaltung für preissensible Besucher, Newsletter-Coupon für Erstbesucher, Warenkorb-Erinnerung für Abbrecher mit gefülltem Warenkorb, Support-Angebot für zögernde Besucher auf Produktseiten.
Rabattcode: Headline: „Warte kurz!“ Subtext: „Hol dir 10 % auf deine erste Bestellung. Code wird automatisch angewendet.“ CTA: „Rabatt sichern“
Versandkosten-Freischaltung: Headline: „Kostenloser Versand ab 50 €.“ Subtext: „Dein Warenkorb liegt bei [X] €. Noch [Y] € bis zum Gratis-Versand.“ CTA: „Weiter shoppen“
Newsletter-Coupon: Headline: „5 € Willkommensrabatt.“ Subtext: „Trag dich ein und erhalte deinen Code sofort per E-Mail.“ CTA: „Code anfordern“
Warenkorb-Erinnerung: Headline: „Dein Warenkorb wartet.“ Subtext: „Du hast Artikel drin. Sollen wir sie für dich reservieren?“ CTA: „Zum Warenkorb“
Support-Angebot: Headline: „Fragen zum Produkt?“ Subtext: „Unser Team antwortet in unter 2 Minuten.“ CTA: „Jetzt chatten“
Alle fünf Templates solltest du gegeneinander testen. Welches Angebot für deine Zielgruppe am besten funktioniert, hängt von Preispunkt, Produktkategorie und Traffic-Quelle ab. Weitere Ideen für kreative Offer-Formulierungen findest du unter Beispiele für erfolgreiche Werbekampagnen im E-Commerce.
Was tun, wenn das Popup nicht erscheint?
Die häufigsten Ursachen: ein JavaScript-Fehler, eine blockierende Content Security Policy, ein aktiver Ad-Blocker, ein Consent-Tool, das das Script deaktiviert, oder ein falsch gesetzter Trigger.
Problem-Lösungs-Paare:
Popup erscheint gar nicht: Browser-Konsole auf JS-Fehler prüfen; mouseleave-Listener mit console.log debuggen
CSP blockiert Script: CSP-Header im Server oder CDN anpassen; script-src um die eigene Domain erweitern
Ad-Blocker unterdrückt Popup: Script-Datei umbenennen, generische Klassennamen wie .popup oder .overlay vermeiden
Consent-Tool blockiert: Popup-Script erst nach Einwilligung laden oder als „berechtigtes Interesse“ klassifizieren (rechtlich prüfen lassen)
Falscher Trigger auf Mobile: Prüfen, ob der popstate-Listener korrekt registriert ist; history.pushState vor dem Listener aufrufen
Popup erscheint zu früh oder zu oft: localStorage-Flag prüfen; Zeitstempel-Logik im Capping-Code debuggen
Debug-Checkliste:
Incognito-Modus öffnen (kein Cache, keine Erweiterungen)
Browser-DevTools: Console, Network, Application-Tab (LocalStorage prüfen)
Mobile-Emulation im DevTools aktivieren und Trigger manuell auslösen
Verschiedene User-Agents testen (iOS Safari, Android Chrome)
Consent-Banner temporär deaktivieren und erneut testen
Was kostet ein Exit-Intent-Popup: Plugin, SaaS oder Agentur?
Für einen Standard-Shop ist ein Plugin oder SaaS-Tool die schnellste und günstigste Lösung. Bei hohem Traffic, strikten Datenschutzanforderungen oder komplexer Tracking-Architektur lohnt sich native Implementierung oder Agenturunterstützung.
Entscheidungskriterien:
Traffic unter 10.000 Besucher/Monat: Plugin oder SaaS reicht
Eigene Tracking-Infrastruktur (Server-Side Tagging, GA4): native Implementierung sinnvoll
DSGVO-kritische Branchen (Gesundheit, Finanzen): Agentur mit Datenschutz-Expertise
Kein technisches Personal im Haus: SaaS oder Agentur
Native Theme-Code reduziert laut Fachquellen den Ladezeit-Overhead und die Abhängigkeit von Drittanbieter-Scripts erheblich, was bei performance-kritischen Shopify-Setups den Unterschied macht.
Wann lohnt sich Eigenumsetzung, wann eine Agentur wie Adsfactory?
Für einfache Setups, also ein Standard-Plugin auf WooCommerce oder eine Shopify-App mit Mailchimp-Integration, ist Eigenumsetzung völlig ausreichend. Das ist in wenigen Stunden erledigt, und die meisten SaaS-Tools führen dich Schritt für Schritt durch die Einrichtung.
Anders sieht es aus, wenn du Exit-Intent-Popups in eine komplexere Tracking-Architektur einbetten willst. Server-Side-Tagging, Multichannel-Attribution, saubere GA4-Event-Taxonomie und DSGVO-konformes Consent-Management zusammen zu bringen, ist kein Nachmittagsprojekt.
Wann Agenturunterstützung sinnvoll ist:
Kein technisches Personal für Implementierung und Wartung
Migrationsrisiko bei bestehendem Tracking-Setup
A/B-Test-Planung mit statistisch belastbaren Ergebnissen gewünscht
Multichannel-Attribution (Meta, Google, E-Mail) soll korrekt funktionieren
DSGVO-Setup muss dokumentiert und auditierbar sein
Adsfactory arbeitet mit E-Commerce-Shops, die ihre Werbekampagnen auf Meta und Google skalieren wollen, und baut dabei die gesamte Tracking-Infrastruktur mit auf. Ein Exit-Intent-Popup, das sauber in GA4 und das CRM eingebunden ist, liefert Daten, die direkt in die Kampagnenoptimierung einfliessen. Das ist der Unterschied zwischen einem Popup, das E-Mail-Adressen sammelt, und einem, das messbar Umsatz bringt.
Wenn du wissen willst, wie Adsfactory dein Tracking-Setup und deine Onsite-Konversionen zusammen aufbaut, findest du mehr unter Adsfactory.
Quellen
FAQ
Was ist ein Exit-Intent-Popup?
Ein Exit-Intent-Popup ist ein Modal, das erscheint, wenn ein Besucher die Website verlassen will. Auf dem Desktop erkennt es die Verlassensabsicht per mouseleave-Event und clientY-Prüfung; auf Mobile kommen Proxy-Signale wie der Zurück-Button zum Einsatz.
Wie kann ich ein Exit-Intent-Popup aktivieren?
Auf Shopify installierst du eine App aus dem App Store und stellst den Trigger auf „Exit Intent“. Auf WordPress/WooCommerce nutzt du ein Plugin wie OptinMonster oder SeedProd. Für beide Plattformen gilt: Frequency Capping auf einmal pro Session setzen und E-Mail-Integration vor dem Aktivieren testen.
Wie stelle ich sicher, dass das Popup DSGVO-konform ist?
Aktiviere Double-Opt-In für alle E-Mail-Anmeldungen, speichere den Einwilligungslog serverseitig und schliesse einen Auftragsverarbeitungsvertrag mit deinem E-Mail-Dienstleister ab. Keine personenbezogenen Daten unverschlüsselt im Browser-Speicher halten.
Warum erscheint mein Popup nicht?
Die häufigsten Ursachen sind ein JavaScript-Fehler in der Konsole, eine blockierende Content Security Policy, ein Ad-Blocker oder ein Consent-Tool, das das Script deaktiviert. Teste im Incognito-Modus ohne Erweiterungen und prüfe den Application-Tab in den DevTools auf das localStorage-Flag.
Funktioniert Exit-Intent auch auf dem Smartphone?
Echtes Maus-Tracking gibt es auf Mobilgeräten nicht. Als Ersatz dienen der Zurück-Button-Event (popstate), schnelles Hochscrollen oder ein Inaktivitäts-Timeout. Diese Proxy-Signale sind weniger präzise als Desktop-Maus-Tracking und sollten mit einem höheren Frequency-Capping kombiniert werden, um Fehltrigger zu minimieren.
Empfehlung
Kommentare