Questo articolo illustra come implementare Google Tag Manager nel proprio sito.
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. - È 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.
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
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.
- 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.
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.html
della 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.