Come taggare facilmente gli eventi web con GTM e GA4 grazie all’IA

Misurare gli eventi su un sito web sembra facile.

Però poi apri ognuno dei tuoi template di WordPress e inizi a pensare a clic, pulsanti, moduli, transazioni, form, menu, CTA, schede, banner, sidebar…

E lo rimandi a un altro giorno.

Perché una cosa è pensare “voglio misurare ciò che succede sul mio sito” e un'altra, molto diversa, è taggare bene un sito reale.

Un sito con template diversi.

Con moduli ripetuti in varie sezioni.

Con schede e tab che sembrano uguali ma cambiano in qualcosa.

Con pulsanti visivamente identici che però svolgono funzioni completamente diverse.

E qui, come in molte altre parti, l'IA può aiutarti parecchio.

Non perché deciderà al posto tuo la strategia di misurazione -quella resta affar tuo, anche se può comunque proporti idee- ma perché può eseguire quasi tutto il lavoro: 

• Rivedere template.
• Rilevare moduli e componenti simili.
• Proporre una struttura riutilizzabile.
• Definire una nomenclatura se non hai chiara la tua.
• Preparare un contenitore GTM.
• E persino toccare il codice del tuo sito per, ad esempio, aggiungere attributi “data-” che facilitino la misurazione. 

Tutto questo l'ho appena fatto sul mio sito, quindi ti racconto il processo prendendo come esempio il mio caso reale.

Ho preparato la misurazione dei clic nei moduli editoriali del mio sito (articoli in evidenza, consigliati, novità, ecc. in ogni pagina), ma il sistema vale per qualsiasi evento.

Detto questo, qui abbiamo due strade: quella manuale e quella automatizzata con IA.

Partiamo da quella semplice, così vedi che è molto rapida e poi, se vuoi, guardi tutto il lavoro che ti sei risparmiato lasciandolo fare all'IA.

Via 1: tutorial passo passo per tracciare gli eventi del tuo sito rapidamente con l'IA

Iniziamo con la versione rapida e breve.

Passo 1: chiedi all'IA di aiutarti a progettare la struttura

Se hai esperienza in analytics, questo lo sai già. Ma se non ce l'hai o non conosci GA4, l'IA può esserti molto utile.

Per farlo devi solo andare nel tuo strumento preferito (ChatGPT, Claude o Gemini) e fare due cose in un prompt:

