Exit-Intent-Popups auf Mobilgeräten umsetzen – so funktioniert’s

Exit-Intent-Popups gelten als bewährte Methode, um Besucher vor dem Verlassen einer Website noch einmal anzusprechen. Doch die meisten Implementierungen setzen voraus, dass Nutzer mit einer Maus unterwegs sind. Auf Smartphones und Tablets fällt das klassische Signal – die Mausbewegung zur Browser-Oberkante – schlichtweg weg. Wer seine Exit-Intent-Strategie auf Desktop-Nutzer beschränkt, lässt damit potenziell über die Hälfte des Traffics ungenutzt. Die Lösung: Ein intelligentes System, das je nach Gerät unterschiedliche Signale erkennt und nur einmal pro Session auslöst.

Warum Standard-Exit-Intent auf Mobilgeräten scheitert

Die gängigste Methode zur Erkennung von Exit-Intent nutzt den mouseout-Event, der ausgelöst wird, wenn der Cursor die obere Bildschirmkante verlässt. Dieses Signal funktioniert perfekt auf Desktop-Geräten, wo Nutzer mit einer Maus navigieren. Doch auf Touch-Geräten existiert dieser Mechanismus nicht. Smartphones und Tablets erkennen die Absicht zum Verlassen der Seite stattdessen durch andere Verhaltensmuster:

• Eine schnelle Wischgeste nach oben, die auf ein Scrollen zur Adressleiste hindeutet.
• Eine längere Inaktivitätsphase, die auf nachlassendes Interesse schließen lässt.
• Die Scroll-Position: Ein plötzlicher Sprung nach oben kann ebenfalls als Exit-Signal interpretiert werden.

Ohne Anpassung bleibt jede Exit-Intent-Implementierung auf Mobilgeräten wirkungslos – und das, obwohl mobile Nutzer oft den Großteil des Traffics ausmachen.

Ein universeller Ansatz: Signale geräteübergreifend erkennen

Um sowohl Desktop- als auch Mobilnutzer anzusprechen, braucht es eine Lösung, die mehrere Signale kombiniert. Ein JavaScript-Helfer, wie der folgende, kann dabei helfen:

function exitIntent(callback, {
  sensitivity = 20,          // Pixelabstand zur oberen Kante für Desktop-Signal
  mobileScrollDelta = 60,   // Pixelabstand für schnelle Wischgeste nach oben
  idle = 0,                 // Millisekunden Inaktivität (0 = deaktiviert)
  once = true               // Soll die Funktion nur einmal pro Session auslösen?
} = {}) {
  let fired = false;
  let lastY = window.scrollY;
  let idleTimer;

  function teardown() {
    document.removeEventListener("mouseout", onMouseOut);
    window.removeEventListener("scroll", onScroll);
    clearTimeout(idleTimer);
  }

  const trigger = () => {
    if (fired) return;
    if (once) fired = true;
    teardown();
    callback();
  };

  const onMouseOut = (e) => {
    if (!e.relatedTarget && e.clientY <= sensitivity) trigger();
  };

  const resetIdle = () => {
    clearTimeout(idleTimer);
    idleTimer = setTimeout(trigger, idle);
  };

  const onScroll = () => {
    const y = window.scrollY;
    if (lastY - y > mobileScrollDelta) trigger(); // Schnelle Wischgeste nach oben
    lastY = y;
    if (idle) resetIdle();
  };

  document.addEventListener("mouseout", onMouseOut);
  window.addEventListener("scroll", onScroll, { passive: true });
  if (idle) resetIdle();

  return teardown;
}

Dieser Code kombiniert mehrere Signale:

• Den klassischen mouseout-Event für Desktop-Nutzer.
• Eine Überwachung der Scroll-Bewegung für Mobilgeräte.
• Eine Inaktivitätszeit für Nutzer, die die Seite passiv verlassen.

Der Helper ist Teil der Open-Source-Bibliothek ab-test-helpers und kann ohne externe Abhängigkeiten genutzt werden.

Nur einmal pro Session – vermeiden Sie nervige Popups

