Questo articolo illustra come implementare Google Tag Manager nel proprio sito. Per informazioni su come creare tag GA4 in Google Tag Manager, consulta la documentazione di Google.
Google Analytics 4 sta sostituendo Universal Analytics. Il 1° luglio 2023, tutte le proprietà standard di Universal Analytics interromperanno l'elaborazione dei nuovi risultati. Le proprietà di 360 Universal Analytics interromperanno l'elaborazione dei nuovi risultati il 1° luglio 2024. Per informazioni su come effettuare la migrazione, vedi Passare a Google Analytics 4.
L'articolo non segue esattamente le istruzioni di Google, ma la procedura è stata testata e funziona correttamente. Le indicazioni fornite da Google sono state modificate per le seguenti ragioni:
- Google chiede di installare il codice nell'
<head>del sito. Questo però non favorisce la velocità di caricamento delle pagine, bensì la rallenta. Per questo, preferiamo posizionarlo nella parte inferiore di<body-end>, così verrà caricato per ultimo. - Nota
Ti consigliamo di inserire il codice in
<body-end>perché mentre Google Tag Manager si carica in modo asincrono, il problema con il caricamento in modo asincrono è che inizierà a scaricare risorse ed eseguire il codice. Questa attività entra in competizione con altre risorse sul telefono/computer per larghezza di banda, utilizzo del processore e altro. Se inserisci il codice in<head>, gli stai comunque assegnando la priorità rispetto ad altre risorse che il browser potrebbe voler scaricare, come: stile e layout del sito, contenuto principale, immagini above the fold e altro.Duda ha costantemente rilevato che i siti web che inseriscono il codice GTM in
<head>hanno prestazioni peggiori di quelli che non lo fanno. Abbiamo ottimizzato il nostro sito per dare priorità ai contenuti visibili, in linea con Core Web Vitals e le relative metriche di FCP e LCP. - È più facile copiare il codice in un'unica posizione.
Aggiungere Google Tag Manager
Google ti fornirà del codice incorporato che somiglia agli esempi qui sotto. Entrambi vanno installati nel <body-end> del sito. Per individuare il <body-end> del sito, nel pannello laterale dell'editor fai clic su Impostazioni, quindi su HTML intestazione.
Il codice riportato sopra è solo un esempio, NON copiarlo direttamente nel tuo sito. Assicurati di ottenere il codice corretto da Google.
Sezione Script |
|---|
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager --> |
Sezione NoScript |
<!-- Google Tag Manager (noscript) --> <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <!-- End Google Tag Manager (noscript) --> |
Configurare Google Tag Manager
Questo passaggio è essenziale per consentire il monitoraggio di Google Tag Manager sul tuo sito.
Dopodiché, bisogna sostituire il trigger predefinito per la visualizzazione delle pagine Tutte le pagine con il nostro evento personalizzato. Per prima cosa, bisogna creare il trigger personalizzato in Tag Manager:
- Vai su Google Tag Manager e accedi.
- Fai clic su Trigger sulla sinistra.
- Fai clic sul pulsante nuovo sul lato destro.
- Inserisci un nome per il trigger in alto a sinistra. Si consiglia di scegliere qualcosa di utile e facile da ricordare, come: Trigger personalizzato per visualizzazione pagina.
- Fai clic sulla casella di configurazione del trigger personalizzato e seleziona Evento personalizzato.
- Nella casella nome evento, digita dPageView.
- Fai clic su Salva nel Tag Manager.
Una volta creato il trigger, bisogna applicarlo ai tag desiderati. La procedura va svolta per ciascun tag usato sul sito per attivare gli eventi di visualizzazione della pagina. In questo esempio, lo applicheremo a Google Analytics Universal, ma Google Analytics 4 è la versione più recente che consigliamo di utilizzare. Per informazioni su come creare e applicare i trigger ai tag GA4 in Google Tag Manager, consulta la documentazione di Google.
- Da Tag Manager, vai su tag.
- Crea un nuovo tag.
- Inserisci un nome che sia facile da ricordare.
- Fai clic sulla casella Configurazione tag e seleziona quello che vuoi utilizzare. In questo caso, sarà Google Analytics Universal.
- Dopo aver impostato il tag, metti la spunta alla casella Attivazione. Scegli il trigger personalizzato che abbiamo creato nella Pagina personalizzata del trigger.
- Seleziona una nuova variabile.
- Seleziona Impostazioni di Google Analytics.
- Inserisci l'ID di monitoraggio di GA e digita un nome per la variabile in alto.
- Seleziona la variabile e fai clic su Salva.
Se il trigger Tutte le pagine è già applicato, eliminalo. A noi serve che si attivi solo il trigger personalizzato.
Dopo aver apportato queste modifiche a Tag Manager, fai clic su Invia e poi su Pubblica le modifiche alle impostazioni live.
Considerazioni su Google Tag Manager
- Il codice viene eseguito solo sul sito pubblicato e attivo. Pertanto, è bene testarlo sulla versione live.
- Abbiamo svolto test approfonditi e la sezione
body-end.htmldella modalità sviluppatore funziona per l'aggiunta del codice noscript e del codice predefinito. - Non modificare l'impostazione "dataLayer" da Google Tag Manager, in quanto interromperesti il nostro codice di integrazione personalizzato.