1. Aggiungi screenshot completi (dall'alto in basso) di ogni sezione del sito (home, categorie, checkout, ecc.)
2. Spiegagli quello che vuoi.

Cioè: 

<em>“Voglio misurare i clic nei moduli principali del mio sito. Prima di toccare il codice, aiutami a definire una nomenclatura di evento e parametri che sia riutilizzabile in GTM e GA4.</em>
Non voglio un evento per ogni modulo. Voglio un unico evento con parametri.

I template che ho sono:

- home

- categoria

- sottocategoria

- tag

- post

Proponi:

1. nome dell'evento

2. parametri minimi

3. valori consentiti

4. esempi reali di dataLayer

5. dimensioni che dovrei creare in GA4”

Questo obbliga l'IA a pensare alla struttura prima che al codice.

Ed è proprio quello che ti interessa, perché ti proporrà un piano che, di solito, avrà parecchio senso. Perché se inizi a taggare un sito senza nomenclatura, finirai con un'analitica Frankenstein.

Fai ping-pong con l'IA finché non hai chiara la struttura e il perché farla così.

Passo 2: passale il tuo contenitore GTM

E lascia che faccia quasi tutto il lavoro:

1. Esporta il contenitore GTM del progetto e dallo in pasto all'IA.
2. Chiedile di eseguire le modifiche pertinenti in base alla strategia definita nel punto precedente.
3. Una volta pronto, lo scarichi.
4. Lo importi in GTM. L'IA ti dirà se devi fonderlo con quello già presente o sostituirlo.

Qui è possibile che abbiamo finito oppure no, a seconda di come l'IA pensa, o di come le abbiamo detto, di eseguire il piano di tagging.

Passo 3 (opzionale): passa il codice dei tuoi template all'IA

Se per il tagging è necessario aggiungere attributi data (ti spiego in cosa consistono nella parte del tagging manuale) puoi passare all'IA i template reali del tuo sito. Ed è qui che risparmi tempo davvero.

In WordPress possono essere file del tema che hai attivo, come:

• front-page.php
• category.php
• tag.php
• single.php
• functions.php

O quelli che usa il tuo tema.

Caricali e dagli un'istruzione concreta:

<em>“Ti passo i template attuali del mio sito.</em>
Voglio che tu aggiunga attributi data-* ai link dei moduli principali per misurare l'evento editorial_module_click.

Non cambiare il design.

Non cambiare classi CSS.

Non cambiare la logica delle query.

Non cambiare testi.

Aggiungi solo attributi di analytics.

Usa questi parametri:

- data-analytics-event

- data-page-type

- data-module-type

- data-module-area

Restituiscimi i file completi corretti e controlla eventuali errori di sintassi PHP.”

Occhio a questo: non lasciare che l'IA “migliori” il tuo template.

L'IA tende a toccare più del necessario se non la limiti. Dille chiaramente che aggiunga solo attributi di analytics. Nient'altro.

Una volta scaricati i file e caricati sul sito, passeremmo già a testare tutto prima di pubblicare le modifiche e creare le dimensioni personalizzate necessarie in GA4. 

Qui sotto ti spiego tutto, ma prima voglio che tu veda tutto il lavoro manuale che ci siamo risparmiati seguendo questo processo.

Via 2: tutorial passo passo per tracciare manualmente gli eventi del tuo sito

Passiamo alla strada lunga, così capisci che cosa ha fatto davvero l'IA.

Passo 1: decidi quale evento vuoi creare

Prima cosa: non creare venti eventi se puoi crearne uno riutilizzabile e ben pensato.

Nel mio caso volevo misurare clic nei moduli editoriali del sito, quindi ho creato un unico evento:

editorial_module_click

Ma lo stesso processo vale per altri eventi:

• cta_click
• resource_download
• pricing_click
• affiliate_click
• lead_magnet_click
• video_module_click
• product_card_click
• internal_navigation_click

La chiave è pensare se l'evento può essere riutilizzabile ora o in futuro. Per esempio, se vuoi misurare CTA, non creare questo:

• click_boton_home
• click_boton_sidebar
• click_boton_footer
• click_boton_categoria
• click_boton_post

Meglio creare cta_click e differenziare ogni clic con parametri. È più pulito e scalabile.

Passo 2: definisci i parametri minimi

Non è mai necessario misurare tutto, ma ciò che conta. Quello che sfrutterai davvero e che ti permetterà di prendere decisioni.

Nel mio caso, per i clic nei moduli editoriali, ho usato questi parametri:

• page_type
• module_type
• module_area
• link_url
• link_text

Tradotto:

Parametro	Che cosa indica
page_type	Tipo di pagina in cui avviene il clic (home, categoria, sottocategoria, tag o articolo). Ognuna ha una struttura diversa.
module_type	Tipo di modulo cliccato: novità, sezione dei consigliati, sezione degli ultimi articoli… Ogni template ha un bel po' di sezioni.
module_area	Contenuto, sidebar, footer…
link_url	URL del link. L'ho aggiunto perché avevo già creato la variabile; altrimenti non l'avrei fatto, dato che so che lo guarderò poco.
link_text	E questo ancora meno

Esempio:

• page_type  = category
• module_type  = latest
• module_area  = main
• link_url = https://yagogonzalez.com/ocio/
• link_text = Come scaricare liste lunghe da YouTube...

Con questo posso già confrontare:

• Quali pagine e tipi di pagina generano più clic.
• Quali zone della pagina generano più clic.
• Quali moduli generano più clic.

Più che sufficiente per iniziare.

Passo 3: crea una nomenclatura chiusa

Questo è importante: non lasciare che ogni evento abbia un nome inventato al volo. Definisci valori chiusi.

Per esempio, per page_type possono essere:

• home
• category
• subcategory
• tag
• post
• page
• landing
• product
• checkout

Usa solo quelli che ti servono. Nel mio caso:

• home
• category
• subcategory
• tag
• post

Per module_area:

• main
• sidebar
• bottom
• footer
• post_footer

E per module_type, definisci una lista in base al tuo sito.

Nel mio caso, questo elenco era piuttosto lungo, perché ho parecchi moduli diversi. Alcuni erano:

• home_hero
• home_hero_side
• featured
• latest
• sidebar_popular
• sidebar_more
• bottom_cta_newsletter
• home_section_tecnologia
• home_section_ocio
• home_section_negocio

Se il tuo sito è di servizi, potresti avere:

• hero_cta
• services_grid
• case_studies
• testimonials
• pricing_table
• contact_cta
• lead_magnet

Oppure, se è un ecommerce:

• product_card
• category_grid
• promo_banner
• recommended_products
• cart_cta
• checkout_step
• wishlist_button

La logica è la stessa: cambia solo il contesto, ma il metodo è identico.

Passo 4 (opzionale): usa attributi data nell'HTML

Nel mio caso, questa è stata una parte importante del sistema.

Avrei potuto provare a far sì che GTM ricavasse il modulo cliccato da una classe CSS strana o dal testo del pulsante, ma nei progetti medi questo è fragile: oggi funziona, ma tra 3 mesi cambi il design e smette di funzionare, perché non ti ricordi come avevi montato l'evento.

La soluzione che ho adottato è aggiungere attributi data direttamente nei link o nei pulsanti che vuoi misurare.

Esempio:

<a
href="https://tudominio.com/articulo/"

  data-analytics-event="editorial_module_click"

  data-page-type="home"

  data-module-type="home_hero"

  data-module-area="main"

>

  Título del artículo

</a>

Con questo, il link stesso porta già le informazioni che vuoi inviare. GTM non deve indovinare nulla, solo leggere gli attributi.

Questo vale per quasi qualsiasi evento:

<em><a</em>
href="/contacto/"

  data-analytics-event="cta_click"

  data-page-type="landing"

  data-module-type="hero_cta"

  data-module-area="main"

>

  Richiedere un preventivo

</a>

O per un ecommerce:

<em><a</em>
href="/producto/zapatilla-x/"

  data-analytics-event="product_card_click"

  data-page-type="category"

  data-module-type="product_grid"

  data-module-area="main"

>

  Scarpa X

</a>

Sì, aggiungi più codice, ma è una soluzione semplice, comprensibile e scalabile.

Passo 5: crea un listener in GTM

Ora hai bisogno che Google Tag Manager ascolti i clic sui link con il tuo attributo.

Crea un tag HTML personalizzato.

Per esempio:

<em><script></em>
(function() {

  document.addEventListener('click', function(event) {

    var link = event.target.closest('a[data-analytics-event]');

    if (!link) {

      return;

    }

    window.dataLayer = window.dataLayer || [];

    window.dataLayer.push({

      event: link.getAttribute('data-analytics-event') || '',

      page_type: link.getAttribute('data-page-type') || '',

      module_type: link.getAttribute('data-module-type') || '',

      module_area: link.getAttribute('data-module-area') || '',

      link_url: link.href || '',

      link_text: (link.innerText || link.textContent || '').trim()

    });

  });

})();

</script>

Questo listener fa qualcosa di molto semplice:

1. Rileva i clic.
2. Controlla se il link ha data-analytics-event.
3. Legge gli attributi.
4. Fa un dataLayer.push().
5. GTM usa quell'evento per inviare dati a GA4.

Non c'è molto mistero, bisogna solo scriverlo bene. E per questo puoi usare anche l'IA.

Passo 6: crea le variabili in GTM

In GTM, crea variabili di livello dati per leggere i parametri.

Per esempio:

Variabile GTM	Variabile di livello dati
DL – page_type	page_type
DL – module_type	module_type
DL – module_area	module_area
DL – link_url	link_url
DL – link_text	link_text

Sono tutte del tipo Variabile di livello dati.

Non improvvisare i nomi. Se nel listener invii module_type, in GTM la variabile deve leggere module_type. Non module-type. Non moduleType. Non tipo_modulo.

Meglio uguale. Esattamente uguale.

Passo 7: crea l'attivatore

Crea un attivatore di evento personalizzato.

Se il tuo evento si chiama:

editorial_module_click

L'attivatore deve ascoltare:

editorial_module_click

Se il tuo evento si chiama:

cta_click

L'attivatore deve ascoltare:

cta_click

Sembra ovvio, ma molti errori in GTM sono semplicemente nomi che non coincidono.

Nel mio caso, l'attivatore è stato:

• CE – Editorial Module Click
• Tipo: Evento personalizzato
• Nome dell'evento: editorial_module_click

Passo 8: crea il tag GA4

Crea un tag evento GA4.

Nome dell'evento:

editorial_module_click

O l'evento che hai deciso.

Aggiungi i parametri:

Parametro GA4	Valore GTM
page_type	{{DL – page_type}}
module_type	{{DL – module_type}}
module_area	{{DL – module_area}}
link_url	{{DL – link_url}}
link_text	{{DL – link_text}}

E usa come attivatore l'evento personalizzato che hai appena creato.

Con questo, ogni volta che qualcuno farà clic su un link taggato, GTM invierà l'evento a GA4.

Test e passaggi successivi

Non importa quale strada hai seguito: qui convergono. Una volta implementato tutto, quello che devi fare è assicurarti che tutto funzioni come deve.

Inoltre, mancherà toccare un'altra cosetta in GA4.

Passo 1: testa prima di pubblicare

Non pubblicare alla cieca:

1. Apri l'anteprima di GTM.
2. Fai clic su vari moduli del sito.
3. Controlla che compaia l'evento editorial_module_click (o l'evento che hai creato).
4. Poi entra nel tag GA4 e controlla che i parametri abbiano un valore (page_type, module_type…)

