Come installare Google Tag Manager tramite WordPress

[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!).

1. Installazione tramite Editor

Copiare lo snippet

Una volta creato l’account, dovrai copiare i due snippet forniti da Google Tag Manager.

Incollare gli 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 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!).

2. Installazione tramite Plugin

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

Installare il 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 a 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.

Configurare il Plugin

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:

• WooCommerce per la gestione dell’ecommerce sia Google Universal Analytics che GA4
• Contact Form 7

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.

3. [Via Codice] Soluzione ad Hoc su function.php

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!