Google Tag Manager e integrazione su WordPress

Google Tag Manager

Google Tag Manager è uno strumento di Google messo a disposizione gratuitamente per gestire ed installare script di codice all’interno dei siti web. Attraverso Google Tag Manager (GTM), è possibile inserire più tipi di script sui siti web, senza doverli implementare direttamente nelle pagine. In sostanza, una volta inserito uno script (quello di GTM) nel sito, tutti gli altri (analytics, adwords, pixel facebook, eccetera) saranno implementati attraverso la console GTM.

Cos’è Google Tag Manager

Come spiegato sopra. GTM è uno strumento gratuito per l’inserimento degli script sui siti web. Google Tag Manager genera due script iniziali che dovrai inserire nel sito. Dopodiché, qualsiasi altro script potrà essere gestito sulla console GTM senza dover più mettere mano al codice del sito web.

Per chi utilizza WordPress c’è un plugin che permette l’inserimento degli script generati da Google Tag Manager, semplificando anche la prima operazione di inserimento.

Come funziona Google Tag Manager

Iniziamo con l’impostare il nostro strumento Google Tag Manager andando all’indirizzo https://www.google.com/intl/it/tagmanager/. Se non abbiamo un account su Google creiamolo. Se lo abbiamo già possiamo utilizzarlo per accedere (è lo stesso di Gmail e degli altri prodotti Google).

All’inizio ci verrà chiesto di impostare un account. In questa fase potete metterci un nome a vostro piacere.

Google Tag Manager imposta account

Google Tag Manager imposta account

 

Successivamente viene chiesto di dare un nome al “contenitore“. Perché contenitore? Perché l’account potrà contenere tutti gli script da integrare sul sito di cui avrete bisogno. Come indicato nel suggerimento, potete utilizzare il nome di dominio per identificare il contenitore.

Google Tag Manager imposta contenitore

Google Tag Manager imposta contenitore

Come potete vedere, Google Tag Manager sarà in grado di gestire gli script sia per i siti web che per le applicazioni iOS e Android, nonché per le pagine AMP.

Se lo volete utilizzare per il vostro sito, scrivete il nome del dominio, selezionate il pulsante WEB e cliccate sul pulsante Crea.

Terminata questa procedura dovete accettare le condizioni e proseguire.

Ora, GTM visualizzerà 2 script che dovrete copiare ed incollare nel codice HTML del vostro sito. Il primo nella head ed il secondo, subito dopo l’apertura del tag Body. Vediamo come fare.

Inserire gli script di Google Tag Manager nell’HTML del sito

Ecco come si presentano gli script generati da Google Tag Manager (vedi immagine che segue).

Google Tag Manager codice installazione

Google Tag Manager codice installazione

Il primo script va inserito nella head del sito

Per i siti HTML, scaricate ed aprite tutti i file .html con un editor di testo ed incollarlo prima della chiusura del tag head. Dato che ci siete, incollate la seconda porzione di codice subito dopo l’apertura del tag <body>.

inserimento script di google tag manager nel codice html

inserimento script di google tag manager nel codice html

 

Per i siti realizzati in WordPress, potete utilizzare un plugin apposito di cui parleremo dopo, oppure inserirli con lo stesso metodo dei siti in HTML.

Iniziamo dallo script da inserire nell’head (che volendo potete inserire anche nel footer).

Portatevi sulla bacheca di WordPress ed aprite Aspetto e poi cliccate su Editor.

Adesso selezionare il file header.php, indicato anche come “Testata del Tema” in italiano.

header del tema wordpress

header del tema wordpress

Individuate il tag di chiusura </head> e proprio sopra incollate il primo script.

 

inserimento script GTM nella header di WP

inserimento script GTM nella header di WP

 

Il Secondo script va inserito subito dopo l’apertura del tag <body>

Veniamo al secondo script di Google Tag manager, da inserire subito dopo l’apertura del tag <body>.

Con i siti HTML abbiamo già visto come fare. Con WordPress dovremo andare ad individuare il file corrispondente.

Di solito nel file header.php trovate anche il tag body, a meno che non sia un tema che lo richiama tramite funzioni php. In questo secondo caso, se non si è esperti, consiglio di affrontare la cosa installando il plugin per Google Tag Manager di cui parleremo in seguito. Se però vi trovate nel file header.php il tag <body>, è subito dopo questo che dovrete inserire il secondo script.

