Come impostare l'analisi del monitoraggio dei moduli con Google Tag Manager e Google Analytics

Pubblicato: 2022-04-12

Il tasso di conversione è una delle misure più semplici e allo stesso tempo più importanti dell'efficienza del marketing. Mostra quanti utenti hanno completato un'azione target: hanno effettuato un acquisto, si sono registrati per ricevere e-mail, hanno richiesto una chiamata, ecc. Per la registrazione e l'analisi delle vendite e-commerce, abbiamo Google Analytics, che è relativamente facile da configurare. Tuttavia, è necessario uno sforzo maggiore per tenere traccia dei moduli inviati su un sito.

Questo perché i moduli sono di tipi diversi e utilizzano tecnologie diverse per inviare dati al server. Dopo che i dati sono stati inviati correttamente, alcuni campi del modulo vengono aggiornati. Altri mostrano una finestra pop-up. Un terzo tipo reindirizza l'utente a una pagina di ringraziamento. Il metodo di rilevamento dei moduli dipende dalla tecnologia utilizzata.

In questo articolo ti spieghiamo come raccogliere i dati dei moduli in diversi modi e trasferirli a Google Analytics.

Sommario

Metodo 1. Separare la pagina di ringraziamento
Metodo 2. Invia l'attivatore del modulo in Google Tag Manager
- Passaggio 1. Attiva le variabili del modulo
- Passaggio 2. Regola il grilletto
- Passaggio 3. Verifica se il trigger funziona
- Passaggio 4. Crea il tag
- Passaggio 5. Imposta il tuo target in Google Analytics
Metodo 3. Attivatore della disponibilità degli elementi in Google Tag Manager
Metodo 4. Tieni traccia dei moduli che utilizzano AJAX
- Passaggio 1. Crea un tag per verificare come funziona il tuo modulo
- Passaggio 2. Crea una variabile di livello dati
- Passaggio 3. Crea il trigger
Metodo 5. Eventi DataLayer come trigger
Quanto tempo trascorrono gli utenti a compilare i moduli

Metodo 1. Separare la pagina di ringraziamento

Se l'utente viene reindirizzato a una pagina separata con un URL diverso dopo aver completato il modulo, il monitoraggio delle visite a questo URL è il metodo più semplice per tenere traccia dell'invio del modulo. È sufficiente creare un target con il tipo "Pagina di destinazione" in Google Analytics.

Supponiamo che tu voglia monitorare le registrazioni per un webinar. La pagina di ringraziamento dopo la registrazione riuscita è simile alla seguente: https://www.site.com/registration/thankyou

Nel pannello di amministrazione, in Visualizza impostazioni , sotto Destinazioni, fai clic su Destinazione, quindi fai clic su Personalizzato . Specifica il nome del target, seleziona il tipo di target e inserisci l'indirizzo della pagina di ringraziamento:

Pannello di amministrazione di Google Analytics

Ciò che è importante considerare: l'URL della tua pagina di ringraziamento dovrebbe essere univoco, ovvero dovrebbe esserci solo una pagina sul sito con tale indirizzo e gli utenti non dovrebbero essere in grado di accedere a questa pagina senza aver compilato il modulo. In caso contrario, Google Analytics può registrare dati imprecisi sul raggiungimento del tuo obiettivo.

bonus per i lettori

I migliori casi di marketing BI OWOX

Scarica ora

Metodo 2. Invia l'attivatore del modulo in Google Tag Manager

Se i tuoi programmatori hanno configurato correttamente la trasmissione dei dati da un modulo tramite il pulsante di invio, per gli invii di monitoraggio dei moduli puoi utilizzare il trigger integrato di Google Tag Manager. A giudicare dai commenti su Internet, questa situazione si incontra raramente, ma vale la pena provare.

Utilizzando questo metodo, quando un utente compila e invia un modulo, il trigger invia un evento gtm.formSubmit all'array dataLayer.

Nota: prima di accedere alle impostazioni, assicurati che il tag Visualizzazione pagina sia abilitato in Google Tag Manager per tutte le pagine del sito.

Passaggio 1. Attiva le variabili del modulo

A tale scopo, apri il menu Variabili in GTM, fai clic su Configura e seleziona tutte le variabili nella sezione Moduli:

Passaggio 2. Regola il grilletto

