Ich stand vor dem Problem dass ein Kunde unbedingt seine Webseitenbesucher warnen wollte, dass sie die Webseite verlassen. Er hat gehört, dass Kunden davon abgehalten werden müssen um die Conversion-Rate hoch zu halten. Ich habe das auch schon öfters gesehen und finde das immer sehr mühsam. Aber ihr wisst ja sicher wie das ist – Kunden wunsch wird manchmal halt umgesetzt auch wenn man es nicht unbedingt will.
Also habe ich dieses Script geschrieben.
Video
Man gibt einfach eine externe URL in der Webseite ein.
Mit diesem Befehl wird dann automatisch gecheckt wie der Hostname der aktuellen Seite ist (zb chefblogger.me)
1 | window.location.host |
Und hier wird dann gecheckt ob Link die aktuelle URL der Webseite vorkommt – wenn das nicht der Fall ist, dann ist es ein externer Link und der Rest des Script wird abgespielt.
1 | a.test(this.href) |
Also man muss hier die externen Links in einer Webseite nicht noch speziell erweitern und somit kann man das Script auch später noch einbauen.
Wenn ihr also nachher CSS un das Javascript eingebaut habt, dann läuft das Script.
Wie ihr sehen könnt ist im JS & CSS der Style des Popup definiert
HTML
1 | <a href="https://www.google.com">Google</a> |
CSS
1 2 3 4 5 6 7 8 9 10 | /* external link */
#popup-warning {
font-family: Arial, sans-serif;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
#popup-warning button {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
} |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
var link = this.href;
// Füge das halbtransparente Overlay hinzu
$('body').append('<div id="overlay-background" style="position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); z-index:9998;"></div>');
// Füge das Popup hinzu
$('body').append('<div id="popup-warning" style="position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:#fff; padding:20px; border:1px solid #000; z-index:9999;">Du bist gerade dabei die Seite zu verlassen, willst du das wirklich?<br><br><button id="continue">Weiter</button> <button id="cancel">Stop</button></div>');
// Aktionen für die Buttons
$('#continue').click(function() {
window.open(link, '_blank');
$('#popup-warning').remove();
$('#overlay-background').remove(); // Entferne das Overlay
});
$('#cancel').click(function() {
$('#popup-warning').remove();
$('#overlay-background').remove(); // Entferne das Overlay
});
});
}
});
}); |
0 Kommentare