Cos'è gtag, come si carica e cosa invia ogni comando

Che cos'è gtag?

La funzione gtag() è l'API JavaScript del tag di Google. Ogni chiamata inserisce un comando come config, event, set o consent in una coda chiamata dataLayer, che la libreria gtag.js legge per inviare i dati ai prodotti Google. Il riferimento di Google lo riassume in una riga: "L'API del tag Google (gtag.js) usa la funzione gtag() per inviare dati a prodotti Google come Google Analytics e Google Ads." Se il sorgente di un sito carica gtag/js?id=, quel sito esegue il tag Google direttamente nel proprio codice e non tramite un contenitore di Tag Manager.

Qui si confondono spesso tre nomi. gtag.js è il file della libreria. gtag() è la funzione che il tuo codice chiama. Il tag Google è il nome del prodotto che Google usa per l'intera configurazione, descritta come "un unico tag che puoi aggiungere al tuo sito web per usare i prodotti di misurazione e pubblicità di Google come Google Ads, Google Analytics, Campaign Manager, Display & Video 360 e Search Ads 360."

Come si carica gtag.js in una pagina?

gtag.js si carica con uno snippet in due parti, che Google ti dice di inserire "subito dopo il tag HTML <head> di apertura in ogni pagina che vuoi misurare." La prima parte scarica la libreria, la seconda definisce la funzione gtag() e mette in coda i primi comandi.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'TAG_ID');
</script>

L'ordine conta meno di quanto sembri. La libreria si carica con async, quindi lo script inline viene eseguito per primo. Poiché gtag() non fa altro che dataLayer.push(arguments), ogni comando che chiami prima che la libreria arrivi resta in attesa nell'array dataLayer, e gtag.js elabora la coda appena si è caricato. Per questo puoi chiamare gtag('event', ...) ovunque nella pagina senza controllare se la libreria è pronta.

L'id nell'URL dello script è un ID del tag Google. Google porta come esempi "GT-XXXXXXXXX, G-XXXXXXXXX e AW-XXXXXXXXX" e precisa che "gli ID possono essere usati in modo intercambiabile quando aggiungi il tag Google al tuo sito web." Un singolo tag Google può avere più ID e inviare i dati a più destinazioni, per esempio una proprietà di Google Analytics e un account Google Ads.

Cosa fanno i comandi di gtag()?

I comandi di gtag() sono cinque verbi, ciascuno passato come primo argomento: config, event, set, get e consent. La tabella usa la sintassi e le formulazioni del riferimento API di Google.

config fa più di quanto la sua descrizione lasci intendere. Google afferma che "il comando config è necessario per inviare dati ai prodotti pubblicitari di Google", e per Google Analytics la chiamata config predefinita invia anche un evento page_view. Per impedirlo, Google documenta send_page_view: false, che ti serve quando invii tu le visualizzazioni di pagina, per esempio in una single-page app.

set va usato con parsimonia. Google aggiunge: "Ti consigliamo di usare i comandi config o event ovunque sia possibile." I valori impostati a livello di evento sovrascrivono quelli di config, e i valori di config sovrascrivono tutto ciò che è impostato globalmente con set.

consent ha due modalità. 'default' imposta lo stato iniziale prima che il visitatore risponda al tuo banner, e 'update' lo modifica dopo la risposta. I quattro parametri di consent mode v2 sono ad_storage, analytics_storage, ad_user_data e ad_personalization. La guida a Google consent mode v2 spiega cosa hanno aggiunto i due segnali più recenti.

In quale ordine vanno eseguiti i comandi gtag?

I comandi gtag vengono eseguiti nell'ordine in cui li metti in coda, e tre di loro funzionano solo se arrivano prima della prima chiamata a config o event.

