[Aggiornata 13/08/2021]
Per attivare Google Tag Manager nel tuo sito dovrai prima di tutto inserire i due snippet di codice di Tag Manager, il primo all’interno della sezione <head> e il secondo all’apertura del <body> del codice HTML del tuo sito.
Sì, sarà la prima e unica volta che ti dovrai “sporcare” le mani inserendo manualmente il codice, ma è necessaria 🙂
[Videoguida aggiornata 27/04/2017]
Di seguito ti spiegherò come inserire gli snippet di codice tramite WordPress.
Dopo aver creato un account in Google Tag Manager proseguiamo con gli step successivi.
Puoi installare il codice tramite WordPress in due modi: tramite Editor o tramite un Plugin. Alla fine ti svelerò un terzo [trucco] che solitamente applico in situazioni particolari. Lascio a te decidere la strada migliore (se hai bisogno di un consiglio lascia pure un commento!).
Una volta creato l’account, dovrai copiare i due snippet forniti da Google Tag Manager.
Dal pannello di controllo di WordPress, vai nella sezione Aspetto e poi clicca su Editor.
Alla destra dello schermo vedrai tutti i file .php che compongono il template del tuo sito in WordPress. A questo punto, clicca sul file Header.php per poterlo modificare.
I due codici da inserire vanno in due sezioni diverse: <head> e immediatamente dopo l’apertura del <body>.
Non ti resta che cercare la sezione <head> e <body> all’interno del codice di questo file ed incollare i due snippet di Tag Manager secondo le istruzioni.
Clicca il tasto Aggiorna file in basso e… Google Tag Manager è ora installato!
I pro e contro di questa implementazione
► Pro: ci metti 2 secondi ad implementarlo e non appesantisci la tua istanza di WordPress con Plugin.
► Contro: se aggiorni il tuo tema… [BOOM] perdi la modifica. Un consiglio che posso darti è quello di utilizzare temi child (sono davvero molto fichi!).
Vediamo ora come eseguire la stessa procedura, aiutandoci però con un Plugin.
Dal pannello di controllo di WordPress, vai nella sezione Plugin e clicca su Aggiungi nuovo.
Cerca il Plugin con la query “Google Tag Manager”. Ne vedrai diversi disponibili. Ti consiglio di installare “Google Tag Manager for WordPress” (ex DuracellTomi’s). Perché ti consiglio questo Plugin? Dunque, conosco l’autore (Thomas Geiger) è stato uno dei primi gestire GTM da WP e il suo Plugin è quello con più installazioni e recensioni positive, oltre a gestire l’enhanced e-commerce e l’ecommerce in GA4.
Dopo aver attivato “Google Tag Manager for WordPress“, ti basterà inserire il tuo ID di Tag Manager (GTM-XXXXXX) nell’apposita sezione all’interno del Plugin.
La prima soluzione (Footer of the page) te la sconsiglio, non capisco davvero perché l’autore la metta come opzione.
Puoi selezionare l’opzione Custom o Codeless injection alla voce “Container code placement”.
Nel caso selezionassi Custom, dovrai copiare la piccola riga di codice che vedi ed incollarla nel <body> del file header.php tramite l’editor, proprio come abbiamo fatto prima.
L’opzione Codeless injection, invece, è più comoda in quanto, come dice il nome stesso, non serve l’inserimento di alcun codice. Più comodità e semplicità si riflette però in un maggior margine d’errore: come avvisa lo stesso autore del Plugin, si tratta di un’opzione sperimentale che potrebbe eventualmente dare dei piccoli problemi.
In ogni caso, per essere sicuri della corretta installazione di Google Tag Manager, vi consiglio di controllare sempre con Tag Assistant.
Ma allora, se devo comunque inserire il codice manualmente, qual è il vantaggio di usare questo Plugin?
Giusta domanda!
Il vantaggio è che il Plugin è integrato con il Data Layer e altri elementi di Google Tag Manager. Tramite il Plugin, puoi quindi inserire facilmente i dati all’interno del Data Layer. Per farlo, ti basterà andare all’interno del Plugin, nella seconda scheda: Basic data.
Qui seleziona tutti i dati che vuoi includere nel tuo Data Layer, come autore del post, data del post, tag del post, termini di ricerca nel sito, status degli utenti (loggato o no), etc.
Hai la possibilità di inserire anche dei valori personalizzati.
Davvero fico, no?
Il tutto senza mettere mano nel codice.
Grazie a questo Plugin potrai anche impostare in maniera estremamente semplice il tracciamento di eventi, compilazione campi form, inserire alcuni tag in una black list in modo che non vengano eseguiti. Ti svelo una chicca: per queste funzionalità vengono implementate delle librerie Javascript sviluppate da terzi. Google Tag Manager è molto potente, però non riempirlo con 100mila tag perché il sito ne risente a livello di caricamento (anche se asincrono!).
Inoltre ha già delle integrazioni native con i più famosi plugin come:
Tutte queste informazioni vengono trasferite a Google Tag Manager permettendoti di avere a disposizione una marea di informazioni utili per il tuo business.
I pro e contro di questa implementazione
► Pro: [WHOOAA!] come ogni Plugin è tutto semplice, 2 click e il gioco è fatto. Zero smanettamenti di codice, zero programmazione, very easy! Nessun problema con gli aggiornamenti del tema (sempre che tu non abbia utilizzato l’implementazione “custom”, allora sei fregato). Ha molte funzioni di tracciamento già implementate. Questa è l’implementazione che suggerisco.
► Contro: come tutti i Plugin è sempre una rogna da gestire (aggiornamenti, conflitti, sicurezza) e se non utilizzi le varie opzioni che il Plugin offre, ma lo usi solo per implementare il tag, te lo sconsiglio.
Ecco l’implementazione che adatta ai developer (provenendo dalla programmazione me lo posso permettere!) ovvero creare delle funzioni custom per l’implementazione degli snippet di Google Tag Manager.
Per farlo devi lavorare sul file function.php che trovi all’interno del tema (ti consiglio di usare i temi child se no perdi tutto nel prossimo aggiornamento).
Ringrazio Marco Brughi per avermi suggerito l’aggiornamento del codice (a seguito delle ultime versioni di WordPress)
/*
* Insert Google Analytics Code
* 99 to right before </head> tag
*/
function hook_javascript() {
?>
<!-- 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-XXXXXX');</script>
<!-- End Google Tag Manager -->
<?php
}
add_action('wp_head', 'hook_javascript', 99);
// Add Google Tag code which is supposed to be placed after opening body tag.
add_action( 'wp_body_open', 'mb_add_custom_body_open_code' );
function mb_add_custom_body_open_code() {
echo '<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
'.PHP_EOL;
}
Se ti interessano delucidazioni sulla funzione scrivimi un commento, altrimenti prendilo come un assoluto. Ovviamente al posto di GTM-XXXXXX devi inserire il tuo codice GTM.
I pro e contro di questa implementazione
► Pro: [SUPER-WHOOAA!] zero Plugin installati, zero problemi con il tema in quanto non vai a smanettare sulla struttura del template (non è detto che nell’header.php sia così semplice individuare il <body>, a volte vengono fatte 10mila chiamate interne a classi e funzioni).
► Contro: [WHAAT?] Il fatto che non abbiamo la gestione dei dati nativi di WP del Data Layer, ma se sei un bravo programmatore potresti gestirli tu stesso!
Ora tocca a te. Installa Google Tag Manager tramite WordPress e se dovessi avere dei problemi non esitare a scrivermi qui sotto 🙂
Alla prossima guida e… buon Tag!
Negli ultimi mesi hai notato in Google Analytics 4 un calo improvviso e inspiegabile nelle…
Se ti trovi su questa guida è perché hai compreso che solo attraverso la Data…
Greenpeace è un'associazione globale che con azioni dirette e concrete denuncia i problemi ambientali e…
Da quando hai configurato la Consent Mode v2 (CM v2) hai notato cali improvvisi o…
Premesso che non è possibile conoscere l'esatto funzionamento né di Chrome, né degli algoritmi di…
Da quale canale di marketing arriva il maggior numero di conversioni? Quale campagna di marketing…
View Comments
L'opzione "Codeless injection" è stata rimossa.
Per la parte noscript preferisco usare "Manually coded" e inserire questo codice attraverso il plugin "Code Snippets" (comodissima alternativa a functions.php) rendendolo attivo solo nell'area pubblica:
if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) {
add_action( 'wp_body_open', 'gtm4wp_the_gtm_tag' );
}
Matteo, cosa ne pensi?
L'hanno solo spostata e cambiato nome, ora c'è Container code: On/Off
Se vuoi usare una funzione custom con quell'hook va benissimo :)
A presto!
Ciao Matteo, siccome il plugin Google Tag Manager for WordPress non permette di verificare l'identità tramite Tag Manager su Search Console ma è ottimo per inserire facilmente dati all'interno del data layer, cosa ne pensi se inserisco gli snippet di Tag Manager nella sezione apposita indicata da Elegant Themes (quelli che hanno prodotto Divi che è il tema WordPress che utilizzo) e nel plugin Google Tag Manager for WordPress spunto la casella "off (only add data layer to the page source)".
Non dovrebbe creare alcun problema questo settaggio giusto?
Grazie mille del tuo tempo.
Ciao Marco, ti direi che è la soluzione al tuo problema ed un ottimo workaround :)
A presto!
Ciao Matteo,
ti ringrazio per l'ottimo tutorial e ti faccio i complimenti per la competenza ed il lavoro che stai facendo.
Ho provato ad utilizzare lo script di cui al punto 3) da installare nel functions.php ed in effetti GTM funziona, ma, come ad altri, il TAG assistant mi da questo alert: “GTM no-script code not found: either missing or not in ”.
Ho creato uno snippet utilizzando l'hook di Wordpress wp_body_open che potrebbe essere utile .
Ho provato ad inserire il codice qui, ma viene (ovviamente) bannato nel commento.
Perciò l'ho pubblicato sul mio account GitHub:
https://gist.github.com/mbrughi/1019b733180c39307c33a752024529e2
oppure sul mio sito/blog:
https://marcobrughi.com/wordpress-come-installare-google-tag-manager/
Spero possa essere utile.
Grazie. Saluti!
Ciao Marco, grazie di questo tuo feedback. Ho aggiornato la guida :)
Grazie per l'articolo illuminante,
mi chiedo solo perché è sconsigliato l'inserimento nel footer.....migliora non di poco il punteggio di pagespeed.
C'è qualche motivo in particolare?
Ciao Fabio,
La motivazione principale è che più lo installi in basso nella pagine del tuo sito e più tardi verrà eseguito lo script di GTM.
Questo comporta che ovviamente anche i tag si caricheranno più tardi e, se il tuo sito web è lento, corri il rischio di perderti dati dagli utenti che rimangono poco tempo sul sito.
Fammi sapere se hai capito.
PS: Ma secondo te, Google crea uno strumento di tracking che deve essere installato in un certo modo e poi per questioni SEO ne stravolge il funzionamento per avere un punticino in più su pagespeed?
Io tra dati qualitativamente più validi e dei punti in meno di pagespeed, scelgo la prima a mani basse.
A presto :)
Ciao ,
devo inserire con google tag manager dei tag su vari punti del sito (form mail, click su un pulsante whatsapp). il sito ha più pagine e in ogni pagina è presente il form contatti. Come posso procedere? Ho già utilizzato la tua guida per l'inserimento dei tag con il plugin google tag manager for Wordpress per tutte le pagine ma appunto prende in considerazione solo le pagine non la singola sezione del sito.
Grazie mille
Ciao Dario :)
Se devi passare questi eventi a Google Analytics Universal dai un’occhiata a queste guide:
https://www.tagmanageritalia.it/guida-base-tracciare-click-sui-pulsanti/
https://www.tagmanageritalia.it/guida-base-tracciare-la-compilazione-di-un-form-contatti-con-google-tag-manager/
Buon Tag!
Ciao Matteo,
ho provato ad installare il codice di gtm tramite editor ma mi dà errore su questa riga che è la prima da installare prima della fine del tag head
Questo è il messaggio
Le tue modifiche al codice PHP sono state annullate a causa di un errore alla linea 57 del file wp-content/themes/enfold-child/header.php. Correggi e prova a salvare nuovamente.
syntax error, unexpected '<', expecting end of file
Ciao Luigina!
Scrivi un post sul gruppo Facebook “Fatti Di Tag Manager” inserendo lo screenshot dello script.
Grazie ;)
Ciao Matteo,
ho seguito il terzo metodo inserendo gli snipped su functions.php.
Quando entro in anteprima mi si apre il tag assistant, inserisco il sito e avvio il debug. Apre una nuova finestra con il sito ma dopo 30 secondi circa va in timeout con il seguente messagio:
"Tag Assistant could not connect to a tag on".
"Retry".
"A timeout occurred while attempting to connect. Check that the page is tagged correctly and no errors have occurred."
Nel functions.php ci sono altre function, action ed enqueque di richiamo del child. Un che posizione devo mettere le functions? subito dopo <?php, prima di tutte le altre oppure anche dopo?
Ciao Matteo,
googlando ho scoperto che il tag assistant non funziona con il Bowser brave e da prove fatte riscontro che anche il browser SeaMonkey fornisce lo stesso errore in preview mode. Cio' accade perche' tra i settaggi dei rispettivi browser sono definite delle impostazioni di sicurezza che lo bloccano.
Questo il link da cui ho attinto: https://www.analyticsmania.com/post/google-tag-manager-preview-mode-not-working/
Spero di non crearti noie per aver pubblicato un link esterno, lo condivido in ottica opensource perche' possa essere utile anche ad altri, magari potrebbe essere uno spunto anche ad approfondire il tuo articolo.
Intanto ti ringrazio per la tua disponibilita' e complimenti per il tuoi articoli.
Ciao Luca, di questi argomenti (blocco del tracking e dei cookie) ne ho parlato ampiamente nel Club Tag Manager Italia (trovi qui dettagli per iscriverti se ti può interessare https://club.tagmanageritalia.it/shop/) :)
Sono stato uno dei primi a parlare di Brave nel lontano 2019 :D
Ti consiglio caldamente di fare debug sempre con Chrome ;)
Uh non ti preoccupare, conosco moooolto bene il buon Julius (trovi alcune nostre foto qui https://www.matteozambon.it/)
A presto!
Ciao Luca, sicuramente c'è qualche altro webhook che cozza. Ti consiglio di chiedere ad un developer di WP per i dettagli.
A presto
Ciao Matteo, complimenti per l'ottimo articolo, chiaro ed esaustivo.
Vorrei chiederti una cosa... Io ho incollato il tuo codice nel file functions.php del mio child. Per tutta risposta l'Assistant mi restituisce questo errore: "Invalid call to gtag(), the Global site snippet is not installed". E infatti non funziona.
Cosa devo fare?
Grazie, continua così! ;-)
Ciao Daniele, devi pubblicare almeno una volta il container per non avere errori: https://www.tagmanageritalia.it/come-risolvere-lerrore-di-tag-assistant-neterr_aborted-in-google-tag-manager/
Fammi sapere!
Buonasera Matteo,
sto riscontrando da qualche mese questo problema:
Scompare improvvisamente lo script di GTM all'interno della mia pagina in Wordpress.
L'implementazione é stata fatta manualmente, ma dopo un po' di tempo senza alcuna regolaritá il codice torna a scomparire.
Ho tentato di rinstallarlo 5/6 volte, ma passa qualche giorno o settimana e il codice torna a scomparire.
In concomitanza di questa anomalia non rilevo alcun aggiornamento o intervento sul sito.
Non ne riesco a venire a capo.
Spero tu possa darmi qualche spunto.
Cari saluti
Ciao Dario, allora partiamo con ordine:
non mi hai detto in che modo lo hai implementato, immagino lato codice direttamente nel tema.
Se è così assicurati di farlo nel tema child e non nel parent. Stai attento ad eventuali sistemi di backup o di aggiornamento.
Io se fossi in te userei il plugin di Duracell Tomi in quanto ti dà la possibilità di avere già una serie di dati a disposizione nel dataLayer.
Fammi sapere!
PS: Se vuoi darmi dettagli c'è anche il gruppo di Facebook "Fatti di Tag Manager"
Ciao Matteo. ho seguito la tua guida per i tag di google e dove inserirli
Ho però dei problemi nella visualizzazione in analytics. Non vedo mai gli utenti in tempo reale.
Ho usato il metodo 3, quello in cui includo lo snippet in function.php
Qualche giorno fa funzionava, ora non più
Sai darmi una mano? Ps: il tema è Child
Questo è il sito : https://psqwatches.com
Ciao Simone, vedo l'hit di pageview quindi dovrebbe funzionare. Hai inserito dei filtri nella vista? Nel caso scrivimi pure sul gruppo: https://www.facebook.com/groups/TagManagerItalia e inviami degli screenshot della configurazione di GTM.
A livello di script è corretto, GTM è installato correttamente.
Fammi sapere