Custom HTML Tag in GTM — come usarlo senza rompere il sito • Meteora Web Agency

Hai mai dovuto integrare uno script che Google Tag Manager non supporta nativamente? Un pixel di una piattaforma poco comune, un tracciamento personalizzato, un snippet di chat che nessun template predefinito copre? A noi di Meteora Web è successo decine di volte. La soluzione sono i Custom HTML tag. Ma usarli male significa siti che rallentano, tracker che si rompono e dati persi. In questa guida ti spieghiamo come sfruttarli al meglio — con la concretezza di chi ci lavora ogni giorno.

Quando usare un Custom HTML tag in GTM invece di un tag predefinito?

GTM offre decine di tag template per Google Analytics, Facebook, LinkedIn e molti altri. Se il tuo strumento è tra questi, usa quello. I template sono ottimizzati, testati e gestiscono automaticamente variabili e trigger. Il Custom HTML tag serve quando:

Devi caricare uno script di terze parti non coperto (es. un plugin di live chat custom, un sistema di recensioni, un tracker di affiliazione esotico).
Devi eseguire codice JavaScript personalizzato per manipolare il DOM, leggere dati, scrivere cookie, o chiamare API non standard.
Devi integrare uno snippet che va caricato in una sequenza precisa (es. dopo il caricamento di un altro tag).
Devi implementare un tracciamento avanzato che non esiste nei template: eventi custom, timeout, callback.

Regola pratica: se esiste un template, usalo. Se non esiste, il Custom HTML è la tua ancora di salvezza. Ma con cautela.

Il problema del “copincolla” senza controllo

Abbiamo visto centinaia di implementazioni fatte con lo script incollato direttamente nell'head del sito. Risultato: manutenzione impossibile, conflitti con altri script, nessuna flessibilità. Inserire quello stesso script in un Custom HTML tag di GTM ti dà il controllo su quando viene caricato (trigger), dove viene eseguito (container scope) e se viene eseguito (variabili di consenso). È il modo giusto.

Come creare un Custom HTML tag sicuro e performante?

Ecco i passaggi operativi che seguiamo noi in ogni progetto.

1. Apri GTM e crea un nuovo tag

Vai su Tag > Nuovo.
Nella configurazione tag, scegli Custom HTML.
Dai un nome descrittivo (es. "Chat Widget - Tawk.to").
Incolla il codice HTML/JavaScript nel campo HTML.

2. Usa sempre il sandbox e la modalità asincrona

GTM esegue lo script in un ambiente controllato. Ma devi evitare di bloccare il rendering della pagina. Una best practice è caricare gli script in modo asincrono:

<script>
  // Il tuo codice qui
  console.log('Custom tag eseguito');
</script>

Importante: GTM non permette il tag <script> con attributo async direttamente (lo fa comunque in modo asincrono per default). Ma se hai necessità di sincronia (es. script che carica altri script), gestiscilo con callback.

3. Usa le variabili di GTM nel tuo codice

Puoi accedere a variabili predefinite o custom usando il pattern {{variabile}}:

<script>
  var pageType = '{{Page Type}}';
  var clientId = '{{Client ID}}';
  // Usa queste variabili per personalizzare il tracciamento
</script>

4. Attiva solo quando serve

Collega un trigger specifico. Non attivare mai un Custom HTML tag su “All Pages” se non strettamente necessario. Usa trigger condizionali (es. pagina prodotto, clic su pulsante, invio form) per ridurre il carico e migliorare le performance.

5. Testa con la preview

GTM ha un comodo strumento di preview. Attivalo, visita il sito e controlla nella console del browser se il tuo script viene eseguito senza errori. Usa console.log per tracciare l'esecuzione.

Quali errori evitare con i Custom HTML tag?

Noi ne abbiamo visti tanti. Ecco i più comuni e come evitarli.

Errore 1: Non declinare le variabili all'interno dello script

Il codice document.write è vietato da GTM (viene bloccato). Usa invece innerHTML o appendChild.

Errore comune: scrivere variabili globali senza namespace, causando conflitti. Soluzione: avvolgi il codice in una funzione IIFE:

<script>
  (function() {
    var myVar = 'valore';
    // tutto lo script qui
  })();
</script>

Errore 2: Dimenticare il caricamento asincrono

Alcuni script (es. tracker di affiliazione come TradeTracker) necessitano di essere caricati prima del DOMContentLoaded. Usa il trigger Page View con priorità alta. Altri script (es. widget di chat) meglio caricarli dopo il caricamento della pagina per non impattare il First Contentful Paint.

Errore 3: Non gestire il fallimento

Se lo script esterno non si carica (es. server down), il tuo sito non deve rompersi. Aggiungi gestione errori:

<script>
  try {
    // codice che potrebbe fallire
  } catch(e) {
    console.warn('Custom tag fallito:', e);
  }
</script>

Errore 4: Sovraccaricare il tag con tutto il codice inline

Se hai molto codice (centinaia di righe), considera di ospitarlo su un CDN e caricarlo via tag, riducendo il peso del container GTM. GTM scarica tutto il contenuto dei tag, quindi un tag enorme appesantisce il sito.

Come testare e debuggare un Custom HTML tag?

Usa questi strumenti:

GTM Preview mode: mostra quali tag si attivano, con errori in console.
Google Tag Assistant (legacy): utile per verificare che il tag venga eseguito.
Network tab del browser: controlla che lo script richiesto venga caricato.
Console.log: inserisci log temporanei per seguire il flusso. Ricorda di rimuoverli prima di pubblicare.

Noi, di Meteora Web, usiamo spesso un ambiente di staging con GTM in modalità debug, poi pubblichiamo solo dopo test completi su più browser e dispositivi.

Cosa fare adesso

Identifica uno script sul tuo sito che attualmente è hardcoded nel tema (es. un pixel di conversione).
Spostalo in un Custom HTML tag in GTM, con un trigger appropriato (es. Page View per pagine specifiche).
Testa in preview che funzioni esattamente come prima, controllando la console.
Pubblica dopo aver rimosso lo script dal tema.
Monitora per qualche giorno per verificare che i dati continuino ad arrivare correttamente.

Se hai bisogno di una consulenza approfondita, leggi la nostra guida completa su Google Tag Manager o contattaci direttamente.

Documentazione ufficiale: Google Tag Manager Custom HTML Tags