Variabile elemento DOM GTM

Nel contesto di Google Tag Manager, la variabile elemento DOM è un tipo di variabile che consente di leggere il contenuto di un elemento presente nella pagina web, individuandolo tramite un selettore CSS oppure tramite un identificatore univoco. Si tratta di uno strumento molto utilizzato da chi configura tag e attivatori senza modificare direttamente il codice del sito, perché permette di estrarre informazioni testuali o attributi da porzioni specifiche del documento.

Questa variabile è particolarmente utile quando si desidera recuperare un dato che non è disponibile nei valori predefiniti offerti dalla piattaforma, come il prezzo di un prodotto, il titolo di un articolo o il contenuto di un messaggio di conferma. Una volta definita, la variabile può essere richiamata in qualsiasi tag o attivatore, semplificando la raccolta e l’invio delle informazioni verso gli strumenti di analisi o di marketing.

Che cos’è la variabile elemento DOM in Google Tag Manager

La variabile elemento DOM appartiene alla famiglia delle variabili definite dall’utente all’interno di Google Tag Manager. A differenza delle variabili integrate, che raccolgono automaticamente dati come l’URL della pagina o il referrer, questa variabile richiede una configurazione manuale: occorre infatti indicare quale elemento della pagina si intende leggere e quale tipo di informazione estrarre.

Il funzionamento si basa sull’accesso al modello a oggetti del documento, ovvero la rappresentazione strutturata della pagina web che il browser costruisce durante il caricamento. Selezionando un nodo specifico tramite un selettore, la variabile restituisce il valore richiesto, che può essere il testo visibile oppure il contenuto di un attributo come l’identificativo, la classe o un collegamento.

Differenza rispetto alle altre variabili

Le variabili integrate di Google Tag Manager coprono numerosi scenari comuni, ma non tutti. Quando un’informazione risiede unicamente nel contenuto della pagina e non è esposta in altri modi, la variabile elemento DOM diventa la soluzione più diretta. Essa si distingue anche dalle variabili che leggono i parametri dell’URL o i cookie, perché opera esclusivamente sulla struttura della pagina visualizzata.

Come si configura una variabile elemento DOM

La configurazione avviene dall’area dedicata alle variabili dell’account. Dopo aver scelto di creare una nuova variabile, si seleziona il tipo elemento DOM e si compilano i campi richiesti. Il primo passo consiste nell’indicare il metodo di selezione, ovvero se individuare l’elemento tramite un identificativo oppure tramite un selettore CSS.

Successivamente si specifica quale parte dell’elemento si vuole leggere. Le opzioni tipiche riguardano il testo contenuto nel nodo oppure il valore di un attributo specifico. È inoltre possibile indicare un valore predefinito, che viene restituito quando l’elemento non viene trovato nella pagina, evitando così errori o valori vuoti nei report.

Metodi di selezione dell’elemento

Il metodo basato sull’identificativo richiede che l’elemento possieda un attributo identificativo univoco, molto comune nei moduli e nelle sezioni principali di una pagina. Il metodo basato sul selettore CSS è invece più flessibile, perché consente di raggiungere elementi individuati da classi, gerarchie o combinazioni di attributi, purché il selettore sia scritto correttamente.

Ambiti di utilizzo più comuni

Questa variabile trova impiego in numerose situazioni pratiche. Viene spesso utilizzata per tracciare il valore di un ordine mostrato nella pagina di conferma, per registrare il nome di un prodotto visualizzato oppure per recuperare il testo di un pulsante che l’utente ha selezionato. In tutti questi casi, il dato letto può essere inviato come parametro a uno strumento di analisi.

Un altro impiego frequente riguarda la verifica del contenuto di un messaggio di errore o di un avviso, utile per comprendere quante volte gli utenti incontrano un problema durante la navigazione. La variabile consente inoltre di alimentare attivatori condizionali, attivando un tag solo quando un determinato elemento contiene un testo specifico.

Limiti e buone pratiche

Poiché la variabile legge la pagina al momento dell’esecuzione, è importante che l’elemento sia già presente nel documento quando la variabile viene valutata. Se il contenuto viene caricato in un secondo momento, la lettura potrebbe restituire un valore vuoto. Per questo motivo conviene scegliere con attenzione il momento di attivazione e prevedere un valore predefinito affidabile.

Confronto con altre soluzioni di lettura dei dati

Per comprendere meglio il ruolo della variabile elemento DOM, è utile confrontarla con altre modalità di raccolta delle informazioni disponibili in Google Tag Manager. La tabella seguente riassume le principali differenze.

Passaggi per creare e verificare la variabile

Di seguito sono elencati i passaggi fondamentali per creare una variabile elemento DOM e verificarne il corretto funzionamento all’interno di un contenitore.

1. Accedere all’account di Google Tag Manager e aprire il contenitore desiderato.
2. Selezionare la sezione dedicata alle variabili e avviare la creazione di una nuova variabile.
3. Scegliere il tipo elemento DOM tra le opzioni disponibili.
4. Indicare il metodo di selezione, ossia identificativo oppure selettore CSS.
5. Specificare se leggere il testo dell’elemento o il valore di un attributo.
6. Inserire un valore predefinito da restituire nel caso l’elemento non venga trovato.
7. Assegnare un nome chiaro alla variabile e salvarla.
8. Utilizzare la modalità di anteprima per controllare il valore restituito sulla pagina di prova.

Domande frequenti

A cosa serve la variabile elemento DOM in Google Tag Manager?

Serve a leggere il contenuto di un elemento della pagina, come un testo o un attributo, e a renderlo disponibile per tag e attivatori. In questo modo è possibile raccogliere dati che non sono esposti tramite le variabili integrate.

Qual è la differenza tra identificativo e selettore CSS?

L’identificativo individua un singolo elemento contrassegnato da un attributo univoco, mentre il selettore CSS può raggiungere elementi tramite classi, gerarchie e altre combinazioni. Il selettore è generalmente più flessibile ma richiede una sintassi corretta.

Perché la variabile restituisce un valore vuoto?

Il valore può risultare vuoto se l’elemento non è ancora presente nel documento quando la variabile viene valutata, oppure se il selettore non corrisponde a nessun nodo. Impostare un valore predefinito aiuta a gestire questi casi.

La variabile elemento DOM funziona con contenuti caricati in modo dinamico?

Può funzionare, ma dipende dal momento in cui viene eseguita la lettura. Se il contenuto compare dopo il caricamento iniziale, occorre assicurarsi che la variabile venga valutata quando l’elemento è già disponibile nella pagina.

Posso usare la stessa variabile in più tag?

Sì, una volta creata la variabile può essere richiamata in tutti i tag e gli attivatori del contenitore. Questo evita di ripetere la stessa configurazione e mantiene il contenitore più ordinato.

Quali errori sono più comuni nella configurazione?

Gli errori più frequenti riguardano selettori scritti in modo errato, elementi non ancora presenti al momento della lettura e mancanza di un valore predefinito. Verificare sempre il risultato con la modalità di anteprima prima di pubblicare le modifiche.

Hai questo problema?La variabile elemento DOM in GTM non estrae i dati giusti e perdi conversioni preziose?Se la variabile non è configurata bene, il tracciamento delle conversioni diventa inaffidabile e le campagne Google Ads non ricevono i dati corretti. Noi impostiamo le variabili DOM con precisione per collegare ogni conversione a GA4 e alle conversioni avanzate.Scopri il tracciamento conversioni