inserimento script GTM nel body su WordPress

inserimento script GTM nel body su WordPress

 

Adesso avete implementato gli script di Google TAG Manager sul vostro sito.

Nel Caso non trovaste il file di Worpdress per inserire gli script

Esiste anche una terza soluzione per inserire gli script di Google Tag Manager su WordPress. La soluzione migliore perché andiamo ad agire sul file functions.php del tema. Unica precauzione è quella di utilizzare il functions.php del tema child, oppure farsene una copia in locale di backup perché se si aggiorna il tema, le modifiche effettuate saranno cancellate e lo script GTM non funzionerebbe più.

Inserte queste istruzioni che seguono alla fine del file functions.php, prima della chiusura del codice ?> e salvate. Naturalmente, al posto degli script GTM presenti nel codice, dovrete inserire i vostri.

function tmi_head_snippet() {
$snippet = “<!– 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 –>”;
echo $snippet;
}
add_action( ‘wp_enqueue_scripts’, ‘tmi_head_snippet’, 10000);
add_filter(‘body_class’, ‘tmi_snippet’, 10000);
function tmi_snippet( $classe)
{
$snippet = <<<‘TMI’
<!– 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) –>
TMI;
$classe[] = ‘”>’ . $snippet . ‘<br style=”display:none’;
return $classe;
}

Onde evitare errori di copiatura, (con le virgolette a volte si crea un casino), scaricatevi il codice in formato txt da qui.

Questa soluzione è stata gentilmente messa a disposizione pubblicamente sul sito tagmanageritalia.

 

Come inserire lo script di Google Analytics con il Google Tag Manager

Google Analytics è fondamentale per l’analisi del nostro sito. Questo tool riesce a darci tantissime informazioni, tra cui il numero di visitatori, il loro comportamento sul sito, il tipo di visitatore e tanto altro.

Senza Google Tag Manager dovevamo andare a inserire sul nostro sito lo script generato da Google Analytics. Con GTM invece, agiremo direttamente sulla sua console. Vediamo come fare.

Torniamo dunque su Google Tag Manager. Lo avevamo lasciato con la finestra contenente i due script da integrare sul sito aperta.

Per integrare su GTM Google Analytics, dovremo avere un account su di esso naturalmente e do per scontato che sia così.

Ora, su Google Tag Manager, cliccate su nuovo TAG.

Google Tag Manager Nuovo Tag

Google Tag Manager Nuovo Tag

 

 

Per prima cosa dovremo configurare il tag cliccando su “Configurazione Tag”. Ci si aprirà un elenco di tag utilizzabili. Per il nostro scopo utilizzeremo il Tag di Google Analytics.

 

Google Tag Manager Scelta Tipo di Tag

Google Tag Manager Scelta Tipo di Tag

 

Andremo quindi a selezionare Universal Analytics e come tipo di monitoraggio andremo a scegliere uno degli elementi a disposizione. Per l’esempio utilizzeremo “Visualizzazione di pagina“.

Nel campo “Seleziona Variabile” invece, dovremo inserire il nostro ID di monitoraggio di Google Analytics nella forma UA-xxxxxxxxx-x.

Dopodiché dovremo attivare il Tag, cliccando su Attivazione. La console ci farà scegliere tra i vari tipi di attivatori. Per il nostro scopo di adesso il tag attivatore sarà “ALL PAGES”.

Salviamo il tutto e abbiamo terminato.

Abbiamo integrato Google Analytics senza scrivere lo script apposito sul nostro sito (quindi non lo abbiamo appesantito), ma semplicemente utilizzando Google Tag Manager.

Integrare il Monitoraggio delle Conversioni Adwords in GTM

Allo stesso modo è possibile integrare il monitoraggio delle conversioni di Adwords, scegliendo la voce omonima a cui poi farà seguito la seguente finestra:

Google Tag Manager monitoraggio converisoni Adwords

Google Tag Manager monitoraggio converisoni Adwords

 

