Per attivare Google Tag Manager nel tuo sito dovrai prima di tutto inserire la stringa di codice di Tag Manager all’interno della sezione <body> del codice HTML del tuo sito. Si, sarà la prima e unica volta che ti dovrai “sporcare” le mani inserendo manualmente il codice, ma è necessaria 🙂

Di seguito ti spiegherò come inserire lo 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 te ne dirò un terzo [trucco] che solitamente applico in situazioni particolari. Lascio a te decidere la strada migliore (se hai bisogno di un consiglio lascia un commento!).

 

1. Installazione tramite Editor

Copiare lo snippet

Una volta creato l’account, dovrai copiare lo snippet fornito da Google.

Installare Google Tag Manager Tramite WordPress 1

Incollare lo snippet nella pagina HTML

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 poter modificarlo. Non ti resta che cercare la sezione body all’interno del codice di questo file ed incollare lo snippet di Tag Manager precedentemente copiato, subito dopo l’apertura della sezione <body>.

Installare Google Tag Manager Tramite WordPress 2

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 è utilizzare temi child (sono davvero molto fichi!).

 

2. Installazione tramite Plugin

Vediamo ora come fare la stessa procedura, aiutandoci però con un Plugin.

Installare il Plugin

Dal pannello di controllo di WordPress, recati 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 DuracellTomi’s Google Tag Manager for WordPress“. Perché ti consiglio questo Plugin? Dunque, l’autore ne sa qualcosa ed è il Plugin con più installazioni e recensioni positive.

Installare Google Tag Manager Tramite WordPress 3

Configurare il Plugin

Dopo aver attivato “DuracellTomi’s 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.

Installare Google Tag Manager Tramite WordPress 4

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.

Installare Google Tag Manager Tramite WordPress 5

Grazie a questo Plugin potrai anche impostare in maniera estremamente semplice il tracciamento di eventi, scrolling, inserire alcuni tag in una black list in modo da non essere eseguiti. Ti svelo una chicca, per queste funzionalità vengono implementate delle librerie javascript sviluppate da terzi. Google Tag Manager è molto potente però non riempirlo di 100mila tag perché il sito ne risente a livello di caricamento (anche se asincrono!).

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.

► 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.

 

3. [TRUCCO] Soluzione ad Hoc su function.php

Ecco l’implementazione che preferisco (provenendo dalla programmazione me lo posso permettere!) ovvero creare delle funzioni custom per l’implementazione dello 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 sennò perdi tutto nel prossimo aggiornamento).

 

add_filter('body_class', 'tmi_snippet', 10000);
 
function tmi_snippet( $classe)
{
$snippet = <<<'TMI'
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-XXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<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=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->
TMI;
$classe[] = '">' . $snippet . '<br style="display:none';
return $classe;
}

 

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 vado 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?] Nessuno direi 🙂 forse il fatto che non abbia già dei framework javascript (scrolling)  e la gestione del data layer, ma sono gestibili lo stesso!

 

Ora tocca a te. Installa Google Tag Manager tramite WordPress, se dovessi avere dei problemi non esitare a scrivermi qui sotto 🙂

