Dieser Leitfaden erklärt, wie Sie JavaScript-Ereignislistener verwenden, um auf Besucherinteraktionen mit Omnisend-Formularen zu reagieren.Mit Ereignislistenern können Sie:
⚠️ Wichtig: Ereignislistener funktionieren bei Pop-ups, Flyouts und eingebetteten Formularen.Sie werden derzeit nicht auf Omnisend-Startseiten unterstützt.
Bevor Sie beginnen
Der Omnisend-JavaScript-Snippet muss bereits auf Ihrer Website installiert sein. Ohne ihn wird das
omnisendForms-Ereignis nicht ausgelöst, und Ihr Listener wird niemals ausgeführt.Auf Shopify und WooCommerce wird der Snippet automatisch hinzugefügt.Fügen Sie es manuell vor dem schließendenDie Markierung auf jeder Seite, auf der Ihr Formular erscheint.Sie benötigen nur einen Snippet pro Seite. Ein Omnisend-Skript aktiviert alle Formulare, das Tracking und das Ereignis-Listening. Wenn Sie sowohl ein eingebettetes Formular als auch einen Ereignislistener auf derselben Seite haben, deckt ein einzelner Snippet beides ab.
Für die Google Analytics Integration: Ihr GA4
Das gtag-Skript muss bereits auf der Seite geladen werden, bevor der Omnisend-Ereignislistener ausgelöst wird.Wenngtag nicht vorhanden ist, wenn der Listener ausgeführt wird, wird das GA4-Ereignis nicht gesendet.
Formularereignisse
Omnisend-Formulare lösen ein Ereignis namens omnisendForms im window-Objekt aus, wann immer es Aktivitäten auf einem Formular gibt.Das folgende Beispiel zeigt die Ereignisnutzlast
const event = new CustomEvent("omnisendForms", {
detail: {
eventName: 'submit',
brandID: 'F12345',
form: {
id: 'F12345',
name: 'F12345',
displayType: 'popup',
versionID: 'F12345',
versionName: 'F12345',
},
formValues: {
emailField: '[email protected]',
phoneNumberCountryCodeField: 'US',
phoneNumberField: '11111111',
firstName: 'Name',
lastName: 'LastName',
//... any other form value
}
}
});
window.dispatchEvent(event);Formularereignistypen
Das type-Feld im Ereignisobjekt kann eines dieser sieben verschiedenen Ereignisse sein:
view – wird ausgelöst, wenn ein Pop-up, Flyout oder eingebettetes Formular zunächst auf einer Seite angezeigt wird.interaction – wird einmal ausgelöst, wenn der Benutzer mit dem Formular interagiert (zum Beispiel ein Eingabefeld auswählt).submit – wird einmal ausgelöst, wenn ein Besucher die primäre Conversion-Aktion (zum Beispiel die erste E-Mail- oder SMS-Anmeldung) abschließt.close – wird ausgelöst, wenn ein Besucher das Formular schließt.stepView – wird jedes Mal ausgelöst, wenn ein Schritt eines mehrstufigen Formulars angezeigt wird; kann mehrmals pro Formular ausgelöst werden.stepInteraction – wird einmal pro Schritt ausgelöst, wenn der Benutzer mit einem mehrstufigen Formular interagiert.stepSubmit – wird jedes Mal ausgelöst, wenn ein Schritt eines mehrstufigen Formulars eingereicht wird; kann mehrmals pro Formular ausgelöst werden.
Wählen Sie den Ereignistyp basierend auf Ihren spezifischen Tracking-Anforderungen.Für allgemeine Formularanalysen, wie das Verfolgen von Formularübermittlungen in Google Analytics, verwenden Sie submit – es wird nur einmal pro Formular ausgelöst.Für mehrstufige Formulare erfassen Sie auch Schritt-Daten mit stepSubmit.
Schrittereignisse
Schrittereignisse werden nur mit mehrstufigen Formularen ausgelöst.Das stepSubmit-Ereignis wird ausgelöst, wann immer ein Schritt eingereicht wird und kann mehrmals für dasselbe Formular ausgelöst werden.Für ein mehrstufiges Formular wird das submit-Ereignis einmal pro Formular ausgelöst, nachdem alle Schritte abgeschlossen sind.
Weitere Ereignisdetails
Zusätzlich zum Ereignistyp enthält das Ereignisdetailobjekt:
brandID – die alphanumerische ID, die Ihre Marke in Omnisend eindeutig identifiziert.step – der Schritt, in dem das Ereignis aufgetreten ist.Anwendbar nur für mehrstufige Formulare.form – Daten, die mit dem Formular verbunden sind, einschließlich:id – die alphanumerische ID, die das Formular eindeutig identifiziert.name – der Name des Formulars.displayType – der Anzeigetyp des Formulars (Pop-up, Flyout oder eingebettet).versionId – die alphanumerische ID, die eine A/B-Formularversion eindeutig identifiziert.versionName – der Name der A/B-Formularversion.
formValues – alle Formularfelder und deren übermittelte Werte, einschließlich:emailField,firstName,lastName,phoneNumberCountryCodeField,phoneNumberField und jedes andere benutzerdefinierte Formularfeld.
Benutzerdefiniertes JavaScript bei Ereignisereignissen ausführen: Beispiel für einen Ereignislistener
Das Folgende ist das Standardformat für einen benutzerdefinierten Ereignislistener für Omnisend-Formularereignisse.Ersetzen Sie view durch einen beliebigen Ereignistyp, der im Abschnitt Formularereignistypen oben aufgeführt ist, und ersetzen Sie // Custom JS durch den Code, der ausgeführt werden soll, wenn das Ereignis ausgelöst wird.
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
// Custom JS
}
});
</script>
Um den Zeitstempel des Ereignisses in Ihrem eigenen JavaScript-Code zu verwenden, verwenden Sie e.timeStamp.
Wo Sie dieses Skript hinzufügen sollten:
Shopify: Fügen Sie den Code in die Fußzeile oder die Layout-Datei Ihres Themas ein (zum Beispiel,
theme.liquid), vor dem schließendenDie Markierung, damit sie auf jeder Seite geladen wird, auf der das Formular erscheinen kann.WordPress / WooCommerce: Fügen Sie es mit einem benutzerdefinierten HTML-Block in Ihrem Seiteneditor hinzu oder fügen Sie es in die Fußzeile Ihrer Theme-Datei ein, bevor
.Einfaches HTML: Fügen Sie es vor dem schließenden
Die Markierung auf jeder Seite, auf der das Formular erscheint.
Implementieren Sie Google Analytics-Tracking bei Formularereignissen
Verwenden Sie den folgenden Snippet, um jeden Omnisend-Formularereignistyp als Ereignis in Google Analytics (GA4) zu verfolgen.
Hinweis: Ihr GA4gtag-Initialisierungsskript muss bereits auf der Seite geladen werden, bevor dieser Snippet ausgeführt wird.Wenn gtag nicht vorhanden ist, wenn der Listener ausgelöst wird, werden die GA4-Ereignisse nicht aufgezeichnet.
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
gtag('event', 'omnisend_form_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'interaction') {
gtag('event', 'omnisend_form_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'submit') {
gtag('event', 'omnisend_form_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'close') {
gtag('event', 'omnisend_form_close', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepView') {
gtag('event', 'omnisend_form_step_view', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepInteraction') {
gtag('event', 'omnisend_form_step_interaction', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
if (e.detail.type == 'stepSubmit') {
gtag('event', 'omnisend_form_step_submit', { form_name: e.detail.form.name, form_id: e.detail.form.id });
}
});
</script>
Hinweis: Die Ereignisnamen in dergtag('event', ...) Aufruf – zum Beispiel,omnisend_form_submit – können in alles umbenannt werden, was in Google Analytics erscheinen soll, wienewsletter_signup oderpopup_completed.Der Name liegt ganz bei Ihnen.
FAQ
Muss ich den Ereignis-Listener zu meinem Shopify-Theme hinzufügen?
Ja. Fügen Sie den Listener-Code an einem global geladenen Ort in Ihrem Shopify-Theme ein – zum Beispiel in die Fußzeile Ihrer theme.liquid – damit er auf jeder Seite ausgeführt wird, auf der das Formular erscheinen kann.Platzieren Sie es vor der schließenden Die Markierung.
Muss das Omnisend-Plugin installiert sein, damit dies funktioniert?
Nicht unbedingt. Das Omnisend-Plugin (auf Shopify oder WooCommerce) installiert den Omnisend-JS-Snippet automatisch.Auf jeder anderen Plattform müssen Sie den Snippet manuell hinzufügen.Der Snippet selbst ist die Anforderung – nicht das Plugin.
Wie kann ich verfolgen, an welchem Schritt Besucher mein mehrstufiges Pop-up abbrechen?
Hören Sie auf das close Ereignis und lesen Sie e.detail.step.Ein Wert von 2 bedeutet, dass der Besucher das Pop-up im Schritt 2 geschlossen hat.Senden Sie dies als benutzerdefinierten Parameter in Ihrem gtag Aufruf oder protokollieren Sie es in einem anderen Analysetool.
Kann ich erfassen, welchen Button ein Besucher geklickt hat (zum Beispiel, "Ja" oder "Nein")?
Nein. Die omnisendForms Ereignis-Payload enthält keinen Button-Text.Um ein Button-Label mit Ihrem Tracking-Ereignis zu verknüpfen, kodieren Sie es manuell in Ihrem Listener-Code.
Muss ich den Omnisend-Snippet mehr als einmal für mehrere Formulare auf einer Seite hinzufügen?
Nein. Ein Snippet pro Seite reicht für alle Formulare, Tracking und Ereignis-Listener auf dieser Seite.
Haben Sie Schwierigkeiten, das herauszufinden? Nachricht an unser 24/7-Support-Team in der App oder per E-Mail[email protected]