In questo post vedremo come ottenere il medesimo risultato con un altro strumento WordPress ad altissima diffusione: il visual builder Elementor.

Elementor utilizza Ajax , facendo comparire a schermo un messaggio di ringraziamento dopo che è avvenuto l’invio del modulo.

Questo significa che per far scattare il nostro attivatore in Tag Manager, al fine di conteggiare un evento, dobbiamo intercettare proprio la comparsa di questo messaggio sullo schermo.

Creazione dell’attivatore Tag Manager

Creo l’attivatore. Nell’interfaccia di GTM vado su Attivatori > Nuovo > e come tipo di elemento scelgo “Visibilità di un elemento”:

Dobbiamo indicare a Google Tag Manager quale elemento esatto ci interessa.

Apro l’inspector del browser per vedere se ci sono id oppure classi css associate al messaggio di invio riuscito.

Nel mio caso ho trovato un div associato alla classe .elementor-message-success.

Quindi flaggo la voce “Rileva modifiche nel DOM”.

Salvo, aggiorno la modalità Anteprima e debug, quindi aggiorno la pagina che contiene il modulo Elementor e controllo facendo un modulo di prova.

Google Analytics tag per tracciare il Form Elementor

Il prossimo passo è inviare un evento a Google Analytics ogni volta che quel messaggio di ringraziamento appare sullo schermo.

Nell’interfaccia di Google Tag Manager, vado su Tag> Nuovo> e scelgo Universal Analytics. Quindi uso le seguenti impostazioni:

Ovviamente posso nominare i valori di Categoria, Azione ed Etichetta come preferisco.
Quindi faccio clic sulla sezione Attivazione e scelgo il trigger creato in precedenza (Visibilità dell’elemento).

Test e messa in produzione

Salvo tutte le modifiche nel contenitore di Google Tag Manager, aggiorno la modalità Anteprima e Debug, aggiorno la pagina in cui è presente il modulo Elementor. Compilo tutti i campi e invio il modulo.

• L’evento di visibilità dell’elemento dovrebbe apparire nella modalità Anteprima e debug.

• Facendo clic sull’evento nella console di debug si dovrebbe visualizzare il tag GA Event attivato

Ora vado ai rapporti sugli eventi in tempo reale di GA e controllo se l’evento è visibile.

Quello che un tempo era possibile fare con non pochi passaggi e “sporcandosi le mani” con un po’ di lavoro sul codice, oggi è davvero alla portata dell’utilizzatore medio, con qualche clic…

Monitorare le chiamate da web

Google ci fornisce un metodo molto efficace per far arrivare una telefonata transitando in maniera del tutto trasparente (per l’utente) da un numero “ponte”. Questo consente al sistema di misurare l’obiettivo, potendo fissare utili parametri, quale ad esempio il conteggiare la conversione solo se la chiamata ha avuto una durata superiore a tot secondi.

Per usufruire di questa possibilità dovremo avere una campagna Google Ads attiva, un po’ di tempo a disposizione e ovviamente Google Tag Manager configurato sul nostro sito. Prerequisiti davvero ragionevoli, si può partire…

Ok Google, tracciami questo obiettivo

Apro il mio account Google Ads , vado sulla Chiave Inglese (“Strumenti e Impostazioni“) e scelgo “Misurazione” e poi “Conversioni“. Mi si apre l’elenco dei miei obiettivi di conversione.
Li ho settati, vero?

Si tratta ora di crearne uno nuovo, quindi clicco sull’icona blu con il +

Ecco cosa devo scegliere:

Tra le opzioni proposte, scelgo di monitorare le telefonate che hanno origine sul mio sito web:

La schermata che segue ci chiede di scegliere un nome per la nostra conversione, di fornire un valore per l’obiettivo, di inserire la durata minima della chiamata che vogliamo conteggiare come conversione…

A questo punto scelgo il metodo più semplice: Tag Manager

Mi sposto su Tag Manager

Google Ads, a questo punto genererà due valori fondamentali:

1. ID conversione
2. Etichetta conversione

Questo è tutto ciò che ci serve lato Google Ads! Posso passare alle due azioni che mi servono lato Tag Manager per completare il mio lavoro.

1. Aggiungo un  tag Linker conversioni e lo configuro perchè venga attivato in tutte le pagine web del sito.
2. Installo il tag di monitoraggio delle conversioni Google Ads.

Creo il tag “Linker di Conversioni”

E’ veramente semplicissimo. Apro il mio Tag Manager, creo un nuovo Tag e scelgo come tipo di Tag “Linker Conversioni“. E’ già pronto. Scelgo di attivarlo su “Tutte le pagine” e questa è fatta. Facile, vero?

Google Ads – Chiamate dalla conversione sul sito web

Manca solo un passaggio: creo un nuovo tag di tipo “Google Ads – Chiamate dalla conversione sul sito web“.

I campi da valorizzare sono il numero di telefono da monitorare e i due valori rilasciati da Google Ads: “ID conversione” ed “Etichetta conversione“.

Inserisco i dati e scelgo come attivatore “Tutte le pagine“, oppure posso decidere di monitorare con un attivatore specifico solo le pagine che contengono il numero di telefono. A voi la scelta.

Tutto pronto: si parte!

Non mi resta che fare un check sull’attivazione del tag usando la modalità anteprima di Tag Manager e una volta verificato che è tutto ok procedere alla pubblicazione della versione. Non resta che tenere d’occhio il rapporto sulle azioni di conversione di Google Ads. Buona fortuna!

Ho letto in rete varie soluzioni, molte delle quali sofisticate, altre inutilmente complesse, altre molto sofisticate.
Per scopi basilari, basta seguire questi semplici passi:  

1 – Creo il primo tag sfruttando wpcf7mailsent

Apro Google Tag Manager e creo un nuovo Tag, scegliendo come tipologia “html personalizzato”. Nel mio esempio l’ho chiamato “mailsent-cf7”.

All’interno del tag digito poche righe di codice:

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {  dataLayer.push({'event': 'contactForm7Inviato'});  }, false );
</script>

In pratica, quello che vedo in Tag Manager è questo:

wpcf7mailsent è un evento DOM di CF7 che si attiva quando un modulo ajax è stato inviato con successo, e la mail è partita.

In pratica, è tutto ciò che ci serve.

A questo punto scelgo su quali pagine del sito attivare il tag (tutte le pagine può essere un’opzione che va bene in molti casi…). Salvo il mio nuovo tag.

2 – Il mio tag Universal Analytics

Creo ora un nuovo tag di tipo Google Universal Analytics.
Diciamo che lo posso chiamare “Invio form CF7“:

Scelgo monitoraggio evento.

Inserisco il mio id di monitoraggio e scelgo un valore per Categoria, Azione ed Etichetta

Nel mio caso ho scelto “Form” per categoria, “Invio” per azione e il path della pagina come etichetta.

3 – L’evento personalizzato

Per attivare il tag creo un nuovo attivatore di tipo “evento personalizzato” – io l’ho chiamato “form inviato” – e seleziono come evento contactForm7Inviato:

4 – Anteprima e controlli

Non mi resta che fare l’anteprima in Google Tag Manager per sincerarmi che tutto funzioni come previsto:

e aprire il sito per vedere se è tutto a posto:

Come si vede, è tutto ok. Ora provo a inviare un modulo e posso notare subito se “scatta” l’evento, vedendolo anche in real time su Google Analytics.

Tutto funziona: in meno di 10 minuti il mio tracciamento è attivo.
Posso pubblicare la nuova versione in Tag Manager.