Se vedi valori vuoti, controlla:

• Che l'HTML abbia gli attributi data.
• Che il listener venga caricato.
• Che l'attributo dell'evento abbia il nome corretto.
• Che le variabili di GTM leggano lo stesso nome che invia il dataLayer.
• Che l'attivatore ascolti l'evento corretto.

Non andare avanti finché questo non funziona. Qui l'anteprima di GTM è tua amica. Usala.

Passo 2: controlla DebugView

Quando pubblichi, controlla la DebugView di GA4.

Dovresti vedere il tuo evento entrare, ma occhio: la DebugView a volte ci mette, non si aggiorna bene o ti mostra un'altra sessione.

Per questo, se nell'estensione Tag Assistant vedi l'hit inviato correttamente, l'evento sta uscendo.

La DebugView è utile, ma non impazzire se ci mette un po' o se non compare.

Nel mio caso, in Tag Assistant vedevo l'evento inviato come hit a GA4, anche se DebugView non lo mostrava nella timeline.

Può succedere.

Passo 3: crea dimensioni personalizzate in GA4

Per finire, in GA4, vai a:

Amministrazione > Visualizzazione dati > Definizioni personalizzate

E crea solo le dimensioni che userai davvero. Vale a dire, i parametri degli eventi che andrai ad analizzare.

