Liebe POWERGAP Shopbetreiber,
heute möchte ich Ihnen ein weiteres Update vorstellen, das Exit Intent Popup.
Sinn und Zweck ist es Kunden, die die Seite eigentlich verlassen möchten doch noch dazu zu bewegen zum Beispiel zu kaufen oder sich zumindest ein Angebot anzusehen.
Um ein wenig zwischen den Benutzern zu unterscheiden haben wir uns für vier verschiedene Benutzertypen entschieden.
1. Unbekannter Besucher
2. Altkunde mit Bestellungen
3. Altkunde ohne Bestellungen
4. Neukunde seit heute ohne Bestellungen
Im Footer einer POWERGAP-Seite wird versucht den entsprechenden Benutzertyp herauszufinden.
Um dem Kunden dann ein entsprechendes Popup anzuzeigen habe ich vier verschiedene Banner angelegt.
Somit könnte man sogar jedem Benutzertyp ein anderes Popup anzeigen.
Hier Beispiel-Code für ein Banner, der allerdings noch angepasst werden muss:
Sie könnten zum Beispiel einen Gutschein erstellen und darauf verlinken.
Informationen zu den Parametern etc finden Sie hier unter dem Punkt "Options":
http://beeker.io/exit-intent-popup-script-tutorial
https://github.com/beeker1121/exit-intent-popup
Außerdem wird noch CSS benötigt, das unter Layout > Schriften / CSS > All (ROOT) eingefügt wird:
#bio_ep {width: 600px; height: 400px; color: #333; background-color: #fafafa; text-align: center;}
#bio_ep_content {padding: 24px 0 0 0; font-family: "Verdana";}
#bio_ep_content span:nth-child(2) {display: block; color: #f21b1b; font-size: 32px; font-weight: 600;}
#bio_ep_content span:nth-child(3) {display: block; font-size: 16px;}
#bio_ep_content span:nth-child(4) {display: block; margin: -5px 0 0 0; font-size: 16px; font-weight: 600;}
.bio_btn {display: inline-block; margin: 18px 0 0 0; padding: 7px; color: #fff; font-size: 14px; font-weight: 600; background-color: #70bb39; border: 1px solid #47ad0b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-decoration: none;}
Anschließend habe ich unter Punkt 7 in den Grundeinstellungen die verschiedenen Banner den entsprechenden Benutzertypen zugewiesen:
Damit das Ganze jetzt noch funktioniert muss unter Sonstiges > Sonstige Einstellungen die Datei "x_bioep.js" mitgeladen werden. Dazu im Javascript Dateimanager die Datei vom rechten in das linke Fenster ziehen.
Ist alles richtig eingebunden und die Einstellungen in Ordnung wird (solange Sie den delay nicht ändern) nach 5 Sekunden beim Verlassen des Fensters folgendes Popup angezeigt:
Sollte Sie dazu noch Fragen haben können Sie sich gerne bei uns melden.
heute möchte ich Ihnen ein weiteres Update vorstellen, das Exit Intent Popup.
Sinn und Zweck ist es Kunden, die die Seite eigentlich verlassen möchten doch noch dazu zu bewegen zum Beispiel zu kaufen oder sich zumindest ein Angebot anzusehen.
Um ein wenig zwischen den Benutzern zu unterscheiden haben wir uns für vier verschiedene Benutzertypen entschieden.
1. Unbekannter Besucher
2. Altkunde mit Bestellungen
3. Altkunde ohne Bestellungen
4. Neukunde seit heute ohne Bestellungen
Im Footer einer POWERGAP-Seite wird versucht den entsprechenden Benutzertyp herauszufinden.
Um dem Kunden dann ein entsprechendes Popup anzuzeigen habe ich vier verschiedene Banner angelegt.
Somit könnte man sogar jedem Benutzertyp ein anderes Popup anzeigen.
Hier Beispiel-Code für ein Banner, der allerdings noch angepasst werden muss:
<script>
bioEp.init({
html: '<div id="bio_ep_content">' +
'<img src="img/bioep_tag.png" alt="Rabatt erhalten!" />' +
'<span>HINWEIS!</span>' +
'<span>Klicken Sie auf den Button um ein besonderes Angebot zu bekommen.</span>' +
'<span>Das ist ein einmaliges Angebot!</span>' +
'<a href="#YOURURLHERE" class="bio_btn">ANGEBOT ANSEHEN</a>' +
'</div>',
css: '',
width: 600,
height: 400,
font: 'Verdana',
cookieExp: 0
});
</script>
bioEp.init({
html: '<div id="bio_ep_content">' +
'<img src="img/bioep_tag.png" alt="Rabatt erhalten!" />' +
'<span>HINWEIS!</span>' +
'<span>Klicken Sie auf den Button um ein besonderes Angebot zu bekommen.</span>' +
'<span>Das ist ein einmaliges Angebot!</span>' +
'<a href="#YOURURLHERE" class="bio_btn">ANGEBOT ANSEHEN</a>' +
'</div>',
css: '',
width: 600,
height: 400,
font: 'Verdana',
cookieExp: 0
});
</script>
Sie könnten zum Beispiel einen Gutschein erstellen und darauf verlinken.
Informationen zu den Parametern etc finden Sie hier unter dem Punkt "Options":
http://beeker.io/exit-intent-popup-script-tutorial
https://github.com/beeker1121/exit-intent-popup
Außerdem wird noch CSS benötigt, das unter Layout > Schriften / CSS > All (ROOT) eingefügt wird:
#bio_ep {width: 600px; height: 400px; color: #333; background-color: #fafafa; text-align: center;}
#bio_ep_content {padding: 24px 0 0 0; font-family: "Verdana";}
#bio_ep_content span:nth-child(2) {display: block; color: #f21b1b; font-size: 32px; font-weight: 600;}
#bio_ep_content span:nth-child(3) {display: block; font-size: 16px;}
#bio_ep_content span:nth-child(4) {display: block; margin: -5px 0 0 0; font-size: 16px; font-weight: 600;}
.bio_btn {display: inline-block; margin: 18px 0 0 0; padding: 7px; color: #fff; font-size: 14px; font-weight: 600; background-color: #70bb39; border: 1px solid #47ad0b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; border-radius: 0; text-decoration: none;}
Anschließend habe ich unter Punkt 7 in den Grundeinstellungen die verschiedenen Banner den entsprechenden Benutzertypen zugewiesen:
Damit das Ganze jetzt noch funktioniert muss unter Sonstiges > Sonstige Einstellungen die Datei "x_bioep.js" mitgeladen werden. Dazu im Javascript Dateimanager die Datei vom rechten in das linke Fenster ziehen.
Ist alles richtig eingebunden und die Einstellungen in Ordnung wird (solange Sie den delay nicht ändern) nach 5 Sekunden beim Verlassen des Fensters folgendes Popup angezeigt:
Sollte Sie dazu noch Fragen haben können Sie sich gerne bei uns melden.