Ce guide explique comment utiliser les écouteurs d'événements JavaScript pour répondre aux interactions des visiteurs avec les formulaires Omnisend.Avec les écouteurs d'événements, vous pouvez :
⚠️ Important : Les écouteurs d'événements fonctionnent sur les pop-ups, les flyouts et les formulaires intégrés.Ils ne sont pas pris en charge sur les pages de destination Omnisend pour le moment.
Avant de commencer
Le snippet JavaScript d'Omnisend doit déjà être installé sur votre site. Sans cela, le
l'événement omnisendForms ne se déclenchera pas, et votre écouteur ne s'exécutera jamais.Sur Shopify et WooCommerce, le snippet est ajouté automatiquement.Sur toute autre plateforme, ajoutez-le manuellement avant la fermeturetag sur chaque page où votre formulaire apparaît.Vous n'avez besoin que d'un seul extrait par page. Un script Omnisend permet tous les formulaires, le suivi et l'écoute des événements. Si vous avez à la fois un formulaire intégré et un écouteur d'événements sur la même page, un seul extrait couvre les deux.
Pour l'intégration de Google Analytics : Votre GA4
le script gtag doit déjà être chargé sur la page avant que l'écouteur d'événements Omnisend ne se déclenche.Sigtag n'est pas présent lorsque l'écouteur s'exécute, l'événement GA4 ne sera pas envoyé.
Événements de formulaire
Les formulaires Omnisend déclenchent un événement nommé omnisendForms sur l'objet window chaque fois qu'il y a une activité sur un formulaire.L'exemple ci-dessous montre la charge utile de l'événement
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);Types d'événements de formulaire
Le champ type dans l'objet événement peut être l'un de ces sept événements distincts :
vue – se déclenche lorsqu'une pop-up, un volet ou un formulaire intégré s'affiche initialement sur une page.interaction – se déclenche une fois lorsque l'utilisateur interagit avec le formulaire (par exemple, sélectionne un champ de saisie).soumettre – se déclenche une fois lorsqu'un visiteur complète l'action de conversion principale (par exemple, l'abonnement initial par Email ou SMS).close – se déclenche lorsqu'un visiteur ferme le formulaire.stepView – se déclenche chaque fois qu'une étape d'un formulaire multi-étapes est affichée ; peut se déclencher plusieurs fois par formulaire.stepInteraction – se déclenche une fois par étape lorsque l'utilisateur interagit avec un formulaire multi-étapes.stepSubmit – se déclenche chaque fois qu'une étape d'un formulaire multi-étapes est soumise ; peut se déclencher plusieurs fois par formulaire.
Choisissez le type d'événement en fonction de vos besoins spécifiques en matière de suivi.Pour des analyses générales de formulaire telles que le suivi des soumissions de formulaire dans Google Analytics, utilisez submit – cela ne se déclenche qu'une seule fois par formulaire.Pour les formulaires multi-étapes, capturez également les données d'étape en utilisant stepSubmit.
Événements d'étape
Les événements d'étape ne se déclenchent qu'avec des formulaires multi-étapes.L'événement stepSubmit se déclenche chaque fois qu'une étape est soumise et peut se déclencher plusieurs fois pour le même formulaire.Pour un formulaire multi-étapes, l'événement submit se déclenche une fois par formulaire, après que toutes les étapes sont complètes.
Autres détails sur l'événement
En plus du type d'événement, l'objet de détail de l'événement contient :
brandID – l'ID alphanumérique qui identifie de manière unique votre marque dans Omnisend.step – l'étape dans laquelle l'événement s'est produit.Applicable uniquement aux formulaires multi-étapes.form – données relatives au formulaire, y compris :id – l'ID alphanumérique qui identifie de manière unique le formulaire.name – le nom du formulaire.displayType – le type d'affichage du formulaire (pop-up, flyout ou intégré).versionId – l'ID alphanumérique qui identifie de manière unique une version de formulaire A/B.versionName – le nom de la version de formulaire A/B.
formValues – tous les champs de formulaire et leurs valeurs soumises, y compris :emailField,firstName,lastName,phoneNumberCountryCodeField,phoneNumberField, et tout autre champ de formulaire personnalisé.
Exécuter un JavaScript personnalisé lors de l'occurrence d'un événement : Exemple d'écouteur d'événements
Le format standard pour un écouteur d'événements personnalisé pour les événements de formulaire Omnisend est le suivant.Remplacez view par tout type d'événement répertorié dans la section Types d'événements de formulaire ci-dessus, et remplacez // Custom JS par le code qui doit s'exécuter lorsque l'événement se déclenche.
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
// Custom JS
}
});
</script>
Pour utiliser l'horodatage de l'événement dans votre propre code JavaScript, utilisez e.timeStamp.
Où ajouter ce script :
Shopify : Collez le code dans le pied de page ou le fichier de mise en page de votre thème (par exemple,
theme.liquid), avant la fermeturetag, afin qu'il se charge sur chaque page où le formulaire peut apparaître.WordPress / WooCommerce : Ajoutez-le en utilisant un bloc HTML personnalisé dans votre éditeur de page, ou collez-le dans le fichier footer de votre thème avant
.HTML simple : Collez-le avant la fermeture
tag sur chaque page où le formulaire apparaît.
Implémenter le suivi Google Analytics sur les événements de formulaire
Utilisez le snippet suivant pour suivre chaque type d'événement de formulaire Omnisend en tant qu'événement dans Google Analytics (GA4).
Remarque : Votre script d'initialisation GA4le script d'initialisation gtag doit déjà être chargé sur la page avant que ce snippet ne s'exécute.Sigtag n'est pas présent lorsque l'écouteur se déclenche, les événements GA4 ne seront pas enregistrés.
<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>
Remarque : Les noms des événements dans leappel gtag('event', ...) – par exemple,omnisend_form_submit – peut être renommé en tout ce que vous voulez apparaître dans Google Analytics, commenewsletter_signup oupopup_completed.Le nom dépend entièrement de vous.
FAQ
Dois-je ajouter l'écouteur d'événements à mon thème Shopify ?
Oui. Collez le code de l'écouteur dans un emplacement chargé globalement dans votre thème Shopify – par exemple, le pied de page de votre theme.liquid – afin qu'il s'exécute sur chaque page où le formulaire peut apparaître.Placez-le avant la balise de fermeture .
Le plugin Omnisend doit-il être installé pour que cela fonctionne ?
Pas nécessairement. Le plugin Omnisend (sur Shopify ou WooCommerce) installe automatiquement le snippet JS d'Omnisend.Sur toute autre plateforme, vous devez ajouter le code manuellement.Le code lui-même est la condition requise – pas le plugin.
Comment puis-je suivre à quelle étape les visiteurs abandonnent mon pop-up multi-étapes ?
Écoutez l'événement close et lisez e.detail.step.Une valeur de 2 signifie que le visiteur a fermé le pop-up lors de l'étape 2.Envoyez cela comme un paramètre personnalisé dans votre appel gtag ou enregistrez-le dans tout autre outil d'analyse.
Puis-je capturer quel bouton un visiteur a cliqué (par exemple, "Oui" ou "Non") ?
Non. Le payload de l'événement omnisendForms n'inclut pas le texte du bouton.Pour associer une étiquette de bouton avec votre événement de suivi, codez-la manuellement dans votre code d'écouteur.
Dois-je ajouter le code Omnisend plus d'une fois pour plusieurs formulaires sur une page ?
Non. Un code par page suffit pour tous les formulaires, le suivi et les écouteurs d'événements sur cette page.
Vous avez du mal à comprendre cela ? Envoyez un message à notre équipe de support 24/7 dans l'application ou par Email[email protected].