Erfolgreiche Spende
Das Widget sendet nach einer erfolgreichen Spende eine postMessage an die umgebene Seite ab. Diese Nachricht können Sie abfangen und darauf reagieren und damit zum Beispiel ein eigenes Conversiontracking implementieren oder sonstige Funktionen Ihrer Webseite umsetzen.
Die Nachricht die dabei versendet wird beinhaltet ein Feld mit dem Namen data.type, welches des Wert donationFinished hat. Ein einfacher EventListener könnte dabei so aussehen:
window.addEventListener("message", function(event){ if(event && event.data && event.data.type === "donationFinished") { console.log("GOT MESSAGE", event.data.type, event.data.value); } } , false);
Im Feld data.value werden dabei einige Daten der Spende übertragen. Dazu gehört der Spendenbetrag (amount), die Zahlungsart (paymentMethod), der Rhythmus (rythm und recurringRythm), die TransactionId (transaction_guid), das Spendenziel (target) und die Produkte (products).
Beim Spendenrhytmus wird im Feld rythm entweder 'one_time' oder 'recurring' übergeben, im Feld recurringRythm die Werte 'monthly', 'quarterly', 'halfyearly' oder 'yearly'.
Die Produkte im Feld products sind nur in Spendenshop- und Spendenurkunden-Projekten enhalten. Diese enthalten ein Array mit den Feldern product, internal_id, count und price. Im Feld product ist der Name des Produkts enthalten.
Spende gestartet
Erste Interaktion
Bei der ersten Interaktion eines Spenders mit dem Widget wird ebenfalls ein Event gesendet. Dieses hat den Namen firstInteraction. Eine Erste Interaktion liegt vor bei einem Klick oder Fokus auf ein beliebiges Feld im Widget.
Seitenwechsel
Darüber hinaus wird auch bei einem Wechsel zwischen den Steps eine Nachricht gesendet. Diese ist analog zum Beispiel oben, nur dass das Feld data.type dabei den Wert stepChange hat.
window.addEventListener("message", function(event){
if(event && event.data && event.data.type === "stepChange") {
console.log("Aktueller Step", event.data.value.step);
}
} , false);
Im Feld event.data.value befindet sich dabei ein Attribut step. Dieses enthält den Namen des Steps in dem das Widget aktuell ist. Je nach Konfiguration und Art des Widgets und der aktuellen Bildschirmgröße des Nutzers ist die Reihenfolge der Steps unterschiedlich und nicht immer werden alle durchlaufen:
- start - Die erste und initiale Seite im Widget
- payment-select - Auswahl des Zahlverfahrens (nur mobile Screens)
- payment - Eingabe der Payment Daten
- contact - Eingabe der Kontaktdaten NACH der Spende
- contact-mandatory - Eingabe der Kontaktdaten VOR der Spende
- thankyou - Dankeseite nach der erfolgreichen Spende
- iframe - Eingabe der Kreditkartendaten
- banktransfer - Anzeige der Bankdaten bei Zahlverfahren Überweisung
- end - Dankeseite nach Eingabe der Kontaktdaten