Popup beim Verlassen der Webseite (exit-intent-popup)

Ein sehr effektives Tool um den Erfolg einer Webseite zu steigern ist ein sogenanntes Exit Popup.
Jeder von uns kennt dies und wenn es gut gemacht ist nutzt es mehr, als dass es die Besucher verärgert.

Unter gut gemacht verstehe ich dabei, dass es möglichst erst dann erscheint, wenn der Besucher meine Seite eh verlassen möchte und es sollte nicht zwingend ein neues Browserfenster öffnen und somit ein leichtes Ziel für sogenannte Popup-Blocker abgeben.

Beides erreichen wir mit einem sogenannten Exit-Intent-Popup unter Nutzung einer Lightbox. Exit-Intent bedeutet dabei, dass dieses Popup dann erscheint, wenn der Besucher beabsichtigt unsere Seite komplett zu verlassen. Ausgelöst wird das Popup, wenn der Mauszeiger das Inhaltsfenster des Browsers in Richtung URL-Zeile (also nach oben) verlässt.

Das klingt jetzt wahnsinnig technisch und unwahrscheinlich beeindruckend. Es lässt sich aber mit etwas HTML Kenntnis gut umsetzen.

Es gibt einige ziemlich teure Anbieter von gehosteten Lösungen. Diese sind jedoch nicht unbedingt notwendig.

Die komplizierten Dinge hat bereits ein Programmierer in eine kleine Javascript – Datei gepackt, welche wir unter bioep.min.js downloaden können. Diese laden wir dann mittels FTP auf unseren Webspace.

Jetzt binden wir diese in den Quellcode unserer Seite ein. Javascript Dateien können sowohl im Header, wie auch im Body eingebunden werden. Zum Einbinden fügen wir nun die Zeile:

<script type="text/javascript" src="bioep.min.js"></script>

in den Quellcode ein. Gegebenenfalls ist noch das Verzeichnis zur  Javascriptdatei anzupassen.

Darunter folgt der Code für die Konfiguration unserer Popups.

    <script type="text/javascript">
        bioEp.init({
            // Options
        });
    </script>

Als Optionen stehen folgende Parameter zur Verfügung:

Name Type Default Description
width integer 400 Breite des Popup
height integer 220 Höhe des Popup
html string blank HTML Code, welcher im Popup angezeigt werden soll (kann auch direkt in das DIV Tag geschrieben werden).
css string blank CSS Code, welcher das Popup formatieren soll (kann auch direkt in den Quellcode der Webseite geschrieben werden).
fonts array null Ein Array mit Links zu Schrifttypen.
delay integer 5 Das ist die Zeit in Sekunden die mindestens vergehen muss, bevor das Popup nach dem Aufruf der Seite erscheint.
showOnDelay boolean false Wenn true, dann wird das Popup nach der unter delay angegebenen Zeitspanne angezeigt, wenn false dann erst, wenn der Cursor nach dieser Zeitspanne das Browserfenster nach oben verlässt.
cookieExp integer 30 Anzahl Tage, nach welcher das Popup einem Nutzer wieder angezeigt werden soll, nachdem er es gesehen hat. Verhindert, dass das Popup zu sehr nervt.

Das könnte dann z.B. unter Nutzung der Optionen css und cookieExp so aussehen:

<script type=“text/javascript“>// <![CDATA[
bioEp.init({
css: ‚#bio_ep {width: 500px; height: 450px; color: #333; background-color: #ffffff; text-align: center; padding:10px}‘ ,
cookieExp: 2
});
// ]]></script>

ACHTUNG: Leider wird das erste Hochkomma hinter css: als Komma dargestellt. Bitte als Hochkomma übernehmen.

Hier wird also ein Element mit der ID bio_ep mit einer Breite von 500px und einer Höhe von 800px usw. initialisiert.
Der Besucher bekommt das Popup aller 2 Tage einmal angezeigt.

Jetzt fehlt uns nur noch das Element, welches unseren Inhalt, z.B. eine Umfrage oder ein Email-Optin, enthält.

<div id=“bio_ep“ style=“display: none;“>Hier kommt der Inhalt rein.</div>

Dies können wir nun mit dem gewünschten HTML Text füllen und schon haben wir ein elegantes und nicht übermäßig doll nervendes Exit-Intent-Popup.

Ich wünsche euch viel Spaß und natürlich Erfolg mit diesem Skript. Wenn es euch gefällt, hinterlasst mir einen Kommentar und teilt diese Seite kräftig. Den Tipp kann ganz sicher jeder gebrauchen, der eine eigene erfolgsorientierte Webseite betreibt!

3 comments

  1. Leider funktioniert das bei mir nicht, obwohl ich alles genauso gemacht habe. Die Box die erst beim Verlassen der Seite auftauchen soll ist schon da wenn ich die Seite öffne.

    • Hallo Manuel,

      Danke für Deinen Hinweis. Ich habe eine kleine Korrektur vorgenommen: <div id=“bio_ep“ style=“display: none;“>

      Bitte ergänze style=“display: none;“ . Dies schaltet die Box initial aus.

      Viele Grüße,
      Dirk

  2. Vielen Dank! Genau das habe ich gesucht.
    Einen kleinen Schönheitsfehler produiert der FF allerdings: gebe ich in m/einer z.B. in einem Email-Feld m/eine Mailadresse an, schlägt mir FF eine Auswahl bereits eingegebener Mailadressen vor. Wähle ich eine von diesen aus, interpretiert das Script das als ‚Verlassen der Seite‘ und zeigt das ‚Abschieds-Popup‘.
    Ok, in meinem Browser kann ich die ‚Vorshläge‘ abschalten … aber nicht in dem der Seitenbesucher.
    Irgendeine Idee für einen Workaround?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.