Questa guida spiega come utilizzare i listener di eventi JavaScript per rispondere alle interazioni dei visitatori con i moduli di Omnisend. Con i listener di eventi, puoi:
⚠️ Importante: I listener degli eventi funzionano su pop-up, flyout e moduli incorporati. Non sono supportati sulle pagine di destinazione di Omnisend in questo momento.
Prima di iniziare
Il frammento JavaScript di Omnisend deve già essere installato sul tuo sito. Senza di esso, il
l'evento omnisendForms non verrà attivato e il tuo listener non verrà mai eseguito. Su Shopify e WooCommerce, il frammento viene aggiunto automaticamente. Su qualsiasi altra piattaforma, aggiungilo manualmente prima della chiusuratag su ogni pagina in cui appare il tuo modulo.Hai bisogno di un solo snippet per pagina. Un script Omnisend abilita tutti i moduli, il tracciamento e l'ascolto degli eventi. Se hai sia un modulo incorporato che un ascoltatore di eventi sulla stessa pagina, un singolo snippet copre entrambi.
Per l'integrazione di Google Analytics: Il tuo GA4
lo script gtag deve già essere caricato sulla pagina prima che si attivi il listener dell'evento Omnisend. Segtag non è presente quando l'ascoltatore viene eseguito, l'evento GA4 non verrà inviato.
Eventi del modulo
I moduli Omnisend attivano un evento chiamato omnisendForms sull'oggetto window ogni volta che c'è attività su un modulo. L'esempio qui sotto mostra il payload dell'evento
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);Tipi di Evento del Modulo
Il campo type all'interno dell'oggetto evento può essere uno di questi sette eventi distinti:
view – si attiva quando un pop-up, flyout o modulo incorporato viene visualizzato inizialmente su una pagina.interazione – si attiva una sola volta quando l'utente interagisce con il modulo (ad esempio, seleziona un campo di input).invia – si attiva una sola volta quando un visitatore completa l'azione di conversione primaria (ad esempio, l'iscrizione iniziale a Email o SMS).chiudi – si attiva quando un visitatore chiude il modulo.stepView – si attiva ogni volta che viene visualizzato un passaggio di un modulo a più fasi; può attivarsi più volte per modulo.stepInteraction – si attiva una volta per passo quando l'utente interagisce con un modulo multi-step.stepSubmit – si attiva ogni volta che un passo di un modulo a più fasi viene inviato; può attivarsi più volte per modulo.
Scegli il tipo di evento in base alle tue esigenze di tracciamento specifiche. Per l'analisi generale dei moduli, come il tracciamento delle invii dei moduli in Google Analytics, utilizzare submit – si attiva solo una volta per modulo. Per i moduli a più passaggi, cattura anche i dati del passaggio utilizzando stepSubmit.
Eventi di Passo
Gli eventi di passo si attivano solo con moduli a più passaggi. L'evento stepSubmit viene attivato ogni volta che un passo viene inviato e può attivarsi più volte per lo stesso modulo. Per un modulo a più passaggi, l'evento submit si attiva una sola volta per modulo, dopo che tutti i passaggi sono stati completati.
Altri dettagli dell'evento
Oltre al tipo di evento, l'oggetto di dettaglio dell'evento contiene:
brandID – l'ID alfanumerico che identifica univocamente il tuo marchio in Omnisend.passo – il passo in cui si è verificato l'evento. Applicabile solo per moduli a più passaggi.modulo – dati relativi al modulo, inclusi:id – l'ID alfanumerico che identifica univocamente il modulo.nome – il nome del modulo.displayType – il tipo di visualizzazione del modulo (pop-up, flyout o incorporato).versionId – l'ID alfanumerico che identifica univocamente una versione del modulo A/B.versionName – il nome della versione del modulo A/B.
formValues – tutti i campi del modulo e i loro valori inviati, inclusi:emailField,nomecognome,phoneNumberCountryCodeField,phoneNumberField, e qualsiasi altro campo modulo personalizzato.
Esegui JavaScript personalizzato al verificarsi di un evento: Esempio di Listener per Eventi
Il seguente è il formato standard per un listener di eventi personalizzato per gli eventi del modulo Omnisend. Sostituisci view con qualsiasi tipo di evento elencato nella sezione Tipi di Evento del Modulo sopra, e sostituisci // Custom JS con il codice che dovrebbe essere eseguito quando si attiva l'evento.
<script>
window.addEventListener("omnisendForms", function(e) {
if (e.detail.type == 'view') {
// Custom JS
}
});
</script>
Per utilizzare il timestamp dell'evento nel tuo codice JavaScript, usa e.timeStamp.
Dove aggiungere questo script:
Shopify: Incolla il codice nel footer o nel file di layout del tuo tema (ad esempio,
theme.liquid), prima della chiusuratag, in modo che venga caricato su ogni pagina in cui il modulo può apparire.WordPress / WooCommerce: Aggiungilo utilizzando un blocco HTML personalizzato nel tuo editor di pagina, oppure incollalo nel file footer del tuo tema prima di
.HTML semplice: Incollalo prima della chiusura
tag su ogni pagina in cui appare il modulo.
Implementare il tracciamento di Google Analytics sugli eventi del modulo
Utilizza il seguente frammento per tracciare ogni tipo di evento del modulo Omnisend come un evento in Google Analytics (GA4).
Nota: Il tuo GA4 lo script di inizializzazione gtag deve già essere caricato sulla pagina prima che questo frammento venga eseguito. Se gtag non è presente quando il listener viene attivato, gli eventi GA4 non verranno registrati.
<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>
Nota: I nomi degli eventi in la chiamata gtag('event', ...) – per esempio, omnisend_form_submit – possono essere rinominati in qualsiasi cosa tu voglia appaia in Google Analytics, come newsletter_signup o popup_completed. Il nome è completamente a tua discrezione.
Domande frequenti
Devo aggiungere il listener degli eventi al mio tema Shopify?
Sì. Incolla il codice del listener in una posizione caricata globalmente nel tuo tema Shopify – ad esempio, nel footer di theme.liquid – in modo che venga eseguito su ogni pagina in cui il modulo può apparire. Posizionalo prima del tag di chiusura .
È necessario installare il plugin Omnisend affinché questo funzioni?
Non necessariamente. Il plugin Omnisend (su Shopify o WooCommerce) installa automaticamente il frammento JS di Omnisend. Su qualsiasi altra piattaforma, devi aggiungere il frammento manualmente. Il frammento stesso è il requisito – non il plugin.
Come posso tracciare in quale fase i visitatori abbandonano il mio pop-up multi-step?
Ascolta l'evento close e leggi e.detail.step. Un valore di 2 significa che il visitatore ha chiuso il pop-up mentre era al passo 2. Invia questo come parametro personalizzato nella tua chiamata gtag o registralo in qualsiasi altro strumento di analisi.
Posso catturare quale pulsante ha cliccato un visitatore (ad esempio, "Sì" o "No")?
No. Il payload dell'evento omnisendForms non include il testo del pulsante. Per associare un'etichetta del pulsante con il tuo evento di tracciamento, codificalo manualmente nel tuo codice listener.
Devo aggiungere il frammento Omnisend più di una volta per più moduli su una pagina?
No. Un frammento per pagina è sufficiente per tutti i moduli, il tracciamento e i listener di eventi su quella pagina.
Hai difficoltà a capire questo? Invia un messaggio al nostro team di supporto 24/7 nell'app o via email [email protected].