1. Flag di disattivazione. window['ga-disable-MEASUREMENT_ID'] = true "deve essere impostato prima di qualsiasi chiamata a gtag() e deve essere impostato in ogni pagina per cui vuoi disattivare Analytics."
2. Valori predefiniti del consenso. Google dice di impostare il valore predefinito per ogni tipo di consenso "in ogni pagina del tuo sito prima di qualsiasi comando che invia dati di misurazione (come config o event)." Se il tuo strumento di gestione del consenso si carica in modo asincrono, aggiungi wait_for_update con un valore in millisecondi.
3. Impostazioni globali. Le chiamate set come allow_google_signals: false vanno prima di config, così il primo hit le include già.
4. config. Una chiamata per ogni ID del tag.
5. event. Tutto il resto, dopo.

Un valore predefinito del consenso messo dopo config arriva troppo tardi per la prima visualizzazione di pagina. È uno dei modi più silenziosi in cui un sito finisce per inviare hit che voleva trattenere.

Che rapporto c'è tra gtag, il tag Google e Google Tag Manager?

gtag.js e Google Tag Manager sono due modi di distribuire lo stesso tag Google. Con gtag.js scrivi i comandi nel codice della pagina, mentre con Tag Manager li configuri in un'interfaccia web e lo script del contenitore, gtm.js, li carica per te. La guida a gtag.js di Google dice che "se non hai familiarità con JavaScript, ti consigliamo di usare Google Tag Manager al posto di gtag.js."

I due condividono il dataLayer, quindi un sito può usarli entrambi. Il rischio è contare le cose due volte. Google avverte, per esempio, che se configuri i tag tramite Tag Manager non dovresti attivare anche il tracciamento automatico della cronologia in Google Analytics, "perché può portare a un doppio conteggio delle visualizzazioni di pagina." Lo stesso vale per uno snippet gtag inserito nel codice e un tag Google di GTM che puntano allo stesso ID di misurazione. Ognuno invia il proprio page_view. La guida sull'impatto di Google Tag Manager sulla privacy tratta l'altro lato di questa scelta, cioè quanto codice un contenitore permette ad altri di aggiungere alle tue pagine.

Perché gli ad blocker bloccano gtag?

Gli ad blocker bloccano gtag impedendo la richiesta della libreria da www.googletagmanager.com o gli hit che questa invia agli endpoint di raccolta di Google. Quando la richiesta dello script fallisce, gtag() esiste comunque, perché lo ha definito lo snippet inline, ma nessuno legge mai la coda del dataLayer, quindi dalla pagina non esce alcun dato. La guida su ad blocker e accuratezza dei dati analytics spiega come questo vuoto emerge nei report. Google tag gateway per gli inserzionisti serve il tag dal tuo dominio, anche se la documentazione del gateway di Google non menziona gli ad blocker.

Come controlli cosa invia gtag?

Per controllare cosa invia gtag devi osservare le richieste di rete e gli strumenti di debug di Google, non leggere lo snippet. Le guide di Google ne usano due: Tag Assistant, che mostra i comandi e gli hit generati da ciascuno, e DebugView in Google Analytics, che mostra gli eventi man mano che arrivano quando la modalità debug è attiva. Nel browser, filtra il pannello Network per le richieste di raccolta e verifica che ogni visualizzazione di pagina o evento compaia una sola volta, con i parametri che ti aspetti. La checklist di verifica analytics ripercorre gli stessi controlli per qualsiasi tracker.

Come si confronta lo script di Flowsery con gtag?

Il tracker di Flowsery è un unico tag script con un ID del sito, quindi non c'è nessuna coda di comandi da configurare prima che i dati inizino a fluire. Incolla <script defer data-fl-website-id="flid_******" src="https://cdn.flowsery.com/main.js"></script> nell'head e le visualizzazioni di pagina vengono tracciate in automatico. Gli obiettivi personalizzati usano un attributo data-fs-goal sull'elemento oppure una chiamata come window.flowsery('signup'), e la documentazione di Flowsery mostra un piccolo stub di coda, window.flowsery.q, che conserva le chiamate fatte prima del caricamento dello script, lo stesso schema che gtag usa con il dataLayer. Lo script ha anche un'opzione senza cookie, che usa un hash del visitatore con rotazione giornaliera e non memorizza dati personali. Lo script leggero pesa meno di 10 KB e si carica in modo asincrono. Se il tuo team gestisce già i tag con Google Tag Manager, la documentazione di Flowsery include una configurazione con tag HTML personalizzato per GTM, così i due strumenti possono convivere durante una migrazione.