È necessario un ID modulo o un attributo di classe modulo per creare un trigger. Puoi vederli nel codice HTML facendo clic con il pulsante destro del mouse sul modulo e facendo clic su Esplora elemento in Firefox o Visualizza codice in Chrome:

Nel nostro esempio, l'id del modulo è send-request-form, che useremo durante la configurazione del trigger.

Vai al menu Trigger , fai clic su Nuovo , apri Impostazioni trigger e seleziona Invia modulo :

Scelta del tipo di trigger in Google Tag Manager

Nella finestra che si apre, vedrai due caselle di controllo:

Attendi tag : se abiliti questa opzione, il modulo non verrà inviato fino a quando tutti i tag associati non saranno attivati o fino alla scadenza del tempo specificato.
Verifica convalida : è meglio abilitare questa opzione. In caso contrario, il trigger si attiverà anche quando l'utente non ha compilato i campi obbligatori.

Dopo aver attivato il controllo degli errori, vengono visualizzate impostazioni aggiuntive. Se abiliti il trigger, specifica l'URL della pagina che contiene il modulo. E se attivi il trigger, specifica l'ID modulo che abbiamo menzionato sopra:

Trova un nome comodo e comprensibile per il trigger, ad esempio Invia una richiesta, e salvalo.

Passaggio 3. Verifica se il trigger funziona

Prima di pubblicare le modifiche in un contenitore, utilizza la modalità di anteprima in Google Tag Manager. Apri la pagina con il modulo, compilalo e premi invia. Nella console di debug dovrebbe apparire un evento gtm.formSubmit.

Se questo evento non viene visualizzato, questo metodo di monitoraggio non funzionerà per te. In tal caso, prova uno degli altri metodi descritti in questo articolo.

Se l'evento viene visualizzato, è comunque necessario eseguire un altro test per verificare se il trigger funziona correttamente. Apri un modulo, lascia in bianco alcuni campi obbligatori e invia il modulo. Se un evento gtm.formSubmit appare di nuovo nella console di debug, il trigger integrato funziona in modo errato e non ti aiuterà. Se l'evento non è stato trasferito, è fantastico! Passa ai passaggi successivi.

Passaggio 4. Crea il tag

Ora devi creare un tag che invierà informazioni a Google Analytics che il modulo è stato inviato. Per fare ciò, vai al menu Tag , fai clic su Nuovo, apri Configurazione tag e seleziona Google Analytics – Universal Analytics.

Per chiarezza, puoi assegnare al tag lo stesso nome del trigger. Successivamente, compila i seguenti campi:

Tipo di tag: seleziona {{Impostazioni di Google Analytics}}
Tipo di traccia: seleziona "Evento"
Categoria: lo stesso del tag e del trigger per comodità
Azione – Invio
Etichetta, ad esempio {{ID modulo}})
Non interazione: lascia "False"

Se desideri attivare il tag, seleziona il trigger che hai creato nel passaggio 3 e fai clic su Salva :

Modulo di configurazione dei tag in Google Tag Manager

È pronto! Puoi controllare come funziona il tag generato quando invii un modulo utilizzando la modalità di anteprima di Google Tag Manager o utilizzando il rapporto Eventi in tempo reale in Google Analytics.

Passaggio 5. Imposta il tuo target in Google Analytics

Dopo aver pubblicato il contenitore con le modifiche, devi impostare il target in Google Analytics per considerare l'invio di moduli come conversioni. A tale scopo, aggiungi un nuovo obiettivo nelle impostazioni di visualizzazione di Google Analytics. Seleziona il Tipo di evento e compila i campi Categoria, Azione e Collegamento proprio come hai fatto quando hai configurato il tag in Google Tag Manager:

pannello di amministrazione in Google Analytics

Salva il bersaglio. Fatto. Hai impostato il monitoraggio dei moduli senza modificare alcun codice sul tuo sito!

Metodo 3. Attivatore della disponibilità degli elementi in Google Tag Manager

Se viene visualizzata una finestra sul sito con un ringraziamento o un messaggio sull'invio riuscito dopo l'invio di un modulo, puoi provare un altro trigger GTM integrato. Si attiva quando un elemento particolare appare sullo schermo (nel nostro caso, una finestra pop-up) e invia un evento gtm.elementVisibility al dataLayer.

