Zum Hauptinhalt springen
Heyflow Events API

[Experte] Arbeite mit Events, die dein Heyflow in seinem Lebenszyklus emittiert.

Heyflow avatar
Verfasst von Heyflow
Vor über 2 Jahren aktualisiert

Die Heyflow Events API veröffentlicht den Lebenszyklus deines Heyflows, damit du mit benutzerdefiniertem JavaScript damit interagieren kannst, wie hier:

window.addEventListener('heyflow-screen-view', (event) => {
console.log('heyflow screen view:', event.detail.screenName);
});

wobei heyflow-screen-view der Event Name des Lebenszyklusereignisses ist.

Diese Events API ist besonders nützlich, wenn du dein eigenes, granulares Tracking implementieren möchtest oder wenn du mit den Daten deines Heyflows client-seitig interagieren möchtest.

Dein Heyflow gibt die folgenden Ereignisse pro Lebenszyklusereignis aus:

Event Name

Lebenszyklusereignis

Datenübergabe

heyflow-init

Wenn der Heyflow geladen wird.

flowID

heyflow-exit

Wenn das Fenster in dem der Heyflow lebt, geschlossen wird.

Dieses Event basiert auf dem nativen pagehide und is somit leider nicht durchweg verlässlich.

flowID

heyflow-change

Wenn die Daten des Heyflows geändert werden, z.B. durch Nutzereingabe.

fields,

fieldsSimple

heyflow-submit

Wenn der Heyflow abgeschickt wird.

screenID,

screenName,

fields,

fieldsSimple

heyflow-screen-view

Wenn ein Screen/Seite des Heyflows besucht wird.

screenName,

screenID,

screenIndex,

previousScreenName

heyflow-screen-leave

Wenn von einer Screen/Seite des Heyflows weg navigiert wird.

screenName

heyflow-button-click

Wenn es Button geklickt wird.

customEventName,

customEventLabel

heyflow-input-click

Wenn eine Option einer Mehrfachauswahl geklickt wird.

customEventName,

customEventLabel

fields und fieldsSimple

fields und fieldsSimple beinhalten alle Informationen deines Heyflow in jeweils unterschiedlichen Struktur.

fieldsSimple ist ein 'Schlüssel-Wert' Paar, wobei der Schlüssel das Label des Feldes ist und der Wert die Nutzereingabe als Text (string).

fieldsSimple: {
Choose your housing type: "Apartment",
Email: "[email protected]",
Consent: "✔",
}

Wenn ein Feld mehrere Werte enthält, wie bei einem Multiple-Choice-Block, werden die Werte durch ein Komma (,) getrennt.

Das Attribut fields ist etwas ausführlicher. Es ist ein Array mit allen Feldern. Ein einzelnes Feld enthält die folgenden Informationen:

{
// Jeder Block hat eine statische ID:
"id": "mco-fb5cd9b5",
// Das Label ist entweder das System Label oder Block Label, das du
// definiert hast:
"label": "Please choose an option",
// values enthält alle Felder mit Nutzereingabe in einem Array. Sollte
// nur ein Wert spezifiziert werden könnnen, wie z.B. bei einem
// Eingabefeld, so enthält das Array immer ein Objekt. Solltest
// mehrere Antworten gegeben werden können, wie z.B. bei einer
// Mehrfachauswahl, so kann das Array mehrere Objekte beinhalten:
"values": [
{
"name": "mco-fb5cd9b5",
"answer": "Option 2 label"
}
],
// value enthält alle Antworten des values-Attributs
// (values[n].answers), separiert durch ein Komma (,):
"value": "Option 2 label",
// Die Variable, die du für diesen Block spezifiziert hast:
"variable": "mc-24115746",
// Ein Boolean Wert der anzeigt, ob das Feld als sensitiv markiert ist
"sensitive": false,
// Die ID des Screens auf dem sich das Feld befindet:
"screenID": "start",
// Der name des Screens auf dem sich der Block befindet:
"screenName": "start"
}

Hat dies deine Frage beantwortet?