Come tenere traccia degli invii dei moduli Elementor negli eventi di Google Analytics utilizzando JQuery

Come tenere traccia degli invii dei moduli Elementor negli eventi di Google Analytics

Ho lavorato su un sito WordPress client nelle ultime settimane che presenta alcune complessità. stanno usando WordPress con un'integrazione a ActiveCampaign per coltivare lead e a Zapier integrazione a Zendesk vendere via Forme Elementor. È un ottimo sistema... avviare campagne di gocciolamento alle persone che richiedono informazioni e inviare un vantaggio al rappresentante di vendita appropriato quando richiesto. Sono davvero impressionato dalla flessibilità e dall'aspetto della forma di Elementor.

L'ultimo passaggio è stato fornire una dashboard di analisi per il cliente tramite Google Analytics che ha fornito loro prestazioni mese su mese sugli invii di moduli. Hanno installato Google Tag Manager, quindi stiamo già registrando le transazioni di e-commerce e l'attività di visualizzazione di YouTube sul sito.

Ho fatto diversi tentativi per utilizzare DOM, trigger ed eventi all'interno di Google Tag Manager per acquisire l'invio riuscito del modulo per Elementor, ma non ho avuto alcuna fortuna. Ho testato un sacco di modi diversi per monitorare la pagina, cercando il messaggio di successo che sarebbe apparso tramite AJAX e semplicemente non funzionava. Quindi... ho fatto un po' di ricerche e ho trovato un'ottima soluzione da Tracking Chef, chiamata Monitoraggio dei moduli Elementor a prova di proiettile con GTM.

Lo script utilizza jQuery e Google Tag Manager per spingere il Evento di Google Analytics quando il modulo è stato inviato con successo. Con alcune modifiche minori e un miglioramento della sintassi, avevo tutto ciò di cui avevo bisogno. Ecco il codice:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

È piuttosto ingegnoso, guardare per la presentazione di successo, quindi passare Modulo come la categoria, il nome della destinazione come l'Azione, e Presentazione come l'etichetta. Rendendo programmatico il target, puoi semplicemente avere questo codice nel piè di pagina di ogni pagina per osservare l'invio di un modulo. Quindi... quando aggiungi o modifichi moduli, non devi mai preoccuparti di aggiornare lo script né di aggiungerlo a un'altra pagina.

Installa lo script tramite il codice personalizzato di Elementor

Se sei un'agenzia, consiglio vivamente l'aggiornamento illimitato e l'utilizzo di Elementor per tutti i tuoi clienti. È una piattaforma solida e il numero di integrazioni dei partner continua a salire alle stelle. Accoppialo con un plugin come Modulo di contatto DB e puoi anche raccogliere tutti i tuoi invii di moduli.

Elementor Pro ha un'ottima opzione di gestione degli script integrata. Ecco come puoi inserire il tuo codice:

Codice personalizzato Elementor

  • Spostarsi Elementor > Codice personalizzato
  • Dai un nome al tuo codice
  • Imposta la posizione, in questo caso la fine tag del corpo.
  • Imposta una priorità se hai più di uno script che desideri inserire e imposta l'ordine di essi.

Invio del modulo Elementor all'evento GA tramite GTM

  • Fare clic su Aggiorna
  • Ti verrà chiesto di impostare la condizione e semplicemente di impostarla sul valore predefinito di tutte le pagine.
  • Aggiorna la cache e il tuo script è attivo!

Visualizza l'anteprima dell'integrazione di Google Tag Manager

Google Tag Manager ha un fantastico meccanismo per connettersi a un'istanza del browser e testare effettivamente il codice per osservare se le variabili vengono inviate correttamente o meno. Questo è essenziale perché Google Analytics non è in tempo reale. Puoi testare, testare e testare e sentirti davvero frustrato dal fatto che i dati non vengano visualizzati in Google Analytics se non te ne rendi conto.

Non fornirò un tutorial qui su come fare visualizzare in anteprima ed eseguire il debug di Google Tag Manager… presumo che tu lo sappia. Posso inviare il mio modulo sulla mia pagina di test connessa e vedere i dati inviati ai dati GTM come devono essere:

livello dati di Google Tag Manager

In questo caso, la categoria è stata codificata come Modulo, la destinazione era il modulo Contattaci e l'etichetta è Invio.

In Google Tag Manager imposta variabili di dati, evento, trigger e tag

L'ultimo passaggio consiste nell'impostare Google Tag Manager per acquisire tali variabili e inviarle a un tag di Google Analytics configurato per un evento. Elad Levy descrive in dettaglio questi passaggi nel suo altro post: Monitoraggio eventi generici in Google Tag Manager.

Una volta impostati, sarai in grado di vedere gli eventi in Google Analytics!

Ottieni Elementor Pro

Divulgazione: utilizzo i miei link di affiliazione in questo articolo.

Commenti

  1. 1
  2. 3
  3. 5

Cosa ne pensi?

Questo sito utilizza Akismet per ridurre lo spam. Scopri come vengono elaborati i dati dei tuoi commenti.