Nel mio caso:

Nome	Ambito	Parametro
page_type	Evento	page_type
module_type	Evento	module_type
module_area	Evento	module_area

Avevo già registrato link_url e link_text come dimensioni personalizzate di tagging precedenti.

Passo 4: (opzionale) documenta la nomenclatura

Se il progetto è grosso, è indispensabile creare una tabella di tagging degli eventi simile a questa:

Evento	Parametro	Valori possibili	A cosa serve
editorial_module_click	page_type	home, category, subcategory, tag	Tipo di template
editorial_module_click	module_type	featured, latest, sidebar_popular	Tipo di modulo
editorial_module_click	module_area	main, sidebar, bottom	Area visiva

Così, quando tra due mesi dovrai aggiungere un altro modulo, non reinventi nulla: segui solo il sistema senza dover ripensare o riformulare tutto.

E basta, abbiamo finito.

Se hai seguito la strada manuale, congratulazioni. Ti sarà costata un po'.

Se hai seguito quella con l'IA, è probabile che ti stia chiedendo se hai davvero finito. E sì, la risposta è sì. Un po' sorprendente, vero?

Errori tipici

Dai, raccogliamo tutti quelli citati qui e che tutti abbiamo sofferto almeno una volta.

Creare troppi eventi

Male:

• home_button_click
• sidebar_button_click
• footer_button_click
• category_button_click

Meglio cta_click   con parametri.

Dipendere dalle classi CSS

Male:

Se l'utente fa clic su .boton-verde-grande…

Domani cambi il design e addio misurazione.

Meglio aggiungere attributi data: data-analytics-event="cta_click"

Non testare in GTM

Pubblicare senza testare è giocare alla roulette. Usa sempre Anteprima.

Registrare troppe dimensioni in GA4

Non trasformare ogni parametro in una dimensione personalizzata.

Inizia esclusivamente da quelle che userai per analizzare. Il resto può aspettare e, se poi vedi che ti serve davvero, lo aggiungi dopo.

Cambiare nomi a metà del processo

Se usi module_type usalo sempre uguale.

Non passare a:

• module-type
• moduleType
• tipo_modulo

Né a metà del processo né in futuro. Sembra una sciocchezza, ma ti complicherà l'analitica quando confronterai periodi di tempo con entrambi gli eventi..

Riepilogo rapido e conclusioni

Ripassiamo il processo generale manuale, che è questo:

1. Definisci cosa vuoi sapere.
2. Crea un evento riutilizzabile.
3. Definisci pochi parametri.
4. Aggiungi attributi data-* ai link importanti.
5. Usa l'IA per rivedere e modificare template.
6. Crea un listener in GTM.
7. Crea variabili di livello dati.
8. Crea un attivatore di evento personalizzato.
9. Crea un tag GA4.
10. Testa in Tag Assistant.
11. Pubblica.
12. Registra in GA4 solo le dimensioni necessarie.

E, come hai potuto vedere, è riducibile molto facilmente se chiedi aiuto al tuo amico ChatGPT.

Questa cosa, che richiederebbe ore se fatta manualmente, io ci ho messo poco più di 30 minuti per averla operativa.  

Sembra magia quando la provi. Davvero.

E ti lascio con un paio di raccomandazioni per chiudere:

Misurare eventi non significa avere tanti dati o tutti i dati, ma ottenere informazioni per decidere. E per questo te ne servono solo alcuni.

L'IA non sostituisce il tuo criterio di misurazione -quello che ti dice quali dati misurare- ma sì ti risparmia una quantità enorme di lavoro meccanico e, soprattutto, ti aiuta a mantenere coerenza. 

E questo, nei progetti grandi, è oro puro. Non sprecarlo.