Ecco una delle variabili di clic integrate in Google Tag Manager che, a prima vista, può sembrare poco utile.
Soprattutto se hai provato a usarla basandoti sulla modalità anteprima di GTM e non ha funzionato.
È normale, perché questa modalità può mostrare alcuni errori concettuali che possono trarti in inganno se non ti documenti bene.
Per questo, in questo articolo voglio parlare un po’ di più di questa variabile, che può tirarci fuori dai guai in più di un’occasione.
Detto questo, anche se c’è una parte un po’ più tecnica -quella relativa ai selettori CSS-, non entrerò nelle opzioni più avanzate consentite dalla funzionalità, ma solo nei casi d’uso più frequenti in cui l’ho trovata utile.
Ma partiamo dall’inizio.
Cos’è la variabile Click Element in GTM: definizione
È una variabile che ci restituisce l’elemento su cui un utente fa clic mentre naviga sul sito.
Probabilmente lo avevi già immaginato solo dal nome, ma tanto vale confermarlo.
Questa variabile compare quando un determinato auto-listener di GTM è attivo, cosa che non avviene sempre. Infatti, quando iniziamo con un contenitore nuovo non lo è, ma tranquillo: tra poco vedrai che attivarlo è estremamente semplice.
Bene, quando questo listener è attivo e un utente fa clic su un link o su un elemento del nostro sito, le informazioni relative a quel clic vengono inviate al Data Layer. Più precisamente, questi valori:
- gtm.element
- gtm.elementClasses
- gtm.elementTarget
- gtm.elementUrl
- gtm.elementId
Puoi verificarlo con l’anteprima:
Il bello è che puoi accedere a ognuno di questi valori tramite variabili predefinite in GTM, come ti spiego adesso.
Un’altra nota: tutti questi valori sono stringhe di testo, tranne gtm.element, che è un oggetto.
Il punto è che, come dicevo nell’introduzione, quando osserviamo le sue proprietà nell’anteprima possiamo talvolta trovarci davanti a qualcosa del genere:
E no, nonostante quello che vedi lì, non è una stringa, ma un oggetto.
Un oggetto che restituisce tutti gli attributi dell’elemento, come:
- Href: l’URL (se è un link; se è un altro elemento, no)
- Title
- Testo dell’elemento
Che non vengono mostrati nell’anteprima, ma sono accessibili se ne abbiamo bisogno.
Bene, non so se con quanto spiegato finora ti sei già fatto un’idea delle possibilità di questa variabile, ma se ancora non è così, te ne mostro qualcuna.
Principali casi d’uso
Al momento ci sono due scenari principali in cui Click Element mi è stato molto utile:
Il primo è quando vuoi misurare i clic su uno o più elementi del tuo sito che non hanno alcun ID né alcuna classe.
Questo è l’uso più evidente e quello che svilupperò come esempio in questo articolo.
Il secondo è quando devi misurare il clic su un elemento che contiene più sottoelementi.
Pensa al pulsante aggiungi al carrello in un ecommerce, dove è molto comune avere un div che racchiude uno span con l’icona e un altro span con il testo del pulsante.
E ovviamente quello che ti interessa è misurare il clic quando l’utente preme su uno qualunque di essi.
Senza entrare nello stesso livello di dettaglio del caso precedente, più avanti ti spiego come.
Come utilizzare la variabile
Ora che sappiamo in cosa consiste, ti chiarisco come attivare questa variabile per iniziare a usarla.
Attivazione della variabile
La prima cosa è attivarla in GTM.
Per farlo, vai su Variabili > Variabili integrate e la attivi. Già che ci sei, attiva anche tutte le altre variabili di Clic, perché sono piuttosto utili:
Questo da solo non basta, perché il listener di cui parlavamo all’inizio sarà disattivato.
Attivazione del listener
Ma metterlo in funzione è semplice quanto creare un attivatore di clic su link o clic su qualsiasi elemento:
Basta crearlo perché il listener inizi a funzionare.
E per verificarlo basta:
- Attivare la modalità anteprima.
- Andare sul sito.
- Fare clic su qualsiasi link o elemento, a seconda dell’attivatore che abbiamo creato.
Fatto questo, potrai vedere la variabile funzionare come nell’immagine iniziale:
Bene, ora che ti ho spiegato tutta la teoria, passiamo alla pratica.
Utilizzare la variabile Click Element di GTM
Ecco come applicare la variabile ai due casi d’uso che citavo all’inizio.
Dimmi se non è una situazione comune: vuoi tracciare quanti clic avvengono su uno o più elementi del tuo sito e, quando vai a farlo, ti accorgi che non hanno né un ID né una classe che puoi sfruttare.
E sì, potresti chiedere all’IT di aggiungerli e aspettare.
Oppure potresti usare Click Element già oggi.
Quindi, se scegli questa seconda strada, ecco un esempio di come potresti farlo.
1. Selezionare l’attributo CSS corretto per l’attivatore
Do per scontato che tu abbia già attivato le variabili predefinite di Clic di GTM e creato almeno un attivatore Click Element o Click Link.
Se è così, la prima cosa che faremo è trovare il selettore CSS dell’elemento di cui vogliamo tracciare il clic.
Hai diverse opzioni. Te ne lascio un paio.
1.1 Trovare il selettore CSS tramite l’ispettore elementi di Chrome
Per usare questo metodo è consigliabile avere almeno qualche nozione di base di CSS e HTML.
In realtà, per la digital analytics in generale è consigliabile avere queste conoscenze, quindi prima le acquisisci, meglio è.
Detto questo, il sistema è semplice:
- Clic destro sull’elemento del menu che vogliamo tracciare.
- Selezioniamo "Ispeziona" nel menu contestuale di Chrome per aprire l’Ispettore.
- Facciamo clic destro sul tag HTML corrispondente (sarà un tag "a") e selezioniamo "Copia selettore".
Fatto, è tutto.
1.2 Trovare il selettore CSS tramite un’estensione di Chrome
Se non hai alcuna base tecnica e la soluzione precedente ti confonde, puoi usare questa estensione di Chrome (clic sull’immagine per scaricarla):
Che può aiutarti a selezionare gli elementi che ti interessano:
È un’estensione freemium, con piani a pagamento e che richiede la registrazione con Google. Personalmente preferisco quindi il metodo precedente, ma se non sai nulla di HTML può aiutarti.
1.3 Testare
Qualunque dei due metodi tu abbia seguito, è utile verificare che abbiamo selezionato ciò che ci interessa.
E solo ciò che ci interessa.
Per controllarlo, aggiungo una classe nell’ispettore elementi con ciò che ho copiato, facendo clic sull’icona "+" a destra, così:
Può essere qualcosa come color: red !important o qualcosa di simile come background: red !important.
Qualcosa di appariscente che, controllando il sito, risalti molto e mi indichi ciò che ho selezionato. Così vedo se ho selezionato ciò che voglio e solo ciò che voglio.
In questo caso vedo che con il mio selettore viene selezionato solo uno dei tre link del menu, quindi dovrò modificare leggermente il selettore per raccoglierli tutti e tre.
Qui non ci sono trucchi, quindi forse è un buon momento per acquisire quelle nozioni di CSS se non le hai…
Nel mio caso passo da:
#footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > li:nth-child(1) > a
A:
footer-container-main > div > div:nth-child(2) > div.col.col-md.block.block-toggle.block-iqitlinksmanager.block-iqitlinksmanager-1.block-links.js-block-toggle > div > ul > a
Cioè, ho eliminato il riferimento al primo elemento dell’elenco e, testando, ottengo questo:
Il che mi indica che è il selettore che sto cercando e posso andare avanti.
Importante: questo selettore è molto poco ottimizzato. Si potrebbe rifinire e rendere molto, molto più semplice, ma volevo mostrare che ottenerne uno funzionante non è così complicato, anche se hai conoscenze minime di HTML.
2. Creare l’attivatore
Con il selettore corretto copiato, apriamo GTM e andiamo su Attivatori > Nuovo e ne creo uno così:
Spiegazione di ogni campo:
- Nome: essendo di tipo Link Click, io inizio sempre con "LC -".
- Si attiva su: "Alcuni clic sui link". Logico: vogliamo che scatti solo quando un utente fa clic sui link del menu del footer.
- Variabile: Click Element, quella di cui stiamo parlando.
- Corrispondenza: è interessante sapere che il tipo "corrisponde al selettore CSS" comparirà solo con questa variabile integrata o con "Form Element". Con nessun’altra delle predefinite.
- Valore: incollo la stringa di testo che ho copiato e testato nel passaggio precedente.
Salviamo.
3. Creare il tag GTM
In questo caso, poiché vogliamo tracciare un evento di clic, andiamo su Tag > Nuovo e selezioniamo un "Evento GA4".
Lo configuriamo così:
Te lo spiego:
Tag di configurazione GA4: seleziono quello generale, dove ho l’ID di monitoraggio. Se per qualche motivo non ce l’hai (che ci fai allora a guardare Click Element?), crealo prima di tutto.
Nome evento: quello che vedrai nel tuo GA4. L’unico consiglio che posso darti qui è di curare la nomenclatura e mantenerla coerente con il resto del tuo quadro eventi.
Parametri: punto importante. Io aggiungo il "link text" perché è così che distinguerò i clic su ciascuno dei link del menu.
Se non lo aggiungessi, avrei un evento che sommerebbe i clic su tutti i link del menu, ma non potrei segmentare e vedere le quantità di ciascuno.
Detto questo, ricordati di creare la dimensione personalizzata corrispondente in GA4 se vuoi sfruttare il dato nei report:
Attivatore: scegliamo quello che abbiamo appena creato:
Una volta salvato il tag, ci resta solo da verificare che funzioni come previsto.
4. Test
Dobbiamo assicurarci che tutto funzioni bene sia a livello di GTM sia a livello di Analytics, quindi controlleremo entrambi.
Anteprima di GTM
Attiviamo la modalità anteprima, andiamo sul sito e facciamo clic sui link.
Se tutto è andato bene, vedremo che il tag scatta quando deve:
Importante: è possibile che nell’anteprima tu veda due eventi Link Click per ogni clic effettuato sui link, come succede a me:
Questo è molto probabilmente dovuto al fatto che, come me, hai attivato il tracking dei clic in uscita nella misurazione avanzata di GA4.
In realtà non è un problema, perché il tag scatta solo su uno dei due clic gemelli e quindi viene inviato ad Analytics un solo evento, che è corretto.
Qui puoi vedere come non scatta sull’altro:
Lasciamo temporaneamente GTM.
DebugView in GA4
Apriamo la nostra proprietà GA4 e andiamo su Amministrazione > DebugView.
E torniamo a fare clic sugli elementi del sito che voglio tracciare.
Allora dovremmo vedere qualcosa del genere:
Il che ci indica che stiamo raccogliendo gli eventi correttamente.
Per verificare che il parametro venga inviato, facciamo clic sull’evento e poi sul parametro corrispondente. Il suo valore si espanderà:
Sembra tutto corretto, ma ricorda: se non hai una dimensione personalizzata che raccoglie il valore di quel parametro, non potrai vedere i dati nei report, per quanto questa vista li mostri.
Capito?
Quindi ci resterebbe solo da pubblicare il contenitore GTM per iniziare a raccogliere i clic degli utenti.
#2. Clic su elementi raggruppati
Passiamo al secondo caso d’uso più comune.
Guarda questo esempio di pulsante aggiungi al carrello:
Questo è il suo codice HTML:
Come si può vedere, la struttura è un button che raggruppa due i con l’icona e il testo.
Se attivo l’anteprima di GTM e faccio clic sul pulsante, a seconda del punto esatto in cui clicco, ottengo questo (se clicco sull’icona):
Oppure questo (se clicco sul testo):
Anche se non riesci a leggerlo, si vede che è diverso.
Ma naturalmente io voglio tracciare i clic su qualsiasi elemento che compone il pulsante come se fosse uno solo.
Quindi ho due soluzioni:
- Quella facile: creare in GTM tre regole con tre eventi e tre attivatori diversi, uno per ciascun elemento.
- Quella buona: usare Click Element e un attivatore come questo:
Selezionando "Corrisponde al selettore CSS" e inserendo come valore il selettore:
- La classe del pulsante (".add-to-cart").
- E quella dei suoi nodi figli (".add-to-cart *").
Verranno raccolti anche i clic su qualsiasi parte del pulsante (icona, testo).
Questa è bella, vero?
Sì, maaa…
Raccomandazioni
Usare attivatori con selettori CSS comporta un rischio.
Soprattutto se non gestisci tu il codice del sito.
Il motivo?
Semplice: in qualsiasi momento il team di sviluppo può apportare una modifica al codice che faccia sì che il tuo selettore smetta di raccogliere l’elemento che vuoi. È più probabile che succeda sui siti continuamente aggiornati.
In misura minore, ma può succedere anche con un aggiornamento del tema o di qualche plugin nel tuo CMS.
Quindi Click Element non è utile con questa configurazione?
Altroché, è molto utile, ma voglio che tu sia consapevole del suo principale svantaggio.
D’altra parte, per i più techie, sappi che la console sviluppatori ti offre molte più informazioni su questa variabile di tipo oggetto.
Per vederle, devi solo aprire la console e scrivere "dataLayer":
Ora navighi fino all’elemento ed espandi tutti i valori:
L’immagine te ne mostra solo alcuni, ma sono tantissimi.
Da qui in poi sta a te e a JavaScript accedere a qualche possibilità in più, come vedere il nodo padre:
E ottenere la classe del nodo padre con gtm.element.parentElement.className tramite una variabile Data Layer di GTM:
Oppure usare anche gtm.element.firstChild.id per accedere all’ID del primo nodo figlio seguendo la stessa procedura.
Conclusione
Click Element è probabilmente la variabile di clic predefinita più potente di GTM.
È anche la più difficile da usare bene all’inizio.
Ma ne vale la pena, perché in certi scenari ci salverà la vita.
Beh, forse questa affermazione è un po’ esagerata, ma almeno ci farà risparmiare tempo.
Spero che con queste piccole nozioni tu riesca a sfruttarla nei tuoi progetti.
Lascia un commento