Vor kurzem wollte einer unserer Kunden einen Button auf seine Landingpage einbinden, mit dem Besucher Push-Benachrichtigungen aktivieren können sollten.
Die Push-Benachrichtigungen wurden über CleverPush realisiert. Die Landingpage wurde mit Thrive Architect erstellt.
Und jetzt kamen wir ins Spiel. 🙂
Da ich weiß, dass es noch weitere Kunden und Unternehmen da draußen gibt, die CleverPush nutzen, möchte ich in diesem Beitrag erklären wie wir den Wunsch des Kunden realisiert haben.
Kannst du garantiert auch selber nachmachen. 😉
HTML Attributes in Thrive Architect
Glücklicherweise macht uns Thrive Architect in solchen Situationen das Leben sehr einfach, denn mit den „HTML Attributes“ können wir für jedes Element in CSS-Klassen und IDs eintragen.
Die Aufgabenstellung
Bevor wir jetzt aber sofort loslegen und irgendwas auf der Landingpage des Kunden verändern, überlegen wir uns kurz was der Kunde eigentlich haben möchte.
Der Kunde möchte:
- Einen Button in Thrive Architect erstellen und diesen mit dem Optinfenster von CleverPush „verlinken“.
- Auf den Button klicken, damit sich das Optinfenster öffnet. Dabei müssen wir bedenken, dass der Button nichts anderes tut als das wofür er vorgesehen ist. Wenn der Button also versehentlich verlinkt wurde, dann darf nach dem Klick nicht auf die verlinkte URL weitergeleitet werden. Die normale Button-Funktion muss also beim Klick unterdrückt werden.
- Das Optinfenster muss auch dann angezeigt werden, wenn der Besucher die Push-Benachrichtigungen ggf. vorher schonmal untersagt hat!
Schritt 1 – Dem Button eine ID geben
Der erste Schritt ist einfach und schnell erledigt. Wir markieren in Thrive Architect den Button und geben ihm die ID „cpbtn“. Wie diese ID heißt ist egal. Wichtig ist nur, dass sie nur ein einziges Mal auf der gesamten Landingpage vorkommt!
Schritt 2 – Eine Prise JavaScript
Im zweiten Schritt müssen wir nun unsere Überlegungen aus der Aufgabenstellung in ein bisschen JavaScript-Code umsetzen.
Die Entwickler-Doku hilft uns dabei.
var CleverPushButton = document.getElementById("cpbtn"); // cpbtn = ID des Buttons
CleverPushButton.addEventListener("click", function(e) {
e.preventDefault();
CleverPush = window.CleverPush || [];
CleverPush.push(['triggerOptIn', true]);
});Die Erklärung
In der ersten Zeile suchen wir nach dem Element mit der ID „cpbtn“ auf der Landingpage und geben dem Element den Namen „CleverPushButton“.
In der dritten Zeile warten wir nun darauf, bis jemand auf den Button klickt und hindern in Zeile 4 mit e.preventDefault(); den Button daran das zu tun, was er normalerweise gerne tun würde, wie z.B. auf etwas verlinken.
Und schließlich vollbringen wir das Wunder und sagen CleverPush, dass es doch bitte das Optinfenster öffnen soll. Mit dem zweiten Paramter „true“ sagen wir, dass das Optinfenster in jedem Fall geöffnet werden soll. Auch dann, wenn der Besucher es zuvor abgelehnt hat Push-Benachrichtigungen zu erhalten.
Was unser Kunde damit gemacht hat
Vielleicht interessiert dich ja noch wofür der Kunde diese Lösung gebraucht hat. 🙂
Er hat es auf einer Webinar-Bestätigungsseite eingebaut, um die Webinarteilnehmer kurz vor seinem Webinar über eine Push-Benachrichtigung daran zu erinnern, dass das Webinar gleich startet.