Queste le istruzioni per popolare i campi:

  1. Nel tuo account AdWords, vai su Strumenti > Conversioni 
  2. Seleziona il nome dell’azione di conversione che vuoi utilizzare dalla colonna Nome.
  3. Nella casella del codice, il numero dopo “var google_conversion_id = ” è l’ID di conversione, e il numero dopo “var google_conversion_label = ” è l’etichetta di conversione.

Il valore conversione lo decidete voi. Di solito si mette 1. Procedete con l’attivatore selezionando il tipo di valore che vi interessa e poi salvate.

Plugin WordPress Google Tag Manager

Con Tag manager è possibile inserire gli script di tantissimi servizi di cui usufruiamo, non solo dei prodotti Google. C’è la possibilità di inserire gli script dei Facebook Pixel, di Twitter, di siti che fanno affiliazione come Awin e tanti altri. Proprio come con Google Analytics e Adwords, si possono monitorare le più svariate tipologie di azioni sui nostri siti.

Una grossa mano in tal senso ce la può dare il plugin Google Tag Manager for WordPress.

Google Tag Manager For WordPress

Questo plugin può inserire i frammenti di codice del contenitore di GTM nel tuo sito web, in modo che non sia necessario aggiungere manualmente questo elemento. Per chi vuole conoscere tutte le potenzialità di questo plugin, è possibile visionare le guide passo passo realizzate dall’autore all’indirizzo http://duracelltomi.com/google-tag-manager-for-wordpress/how-to-articles/.

Noi invece ora andremo a vedere come configurare il plugin per un primo utilizzo di base.

Ovviamente dovrete installarlo. Basterà richiamarlo dalla pagina plugin –> aggiungi nuovo, sulla bacheca di WordPress, scaricarlo ed attivarlo.

Ora che lo abbiamo attivato andiamo a configurarlo.

Impostazione Google Tag Manager for WordPress

Impostazione Google Tag Manager for WordPress

Nel campo Google Tag Manager ID inserite il vostro ID di GTM che è rappresentato da un valore tipo GTM-XXXXXX (lo trovate sia nello script di GTM che sul suo pannello di amministrazione).

Poi dovete decidere dove inserire lo script potendo scegliere tra Footer, Custom, Codeless injection e Off). Optate tranquillamente per Codeless injection ma anche Footer va bene. Con Custom invece dovrete seguire delle semplici istruzioni e avrete l’opportunità di inserirlo dove volete.

A questo punto salvate ed il plugin già inizia a lavorare. Sarà pure necessario collegare il plugin con il data layer e altri elementi di GTM.

Portatevi quindi sulla tab “Dati di Base ” per selezionare gli elementi che volete monitorare. Ce ne sono tantissimi, dal click allo scroll della pagina, dall’invio della email al remarketing di Adwords e tanto, tanto altro ancora.

La potenza del sistema è talmente vasta che per sfruttarlo occorre approfondire di molto la materia ed imparare a comprendere e padroneggiare il Google Tag Manager.

Per la soluzione dei problemi consiglio di dare un’occhiata alla pagina del supporto. Un altro utente potrebbe aver avuto lo stesso problema e la stessa difficoltà. Se ne aveste bisogno, l’autore, DuracellTomi, risponde sempre. Ecco la pagina di aiuto https://wordpress.org/support/plugin/duracelltomi-google-tag-manager.

Approfondire Google Tag Manager

Se volete sfruttare al massimo la potenza e la versatilità di Google Tag Manager consiglio la lettura dell’ottimo libro “Google Tag Manager per principianti” di Matteo Zambon. Io stesso l’ho trovato molto utile per comprenderlo meglio ed imparare ad usarlo. È disponibile sia in versione cartacea che come e-book.

Summary
Google Tag Manager e integrazione su WordPress
Article Name
Google Tag Manager e integrazione su WordPress
Description
Cos'è Google Tag Manager e come funziona? Come si integra sui siti web? Esiste un plugin per Worpdress? GTM spiegato passo passo, dall'installazione all'integrazione con il sito
Author
Publisher Name
flavioweb.net
Publisher Logo

AD

About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell’indicizzazione,  nel posizionamento di siti internet e nell’utilizzo dei social media principali a fini di marketing.

Be the first to comment

Leave a comment

Your email address will not be published.


*


*