CleverPush über einen eigenen Button in Thrive Architect triggern

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 Thrive Architect CSS-Klassen und IDs eintragen.

thrive architect html attributes

Die HTML Attribute können für jedes Element in Thrive Architect vergeben werden.

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:

  1. Einen Button in Thrive Architect erstellen und diesen mit dem Optinfenster von CleverPush "verlinken".
  2. 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.
  3. Das Optinfenster von CleverPush 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", was für "CleverPush Button" steht. Wie diese ID heißt ist egal. Wichtig ist nur, dass sie nur ein einziges Mal auf der gesamten Landingpage vorkommt!

thrive architect html attributes cpbtn

Die ID "cpbtn" wurde dem Button-Element gegeben.

Schritt 2 - Eine Prise JavaScript

Im zweiten Schritt müssen wir nun unsere Überlegungen aus der Aufgabenstellung in ein bisschen JavaScript-Code umsetzen.

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 CleverPush, dass das Optinfenster in jedem Fall geöffnet werden soll. Selbst 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.

Eine coole Idee, wie ich finde.

Übrigens, solche kleinen Gimmicks setzen wir immer wieder für unsere Business Hosting Kunden um. Falls du also in deinem Unternehmen WordPress nutzt und immer einen kompetenten Ansprechpartner an deiner Seite haben möchtest, was das Hosting und die Technik drumrum betrifft, dann informiere dich über unser Business Hosting. ;)

Und, was sagst du zu dieser Lösung? Würdest du es genauso wie unser Kunde machen und es vor einem Webinar einsetzen? Oder hast du eine ganz andere Idee? Schreib's uns in die Kommentare!

Über den Autor

Paul ist Gründer, Gesellschafter und Geschäftsführer der GoSuccess GmbH. Er gründete bereits mit 16 Jahren sein erstes Unternehmen, welches sich vorwiegend mit Grafik- und Webdesign beschäftigte. Anschließend folgte auch die Entwicklung und Vermarktung von (eigenen) Webseiten. Sein Tech-Unternehmen hat sich darauf spezialisiert smarte IT-Lösungen für Online-Unternehmen zu entwickeln. Dazu gehören u.a. das Programmieren von individueller Software sowie der Vertrieb von Eigenentwicklungen als SaaS oder WordPress Plugin. Darüber hinaus hat die GoSuccess GmbH auch ein exzellentes Webhosting im Angebot, welches sich an KMU richtet. Während seiner Selbstständigkeit hat Paul auch eine Berufsausbildung absolviert, studiert, geheiratet und eine Familie gegründet.

Paul Gossen

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
>