Per configurare questo trigger, è necessario conoscere il selettore CSS dell'elemento monitorato. Per trovare questo selettore, fai clic con il pulsante destro del mouse sulla finestra e seleziona Visualizza codice . Stai cercando la seguente riga:

Per copiare il selettore CSS, fare clic con il pulsante destro del mouse sulla riga e selezionare Copia – Copia selettore:

Nel nostro esempio, il selettore si presenta così: #webinar_marketing_automation > div.

Quindi crea un nuovo trigger selezionando il tipo Visibilità elemento :

Compila i seguenti campi:

Nome del trigger, ad esempio "Ottieni registrazione webinar"
Metodo di selezione – Selettore CSS
Element Selector – Inserisci il valore che hai copiato dal codice HTML della finestra pop-up.
Regola di attivazione: se hai un modulo sulla pagina, lascia l'opzione "Una volta per pagina". Se sono presenti più moduli e viene visualizzato un messaggio, puoi selezionare "Una volta per elemento".

Selettore di elementi nel menu di Google Tag Manager

Quindi seleziona la casella "Registra modifiche DOM".
Condizioni di attivazione del trigger: selezionando "Alcuni eventi di visibilità", è possibile specificare la pagina in cui viene visualizzato il messaggio o il testo pop-up.
Salva il grilletto.

opzioni avanzate nel menu di Google Tag Manager

Dopo aver creato il trigger Disponibilità elemento, è necessario modificare le stesse impostazioni descritte in dettaglio nel Metodo 2:

Aggiungi un nuovo tag a GTM che invierà i dati di invio del modulo a Google Analytics e allegherà il trigger creato ad esso.
Visualizza in anteprima come funziona il tag quando il modulo viene inviato.
In Google Analytics, imposta il target dell'evento per monitorare le conversioni.

Metodo 4. Tieni traccia dei moduli che utilizzano AJAX

Se i moduli sul tuo sito Web utilizzano la tecnologia AJAX, i dati vengono trasferiti dal browser al server in background e la pagina non si ricarica. Per configurare il monitoraggio dell'invio di moduli AJAX, puoi utilizzare questo script di Lunametrics:

    <script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>
