In questa pagina viene descritto come utilizzare i comandi gtag.js per inviare dati dal tuo sito a Google Analytics.
Invia dati con il comando event
Dopo aver aggiunto lo snippet globale a una pagina web, utilizza il comando event per inviare i dati a Google Analytics. Ad esempio, utilizza il seguente comando event per indicare che un utente ha eseguito l'accesso utilizzando il proprio Account Google:
gtag('event', 'login', {'method': 'Google'});
Scopri di più sul comando event nel riferimento API.
Instrada i dati a gruppi e proprietà
Puoi inviare un insieme di informazioni di misurazione a uno o più ID proprietà Google Analytics e un altro insieme di informazioni ad altri ID proprietà. Puoi organizzare le proprietà in gruppi e indirizzare i dati a queste ultime.
Ad esempio, il codice riportato di seguito illustra come indirizzare un evento sign_in a un gruppo "agenzia" che include due proprietà Google Analytics.
// Configure a target
gtag('config', 'GA_MEASUREMENT_ID_1');
gtag('config', 'GA_MEASUREMENT_ID_2', { 'groups': 'agency' });
gtag('config', 'GA_MEASUREMENT_ID_3', { 'groups': 'agency' });
// Route this sign_in event to Analytics IDs in the 'agency' group:
gtag('event', 'sign_in', { 'send_to': 'agency' });
Scopri di più su come raggruppare e instradare i dati.
Sapere quando un evento è stato inviato
In alcuni casi, è necessario sapere quando un evento è stato inviato correttamente a Google Analytics, in modo da poter intervenire immediatamente dopo. Si tratta di un problema comune quando devi registrare una particolare interazione che allontana l'utente dalla pagina corrente. Molti browser smettono di eseguire JavaScript non appena inizia il caricamento della pagina successiva, il che significa che i comandi event gtag.js potrebbero non essere mai eseguiti.
Ad esempio, potresti voler inviare un evento a Google Analytics per registrare il clic di un utente sul pulsante di invio di un modulo. Nella maggior parte dei casi, se fai clic sul pulsante Invia viene avviata immediatamente il caricamento della pagina successiva prima che possa essere eseguito qualsiasi comando event.
La soluzione consiste nell'intercettare l'evento per interrompere il caricamento della pagina successiva, in modo da poter inviare l'evento a Google Analytics. Dopo l'invio dell'evento, invia il modulo in modo programmatico.
Implementare le funzioni di callback degli eventi
Puoi implementare una funzione di callback dell'evento che viene chiamata non appena un evento viene inviato correttamente.
L'esempio seguente mostra come annullare l'azione di invio predefinita di un modulo, inviare un evento a Google Analytics e inviare nuovamente il modulo utilizzando la funzione di callback dell'evento:
// Get a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Add a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevent the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Send the event to Google Analytics and
// resubmit the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': function() {
form.submit();
}
});
});
Gestire i timeout
Nell'esempio riportato sopra esiste uno svantaggio: se la libreria gtag.js non viene caricata, la funzione di callback dell'evento non verrà mai eseguita e gli utenti non potranno mai inviare il modulo.
Ogni volta che inserisci una funzionalità fondamentale del sito nella funzione di callback dell'evento, devi utilizzare sempre una funzione di timeout per gestire i casi in cui la libreria gtag.js non viene caricata.
L'esempio seguente migliora il codice riportato sopra in modo da utilizzare un timeout. Se è trascorso un secondo dopo che l'utente ha fatto clic sul pulsante Invia e la funzione di callback dell'evento non è stata eseguita, il modulo viene comunque inviato nuovamente.
// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Creates a timeout to call submitForm after one second.
setTimeout(submitForm, 1000);
// Monitors whether or not the form has been submitted.
// This prevents the form from being submitted twice in cases
// where the event callback function fires normally.
var formSubmitted = false;
function submitForm() {
if (!formSubmitted) {
formSubmitted = true;
form.submit();
}
}
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
gtag('event', 'signup_form_complete', {
'event_callback': submitForm
});
});
Se utilizzi il pattern precedente in tutto il sito, crea una funzione di utilità per gestire i timeout.
La seguente funzione di utilità accetta una funzione come input e restituisce una nuova funzione. Se la funzione restituita viene chiamata prima del periodo di timeout (il timeout predefinito è un secondo), il timeout viene cancellato e viene richiamata la funzione di input. Se la funzione restituita non viene chiamata prima del periodo di timeout, viene comunque richiamata la funzione di input.
function createFunctionWithTimeout(callback, opt_timeout) {
var called = false;
function fn() {
if (!called) {
called = true;
callback();
}
}
setTimeout(fn, opt_timeout || 1000);
return fn;
}
Ora puoi includere tutte le funzioni di callback degli eventi con un timeout per assicurarti che il tuo sito funzioni come previsto, anche nei casi in cui gli eventi non vengano inviati o la libreria gtag.js non venga mai caricata.
// Gets a reference to the form element, assuming
// it contains the ID attribute "signup-form".
var form = document.getElementById('signup-form');
// Adds a listener for the "submit" event.
form.addEventListener('submit', function(event) {
// Prevents the browser from submitting the form
// and thus unloading the current page.
event.preventDefault();
// Sends the event to Google Analytics and
// resubmits the form once the hit is done.
gtag('event', 'signup_form', { 'event_callback': {
createFunctionWithTimeout(function() {
form.submit();
})
}});
});
Specificare diversi meccanismi di trasporto
Per impostazione predefinita, gtag.js seleziona il metodo HTTPS e il meccanismo di trasporto con cui inviare gli hit in modo ottimale. Le tre opzioni sono:
- "image" (con un oggetto
Image) - "xhr" (con un oggetto
XMLHttpRequest) - "beacon" (con il metodo
navigator.sendBeacon)
I primi due metodi condividono il problema descritto nella sezione precedente, in cui gli hit non vengono inviati se è in corso l'unload della pagina. Il metodo navigator.sendBeacon risolve questo problema trasmettendo in modo asincrono gli hit al server web senza dover impostare un callback degli hit.
Il seguente codice imposta il meccanismo di trasporto su 'beacon' per i browser che lo supportano:
gtag('config', 'GA_MEASUREMENT_ID', { 'transport_type': 'beacon'});