Domande frequenti

gtag è la stessa cosa di Google Tag Manager?

No. gtag.js è la libreria alla base del tag Google, e tu chiami gtag() dal codice della tua pagina. Google Tag Manager è un contenitore separato, caricato tramite gtm.js, in cui i tag si configurano da un'interfaccia web. Entrambi possono installare lo stesso tag Google.

Posso chiamare gtag() prima che gtag.js sia stato caricato?

Sì. Lo snippet inline definisce gtag() come una funzione che inserisce i suoi argomenti nell'array dataLayer. Le chiamate fatte prima che arrivi la libreria restano in attesa in quella coda, e gtag.js le elabora in ordine appena si carica.

Un solo snippet gtag può inviare dati a Google Analytics e a Google Ads?

Sì. Un unico tag Google può collegarsi a più destinazioni, come una proprietà di Google Analytics e un account Google Ads. Un singolo tag può contenere più ID tag, e Google precisa che questi ID sono intercambiabili quando aggiungi il tag al tuo sito.

Perché gtag invia un page_view senza una chiamata evento?

La chiamata config predefinita per un ID di Google Analytics invia da sola un evento page_view. Imposta send_page_view: false se vuoi inviare le visualizzazioni di pagina manualmente. Sui siti con misurazione avanzata, le visualizzazioni basate sulla cronologia vengono comunque inviate, a meno che tu non disattivi anche quell'opzione nello stream di dati.

Dove va messo lo snippet gtag?

Google indica di inserirlo subito dopo il tag di apertura <head> di ogni pagina che vuoi misurare. Un flag di disattivazione va in uno script prima dello snippet, perché Google specifica che deve essere impostato prima di qualsiasi chiamata a gtag(). I valori predefiniti del consenso vanno dentro lo snippet, prima della chiamata config, perché Google specifica che devono essere eseguiti prima di qualsiasi comando che invii dati di misurazione.

gtag funziona se lo script è bloccato?

Non viene inviato nessun dato. La parte inline dello snippet definisce comunque gtag() e riempie il dataLayer, ma senza la libreria gtag.js nessuno elabora quella coda. Per questo i visitatori bloccati mancano in Google Analytics invece di comparire come errori.

Qual è la differenza tra gtag.js, gtag() e il tag Google?

gtag.js è il file della libreria che si carica da googletagmanager.com. gtag() è la funzione che il tuo codice chiama per inserire comandi nel dataLayer. Il tag Google è il nome che Google dà all'intera configurazione, un unico tag che copre prodotti come Google Ads e Google Analytics.

Quali formati di ID tag posso usare nello snippet gtag?

Google porta come esempi GT-XXXXXXXXX, G-XXXXXXXXX e AW-XXXXXXXXX e precisa che gli ID sono intercambiabili quando aggiungi il tag Google al tuo sito. L'ID va nel parametro id dell'URL dello script e nella tua chiamata config. Un unico tag Google può contenere più ID.

Quando devo usare gtag('set')?

Usa set per i parametri che devono essere associati a ogni evento successivo nella pagina. Google consiglia config o event ovunque sia possibile. I valori dell'evento sovrascrivono quelli di config, e i valori di config sovrascrivono qualsiasi cosa impostata a livello globale. Se usi set, mettilo prima di config, così il primo hit porta già con sé i valori.

Come disattivo Google Analytics con un flag di opt-out di gtag?

Imposta window['ga-disable-MEASUREMENT_ID'] = true nella pagina. Google specifica che va impostato prima di qualsiasi chiamata a gtag() e che va impostato su ogni pagina per cui vuoi disattivare Analytics.