Ein Popup, das auf jeder Unterseite erneut erscheint, wirkt nicht mehr als hilfreiche Erinnerung, sondern als störende Unterbrechung. Stattdessen sollte das System nur einmal pro Session ausgelöst werden und frühere Ablehnungen respektieren. Hier ein Beispiel, wie dies umgesetzt werden kann:

function allowOncePerDays(key, days = 7) {
  const name = `fc_${key}`;
  try {
    const until = Number(localStorage.getItem(name) || 0);
    if (Date.now() < until) return false;
    localStorage.setItem(name, String(Date.now() + days * 864e5));
    return true;
  } catch (e) {
    return true; // Falls LocalStorage blockiert ist, nicht unterdrücken
  }
}

exitIntent(() => {
  if (sessionStorage.getItem("exit_dismissed") === "1") return;
  if (!allowOncePerDays("exit_offer", 14)) return;
  showOverlay();
}, { idle: 20000 });

Diese Logik stellt sicher, dass:

• Nutzer maximal alle 14 Tage erneut angezeigt bekommen.
• Eine einmalige Ablehnung dauerhaft gespeichert wird.
• Das Popup nur bei erstmaliger Erkennung des Exit-Intents erscheint.

Barrierefreiheit und Nutzererlebnis im Fokus

Ein Exit-Intent-Popup ist im Grunde ein Dialogfenster, das besondere Anforderungen an die Barrierefreiheit stellt. Ohne entsprechende Maßnahmen können Nutzer mit Screenreadern oder Tastatursteuerung in eine Sackgasse geraten. Wichtige Aspekte:

• Fokus-Trapping: Der Fokus sollte innerhalb des Popups bleiben, bis es geschlossen wird.
• Tastaturbedienung: Nutzer müssen das Popup mit der Esc-Taste schließen können.
• ARIA-Rollen: Das Popup sollte als role="dialog" gekennzeichnet sein, um Screenreadern die korrekte Interpretation zu ermöglichen.
• Return-Fokus: Nach dem Schließen des Popups sollte der Fokus an die ursprüngliche Position zurückkehren.

Wer diese Punkte ignoriert, riskiert nicht nur eine schlechte Nutzererfahrung, sondern auch rechtliche Konsequenzen im Rahmen der Barrierefreiheitsrichtlinien.

Erfolg messen: Nicht nur Impressionen, sondern Verhalten analysieren

Viele Website-Betreiber messen den Erfolg von Exit-Intent-Popups ausschließlich anhand der Anzahl der angezeigten Popups. Doch das ist nur die halbe Wahrheit. Entscheidender ist es, die Absicht zum Verlassen der Seite zu erkennen und zu analysieren, wie sich diese Absicht durch das Popup verändert. Hierzu sollte ein separates Analytics-Event ausgelöst werden, sobald die Exit-Intent-Signale erkannt werden – unabhängig davon, ob das Popup tatsächlich angezeigt wird.

Dies ermöglicht:

• Eine bessere Vergleichbarkeit zwischen Testgruppen und Kontrollgruppen.
• Die Messung, wie oft Exit-Intent überhaupt auftritt.
• Die Bewertung, ob das Popup die Nutzer tatsächlich zum Bleiben bewegt oder sie eher verärgert.

Fazit: Exit-Intent für alle Geräte optimieren

Exit-Intent-Popups sind ein mächtiges Werkzeug zur Conversion-Optimierung, doch ihre Wirksamkeit hängt entscheidend von der richtigen Implementierung ab. Statt sich auf Desktop-Signale zu verlassen, sollten Entwickler mehrere Signale kombinieren, die sowohl auf Mobilgeräten als auch auf Desktop-Computern funktionieren. Wichtig ist zudem:

• Das Popup nur einmal pro Session anzuzeigen.
• Barrierefreiheit von Anfang an mitzudenken.
• Den Erfolg nicht nur an Popup-Anzeigen, sondern an der tatsächlichen Nutzerinteraktion zu messen.

Wer diese Prinzipien befolgt, stellt sicher, dass Exit-Intent-Popups für alle Nutzer – unabhängig vom Gerät – funktionieren und tatsächlich zur Conversion beitragen, statt nur zu stören.