Alla prossima guida e… buon Tag!

  • Reply

    Valentina

    02 03 2017

    Ciao Matteo,

    Ho letto coscienziosamente l’articolo sull’installazione Google Tag Manager, ma non sono riuscita ad ottenere la tanto agognata faccina verde dal Tag Assistant.
    Ora ci sono 2 codici da inserire, e benché abbia fatto vari tentativi nell’Editor di WP non sono riuscita a installarlo correttamente.
    Dove sbaglio?

    Grazie in anticipo per l’aiuto!

    • Matteo Zambon

      02 03 2017

      Ciao Valentina!
      Tag Assistant che errore ti visualizza? Se per caso è “Invalid or missing account ID” non ti preoccupare! È un bug del plugin che sopra le 6 cifre del codice di GTM ti segnala questo. Da un po’ di tempo le cifre sono passate a 7 (viste le continue creazioni di tag).
      Farò un articolo che lo spiega, visto che non sei l’unica 🙂

      A presto!

    • Valentina

      02 03 2017

      Sì mi sembra uscisse quello e qualcos’altro…
      Ma il luogo esatto dove inserirli qual è?
      Io ho messo la prima parte di codice in header.php subito sotto e la seconda parte di codice subito dopo il (che nel mio caso è <body >).
      E’ giusto?

    • Valentina

      02 03 2017

      Questi sono i messaggi che escono dal Tag Assistant:

      (rosso) Invalid or missing account ID

      (giallo) HTTP response code indicates tag failed to fire: Status 404. This could be due to an empty or un-published container

      (blu) Code found outside of tag

    • Matteo Zambon

      03 03 2017

      Ciao Valentina, ti confermo che è corretta l’implementazione (a breve aggiornerò questa guida con la nuova implementazione)

      Per quanto riguarda i tag: il giallo è perché non sono pubblicati tag, l’altro ogni tanto compare a seconda dell’esecuzione, ma dovrebbe essere un falso positivo.
      Per tagliare la testa al toro, pubblica un tag e mettiti in debug, se ti esce la preview di debug allora boom! Tutto funziona 🙂

  • Reply

    Valentina

    02 03 2017

    Ciao Matteo,
    correggimi se sbaglio, ma ora i codici da inserire sono 2 diversi in 2 posizioni diverse, corretto?
    Dove si devono inserire ora i codici?
    Grazie mille!

    • Matteo Zambon

      02 03 2017

      Ciao sì i codici da settembre sono 2 🙂 Li vedi inserire rispettivamente nel tag head (all’inizio) e nel tag body (appena dopo l’apertura).
      A breve aggiornerò questo articolo che effettivamente ha ancora la versione vecchia. Grazie della segnalazione!

  • Reply

    Maria Paola

    27 01 2017

    Ciao Matteo, molto esaustivo il tuo articolo.
    Ho un piccolo dubbio…tutto parte dal fatto che voglio evitare di installare il plugin…ma quando vado su aspetto –> editor, se vado a scegliere e a lavorare sul tema child non c’è alcun elenco dei file funzioni del tema (eccetto “function.php” per il quale non c’è alcun codice rilevante, e “foglio di stile” per il quale appaiono solo info sul tema)…Invece, se vado a scegliere il tema genitore, mi appaiono tutte le funzioni del tema e immagino che lì potrei effettuare tutte le modifiche , inserendo anche il codice di tag manager. E’ corretto? Bisogna lavorare sul tema genitore pur utilizzando il tema child, senza che il codice e il servizio di tag manager subiscano problemi?

    • Matteo Zambon

      27 01 2017

      Ciao Maria,
      la soluzione è creare una funzione su function.php dove inserisca il codice di GTM attraverso gli hook di WordPress (soluzione 3). In realtà dovrei aggiornare il codice perché questo della guida lo inserisce appena dopo l’apertura del body.
      Dovresti generare 2 hook uno per l’head e l’altro per il body (prometto di aggiornare l’articolo) 🙂

      A presto!

  • Reply

    Laura

    04 01 2017

    Ciao,
    ultimamente per lavoro utilizzo spesso GTM. Di recente mi è capitato di usarlo con WordPress e, seguendo il tuo consiglio, ho installato il plugin Duracell Tomi.
    Tu dici “Hai la possibilità di inserire anche dei valori personalizzati”, mi sapresti spiegare come?
    Il plugin infatti prevede delle variabili preimpostate molto utili ma se volessi passare nel dataLayer dei dati totalmente personalizzati? E’ possibile farlo?

    Grazie,

    • Matteo Zambon

      04 01 2017

      Ciao Laura, si in realtà lo devi fare comunque eseguendo dei push nel dataLayer e quindi inevitabilmente o a livello di codice PHP di WP oppure con un HTML personalizzato. Ho dato un occhio al plugin e vedo che è messa come una featured richiesta e probabilmente creata in un futuro.

      A presto!

      Matteo

  • Reply

    Gabriele

    14 07 2016

    Ciao Matteo!
    Grazie mille, ho trovato utilissimo il “trucco” utilizzando il file functions.php dato che uso un child theme.
    Ti segnalo che però nel fare copia incolla bisogna sostituire qualche carattere: ‘’”

    Grazie ancora, mi sono avvicinato poco fa a TagManager e ho trovato utilissimi i tuoi articoli, continuerò a seguirti 🙂

    • Matteo Zambon

      14 07 2016

      Ciao Gabriele, sono contento che il #barbatrucco ti sia stato utile!

      Grazie delle segnalazione, ho aggiornato con la codifica dei caratteri corretti 🙂

      A presto e sì, continua a seguirmi (ps se ti iscrivi alla newsletter riceverai delle chicche).

  • Reply

    Giovanna

    12 05 2016

    Ciao Matteo,

    Non capisco che differnza ci sia tra la prima e l’ultima soluzioni head.php e l’ultima funcion.php

    head.php viene sovrascritto quando vengono fatti gli aggiornamenti?

    • Matteo Zambon

      12 05 2016

      Ciao Giovanna, hai già risposto 🙂 nell’header.php tipicamente se il tema viene aggiornato perdi le modifiche, mentre sul function.php del tema child no. A presto!

  • Reply

    Claudio

    11 02 2016

    Ciao, ho iniziato a seguire il tuo sito per implementare Google tag manager. Ho creato l’account e copiato il codice all’interno del file header.php su word press, come consigliato qui. Successivamente ho integrato il codice analytics e tutto funzionava correttamente, poi, mentre seguivo la tua guida per il refferal spam, improvvisamente tutto ha smesso di funzionare e il plug-in di chrome Google Tag Assistant riporta questi errori:

    1. Invalid or missing account id
    2. URL Encoding Error
    3. HTTP response code indicates tag failed to fire: Status 404. This could be due to an empty or un-published container

    Adesso analytics non registra nessuna visita. Puoi aiutarmi?
    Grazie in anticipo.

    • Matteo Zambon

      11 02 2016

      Ciao Claudio, dall’errore si evince che lo snippet di GTM ha qualche problema. Hai per caso toccato lo script, oppure c’è stato un aggiornamento del tema che ha sovrascritto il file header.php? Se si ti consiglio di usare temi child in WordPress. Ecco la guida ufficiale di Google dove ti spiega nel dettaglio cosa significa quel problema: https://support.google.com/tagassistant/answer/3207128?hl=en#invalid_id
      Fammi sapere, a presto!

    • Claudio

      11 02 2016

      Ciao Matteo, grazie per la celere risposta . In realtà non c’è stata alcuna modifica al file header.php, tra l’altro lo snippet era già stato inserito nel tema child. Il mancato funzionamento è stato piuttosto improvviso, dopo un paio d’ore dall’iscrizione a tag manager e l’implementazione del codice con analytics, ho provato a seguire la guida per l’eliminazione del referral spam accorgendomi che non funzionava più nulla.

    • Matteo Zambon

      11 02 2016

      Ciao Claudio ma il codice dello snippet appare se guardi il sorgente della pagina? Se togli le implementazioni fatti per lo spam referral ti torna funzionante?

    • Claudio

      11 02 2016

      Si, guardando il sorgente pagina il codice c’è e sembra anche corretto, appare circa alla riga 58. Ho provato a eliminare le impostazioni dello spam referral ma senza risolvere, ho anche provato a eliminare del tutto il contenitore e a ricrearlo (quindi con un nuovo codice GTM. Proprio non riesco a capire, per qualche ora non c’era nessun problema e analytics conteggiava normalmente le visite, poi all’improvviso nulla più. Se può essere utile posso dirti che il tema usato è questo: http://www.elegantthemes.com/demo/?theme=Divi
      Ho visto che nelle opzioni tema–>integrazioni, c’è un box specifico per il body, dove solitamente consiglia di mettere il codice analytics. Ho anche provato a mettere lì il codice costatando che la posizione effettiva sulla pagina è la medesima rispetto all’implementazione nel file header.php.
      Grazie davvero per l’aiuto. Mi torna utile usare il tag manager per il referral spam, l’esclusione del traffico interno e l’implementazione dei codici di monitoraggio facebook e adwords.

    • Matteo Zambon

      11 02 2016

      Dunque il codice deve stare immediatamente dopo il body. Forse sarebbe più utile se mi indicassi il sito web così do un occhio 🙂
      PS: se hai problemi a dichiarare il dominio inviami la email a mz@inrisalto.it

  • Reply

    Daniele

    08 02 2016

    Ciao Matteo,
    complimenti, bel post. Ho provato la terza strada ma mi dà “Errore del server | Errore 500”, aggiungendo in fondo al file functions.php la stringa che hai messo.
    Com’è possibile?

    Grazie mille e ancora comnplimenti sinceri

    • Matteo Zambon

      08 02 2016

      Ciao Daniele, grazie dei complimenti 🙂
      Sei sicuro di aver copiato esattamente lo script? Solitamente errore 500 è dovuto a codice a cui manca (per esempio) la chiusura del tag o il punto e virgola mancante.
      Verifica bene e fammi sapere!

  • Reply

    Riccardo

    04 02 2016

    Ciao Matteo, complimenti per l’articolo !

    Ho provato ad implementare google tag manager tramite plug in usando la modalità codeless injection. Ho controllato subito dopo l’installazione con Tag Assistant ma google tag manager non risulta presente sul mio sito…Forse dovrò attendere un pò prima che google riconosca l’installazione ? Grazie Riccardo

    • Matteo Zambon

      04 02 2016

      Ciao Riccardo, e grazie per i complimenti (sempre graditi!).

      Dunque se la funzione codeless injection non funziona significa che probabilmente il tema che usi non permette alla funzione del plugin di “iniettare” il codice di GTM. Se noti infatti lo stesso autore dichiara che potrebbe non funzionare. La soluzione alternativa è usare la seconda voce “custom” e inserirlo direttamente nel template (solitamente header.php) andando su aspetto->editor dal menù di backend.
      L’autore dice:
      Select how your container code should be included in your website.
      If you select ‘Custom’ you need to edit your template file and add the following line just after the opening tag:

      < ?php if ( function_exists( 'gtm4wp_the_gtm_tag' ) ) { gtm4wp_the_gtm_tag(); } ?>

      A presto!

  • Reply

    simone

    27 01 2016

    ooooo bello questo ci piace!! 🙂

  • Reply

    simone

    27 01 2016

    CIao riguardo al plugin in questione, rallenta parecchio il sito?
    Prendendo un esempio, tracciare lo scroll. Attivandolo dal plugin mi facilita perche mi inserisce automaticamente il codice java senza andarlo ad inserire a mano giusto?

    Un’altra domanda da neofita 🙂 ovviamente se io imposto tramite il plugin il tracciamento dello scroll…. poi su google tag manager dovrò gestire questo evento ed infine configurare il nuovo evento in analytics.

    Sono questi i passaggi giusto?

    • Matteo Zambon

      27 01 2016

      Ciao Simone, nel dettaglio non so se il plugin inserisca il codice esterno js per lo scrolling attraverso GTM o se lo includa direttamente su WP (dovresti verificare nel sito dell’autore). Nel primo caso no perchè lavora in asincrono, nel secondo viene inserito il codice quindi potenzialmente sì, ma è valido come un qualsiasi script JS. Comunque sì attivando il flag non devi fare nulla. Sulla tua seconda domanda sì, dovrai chiaramente creare un evento GA e gestirlo. Molto probabilmente il buon Duracell Tomi avrà fatto una specie di guida nel suo sito. Ti svelo una chicca, nelle prossime guide spiegherò come tracciare lo scroll ma senza il plugin, ma facendolo con GTM. A presto!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *