Das Widget sendet bei verschiedenen Aktionen (zum Beispiel bei einer erfolgreichen oder gestarteten Spende) eine Nachricht an die umgebende Seite. Auf diese Nachrichten kannst du reagieren, um zum Beispiel ein eigenes Conversiontracking zu implementieren. Hier findest du die Events und ihre Daten.
Erfolgreiche Spende
Das Widget sendet nach einer erfolgreichen Spende eine postMessage an die umgebende Seite ab. Diese Nachricht kannst du abfangen und darauf reagieren und damit zum Beispiel ein eigenes Conversiontracking implementieren oder sonstige Funktionen deiner Webseite umsetzen.
Die Nachricht, die dabei versendet wird, beinhaltet ein Feld mit dem Namen data.type, welches den 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) mit seiner Buchungsnummer (internal_id, optional), die Buchungsnummer des Projekts (project_internal_id, optional), die Produkte (products) und die E-Mail-Adresse (SHA-256 gehasht). Es können zusätzlich die Kontaktdaten übertragen werden, wenn dies in den Organisationseinstellungen ("Adressdaten-Tracking erlauben") aktiviert wurde.
Beim Spendenrhythmus 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 enthalten. 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 einer Person 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 der Nutzer:innen 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
- list - Produktliste im Spendenshop
- detail - Detailansicht eines Produkts im Spendenshop
- cart - Warenkorb im Spendenshop
- download - Seite mit dem Download bei digitalen Produkten
- dataprotection und impress - Datenschutzerklärung und Impressum, wenn sie im Widget geöffnet werden
Kontaktdaten abgesendet
Wenn die Kontaktdaten nach erfolgreicher Spende abgeschickt werden, gibt es ein Event mit dem Namen contactDataSend. Dieses enthält die E-Mail-Adresse (SHA-256 gehasht). Wenn zusätzlich die Option zum Übertragen der Adressdaten in den Organisationseinstellungen ("Adressdaten-Tracking erlauben") aktiviert wurde, werden weitere Kontaktdaten der Nutzer:innen gesendet (sofern vorhanden).
- Vorname - SHA-256 gehasht
- Nachname - SHA-256 gehasht
- Straße - SHA-256 gehasht
- Stadt
- PLZ
- Land