<script id="gtm-jq-ajax-listen" type="text/javascript"> (function() { 'use strict' var $; var n = 0; init(); function init(n) { // Ensure jQuery is available before anything if (typeof jQuery !== 'undefined') { // Define our $ shortcut locally $ = jQuery; bindToAjax(); // Check for up to 10 seconds } else if (n < 20) { n++; setTimeout(init, 500); } } function bindToAjax() { $(document).bind('ajaxComplete', function(evt, jqXhr, opts) { // Create a fake element for magically simple URL parsing var fullUrl = document.createElement('a'); fullUrl.href = opts.url; // IE9+ strips the leading slash from a.pathname because who wants to get home on time on Friday anyways var pathname = fullUrl.pathname[0] === '/' ? fullUrl.pathname : '/' + fullUrl.pathname; // Manually remove the leading question mark, if there is one var queryString = fullUrl.search[0] === '?' ? fullUrl.search.slice(1) : fullUrl.search; // Turn params and headers into objects for easier reference var queryParameters = objMap(queryString, '&', '=', true); var headers = objMap(jqXhr.getAllResponseHeaders(), '\n', ':'); // Blindly push to the dataLayer because this fires within GTM dataLayer.push({ 'event': 'ajaxComplete', 'attributes': { // Return empty strings to prevent accidental inheritance of old data 'type': opts.type || '', 'url': fullUrl.href || '', 'queryParameters': queryParameters, 'pathname': pathname || '', 'hostname': fullUrl.hostname || '', 'protocol': fullUrl.protocol || '', 'fragment': fullUrl.hash || '', 'statusCode': jqXhr.status || '', 'statusText': jqXhr.statusText || '', 'headers': headers, 'timestamp': evt.timeStamp || '', 'contentType': opts.contentType || '', // Defer to jQuery's handling of the response 'response': (jqXhr.responseJSON || jqXhr.responseXML || jqXhr.responseText || '') } }); }); } function objMap(data, delim, spl, decode) { var obj = {}; // If one of our parameters is missing, return an empty object if (!data || !delim || !spl) { return {}; } var arr = data.split(delim); var i; if (arr) { for (i = 0; i < arr.length; i++) { // If the decode flag is present, URL decode the set var item = decode ? decodeURIComponent(arr[i]) : arr[i]; var pair = item.split(spl); var key = trim_(pair[0]); var value = trim_(pair[1]); if (key && value) { obj[key] = value; } } } return obj; } // Basic .trim() polyfill function trim_(str) { if (str) { return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } } })(); /* * v0.1.0 * Created by the Google Analytics consultants at http://lunametrics15.staging.wpengine.com * Written by @notdanwilkerson * Documentation: http://lunametrics15.staging.wpengine.com/blog/2015/08/27/ajax-event-listener-google-tag-manager/ * Licensed under the Creative Commons 4.0 Attribution Public License */ </script>

Questo codice verifica se il tuo modulo utilizza realmente AJAX, quindi crea la variabile e il trigger in Google Tag Manager.

Passaggio 1. Crea un tag per verificare come funziona il tuo modulo

In Google Tag Manager, apri Tag , fai clic su Nuovo , fai clic su Configurazione tag , quindi seleziona HTML personalizzato . Copia il codice sopra e incollalo nella casella di testo. Specifica tutte le pagine come trigger:

Quindi attiva l'anteprima GTM, apri la pagina del modulo, completa il modulo e invialo.

Se nella console di debug viene visualizzato un evento ajaxComplete (come nella schermata sopra), il tuo modulo utilizza AJAX e questo metodo di tracciamento è adatto a te. In tal caso, leggi oltre.

Passaggio 2. Crea una variabile di livello dati

Se fai clic sull'evento ajaxComplete nella console di anteprima e quindi apri la scheda Livello dati, vedrai quali informazioni vengono passate all'array del livello dati dopo l'invio del modulo.

Siamo interessati alla riga di risposta in questo codice; contiene il testo che dice che il modulo è stato inviato con successo:

Questa riga può essere utilizzata per creare la variabile e il trigger in Google Tag Manager. Apri la sezione Variabili in GTM, fai clic su Crea e, nella schermata Configurazione variabili, seleziona Variabile livello dati. Nel campo Nome variabile del livello dati, scrivi attributi.response (è possibile nominare due variabili allo stesso modo) e salva le impostazioni.

Perché inserire attributi.response invece di response ? Perché attributi è un oggetto che contiene la chiave di risposta e il suo valore. In questo modo, indichiamo a GTM il percorso esatto dei dati che ci interessano.

Dopo aver creato una variabile, è necessario verificarla. A tale scopo, invia un modulo in modalità anteprima. Fai clic sull'evento ajaxComplete e apri la scheda Variabili in Google Tag Manager. Se vedi la variabile attributi.response e il testo sull'invio corretto del modulo, significa che hai configurato tutto correttamente.

Passaggio 3. Crea il trigger

Nella sezione Configurazione trigger, fare clic su Crea, quindi Configurazione trigger e selezionare il tipo di evento utente . Specificare ajaxComplete nel campo Nome evento. Quindi, come condizione per l'attivazione del trigger, seleziona Alcuni eventi personalizzati e registra una condizione: la variabile attributi.response contiene {inserisci il tuo testo personalizzato sull'invio corretto del modulo}.

Dopo di che, ciò che rimane è:

Aggiunta di un nuovo tag di monitoraggio eventi a GTM che invierà le informazioni di invio del modulo a Google Analytics e allegherà il trigger creato ad esso.
Utilizzo della modalità Anteprima per verificare come funziona il tag durante l'invio di un modulo.
Impostazione del target dell'evento per monitorare le conversioni in Google Analytics.

Abbiamo descritto queste impostazioni in dettaglio sopra nella sezione Metodo 2. Invia modulo attivatore in Google Tag Manager.

Metodo 5. Eventi DataLayer come trigger

Il monitoraggio dei moduli utilizzando il metodo dataLayer .push è, a nostro avviso, la soluzione più affidabile e versatile. L'unico inconveniente è che se non capisci il codice, avrai bisogno dell'aiuto degli sviluppatori.

Preparare le specifiche tecniche per gli sviluppatori
Crea un elenco delle impostazioni che desideri trasferire nel dataLayer dopo che il modulo è stato inviato con successo. Chiedi ai tuoi sviluppatori di aggiungere questo codice a tutte le pagine con i moduli che desideri monitorare:

dataLayer.push({
'evento':'Moduli',
'variabile': 'valore'
})

In cui si:

Evento è il nome di un evento. Puoi sostituirlo con qualsiasi evento a te conveniente.
La variabile è un insieme di tutte le variabili che si desidera trasferire insieme a un evento.

Dopo che i tuoi programmatori hanno configurato il metodo dataLayer.push per tutti i moduli, puoi controllare come funziona. A tale scopo, includi un'anteprima in Google Tag Manager e compila il modulo sul tuo sito web. Nella console di debug dovrebbe esserci un nuovo evento (nel nostro esempio si chiama OWOX). Quando fai clic su un evento e vai alla scheda dataLayer, vedrai tutti i parametri che vengono trasferiti all'array di dati:

Nell'esempio del nostro evento nello screenshot qui sopra (scaricando un file PDF dal blog), consideriamo come configurare il monitoraggio con GTM.

Innanzitutto, crea tutte le variabili utente richieste: eventCategory, eventAction, eventLabel, ecc. Quindi seleziona la sezione Tipo di variabile nella sezione Variabili definite dall'utente e inserisci un nome di variabile tra parentesi graffe: {{eventCategory}}:

Quindi, crea un trigger di tipo Evento personalizzato. Nelle impostazioni, specifica il nome dell'evento e imposta il trigger in modo che si attivi su Tutti gli eventi personalizzati:

Menu Configurazione trigger in Google Tag Manager

Quindi crea un tag che inoltrerà gli eventi a Google Analytics. Imposta il tipo di tag come Google Analytics – Universal Analytics e imposta il tipo di monitoraggio come Evento.

Inoltre, compila questi campi:

Categoria – {{eventCategory}}
Azione – {{eventAction}}
Etichetta – {{eventLabel}}

Quindi, seleziona una variabile {{Impostazioni di Google Analytics}} e il trigger che hai creato nel passaggio precedente:

È tutto pronto. Non resta che verificare se il tag funziona in modalità di anteprima GTM e nei rapporti di Google Analytics in tempo reale.

Quanto tempo trascorrono gli utenti a compilare i moduli

Ora che puoi scoprire quanti utenti hanno completato con successo il modulo, sarà utile scoprire quali problemi sono stati riscontrati da coloro che non lo hanno compilato.

I tuoi sviluppatori devono aggiungere al dataLayer i nomi e i valori di tutti i parametri richiesti per l'analisi dei moduli. Questo ti aiuterà a monitorare:

Tempo dall'apertura della pagina all'attivazione del campo
Tempo dall'attivazione del campo alla disattivazione del campo
Tempo dall'attivazione del primo campo al primo invio del form
Tempo dall'attivazione del primo campo al buon esito dell'invio del modulo
Tempo dall'attivazione del primo campo al mancato invio del modulo
È ora di ricevere una risposta dal server sull'invio riuscito di un modulo
È ora di ricevere una risposta dal server sull'invio non riuscito di un modulo
Tempo dall'attivazione del modulo a quando un utente lascia il modulo (senza inviarlo correttamente)

Dopo aver impostato la raccolta di questi dati in Google Analytics, sarai in grado di importare tali dati in Google BigQuery, ad esempio utilizzando OWOX BI. Quindi puoi creare qualsiasi rapporto di analisi dei moduli in Fogli Google utilizzando il componente aggiuntivo gratuito OWOX BI BigQuery Reports.

Questi rapporti ti aiuteranno a trovare e risolvere i problemi nell'usabilità dei tuoi moduli e quindi ad aumentare il tuo tasso di conversione.

Ecco alcuni esempi di tali rapporti e le domande a cui possono rispondere:

1. Quando interagiscono con quali campi del modulo gli utenti riscontrano più spesso un errore?

2. Quanto tempo impiegano gli utenti a compilare il modulo?

3. Quanto tempo dedicano gli utenti alla compilazione del modulo e da cosa dipende?

PS Se hai bisogno di aiuto per impostare l'analisi dei moduli e creare un sistema di metriche personalizzato per la tua azienda, inviaci un'e-mail a [email protected] o compila il modulo di contatto sul sito Web OWOX.