Gibt es ein Event wenn eine Spende erfolgreich war oder gestartet wurde?

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) und das Spendenziel (target). Beim Spendenrhytmus wird im Feld rythm entweder 'one_time' oder 'recurring' übergeben, im Feld recurringRythm die Werte 'monthly', 'quarterly', 'halfyearly' oder 'yearly'.

Spende gestartet

Eine Spende wird gestartet, wenn die Nutzer*innen auf den letzten Button im Spendenablauf (Standardtext: "Jetzt X € Spenden") klicken. Je nach Zahlverfahren erfolgt eine Weiterleitung zu externen Dienstleistern oder die wird direkt beendet. Der Name dieses Events lautet: donationStarted. Die restlichen übergebenen Daten sind wie beim Event donationFinished gesetzt.

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