Categories: Glossario

Glossario: CSS Selector

Tipicamente, quando devi selezionare nel DOM un elemento, si utilizza l’ID. Se non mastichi  di HTML ti faccio un esempio:

<input type=”submit” id=”bu-iscrivimi” class=”classe-pulsante classe-font-rosso  classe-simple” value=”ISCRIVIMI” />

In questo caso l’ID dell’elemento pulsante è “bu-iscrivimi”. Questo ID è (o perlomeno dovrebbe essere) univoco nella pagina.

Attraverso l’ID è possibile quindi identificare un elemento nella pagina ed estrapolarne poi tutte le proprietà.

Il CSS Selector invece utilizza le regole di stile (classi CSS) che si applicano agli elementi HTML per “scovare” l’elemento che ci interessa.

<input type=”submit” id=”bu-iscrivimi” class=”classe-pulsante classe-font-rosso  classe-simple” value=”ISCRIVIMI” />

Attraverso quindi un CSS Selector si possono identificare esattamente uno o più elementi. Nel campo Selettore elemento metteremo “.classe-pulsante.classe-font-rosso.classe-simple

Ti sei accorto che ho messo il punto? Se non sai il perché dovresti studiare un po’ come funziona la sintassi (qui trovi delle info gratuite).

Il CSS Selector non è applicato soltanto alle variabili di Google Tag Manager (in particolare in quelle di tipo “Elemento DOM”), ma è usato anche negli attivatori.

Matteo Zambon

View Comments

  • Ciao Matteo,
    ho fatto diverse prove ma non riesco a tirare fuori il valore del DOM su GA, in particolare devo prendere il valore di questa classe specifica in modo da avere un evento "Prezzo" per ogni pagina visitata.
    €220

    Sono riuscito a creare la variabile ed il tag ma su GA il nuovo evento ha come valore "null" oppure "undefined" per le due prove che ho fatto. Riesci a darmi qualche dritta per cercare una soluzione?

    • Ciao Matteo,
      sono svariate prove sono riuscito a risolvere togliendo della configurazione della variabile DOM il "Nome della Variabile"

      fatto questo però avrei bisogno di registrare più dati che hanno lo stesso selettore CSS, al momento mi registra solo il primo valore che incontra ma gli altri no. C'è modo di creare un evento anche per gli altri dati che hanno lo stesso selettore CSS ?

      Questo esempio dei dati che devo registrare (attualmente registra solo il primo)
      *div class="tour_attribute_content"* 3 giorni*/div*
      *div class="tour_attribute_content"* individuale, selfdrive,*/div*
      *div class="tour_attribute_content"* Tutti i mesi*/div*

      Grazie ancora per il supporto

    • non trovo il modo di inserire l'immagine, quindi provo a scrivertolo così
      *div class="single_tour_price"* €220*/div*

      grazie, Fabio.

    • Ciao Fabio,
      riesci a mettermi uno screen dell'HTML (se lo pubblichi lo trasforma in vero html). :)

  • Ciao Matteo,
    come posso fare a selezionare un elemento specifico del DOM che però è nidificato in sotto elementi?
    Per farti capire, devo selezionare il testo della classe b1:

    testo
    testo
    ecc...
    Come posso creare il percorso nel selettore CSS?
    Grazie

    • Ciao Francesco! Usi i punti e spazi :) Se attivi il debug di chrome e ispeziona elemento ti mostra già la sintassi da inserire ;)

Recent Posts

Piano di Misurazione: cos’è, cosa serve e come costruirlo per analizzare dati di qualità

Cos'è il piano di misurazione (e cosa non è) Il piano di misurazione è un…

1 settimana ago

Come usare Microsoft Clarity e Google Tag Manager per analizzare carrelli e form abbandonati

Avere automazioni di marketing per recuperare vendite e conversioni è un’ottima cosa. Se ci pensi…

1 settimana ago

Caso studio: FGM04 registra +72% di attribuzione delle conversioni e 98% di accuratezza dei dati tracciati grazie una strategia di Data Governance personalizzata

Fgm04, fondata nel 2004 è una realtà di cosmeceutica professionale, evolutasi fino a diventare un…

1 mese ago

Cosa sono, come funzionano e come configurare gli Smart Events in Microsoft Clarity

Gli Smart Events di Microsoft Clarity sono eventi che tracciano automaticamente le azioni più importanti…

2 mesi ago

Universal Commerce Protocol e Business Agent: cosa cambia e le implicazioni per la Digital Analytics di retailer ed ecommerce

L'11 gennaio 2025 Google ha annunciato il lancio di Universal Commerce Protocol (UCP), un nuovo…

2 mesi ago

Caso studio: Giuseppe Zanotti aumenta del 20% il ROAS e del 6% le conversioni cart-to-checkout grazie alla CRO con Microsoft Clarity e GA4

Giuseppe Zanotti, brand italiano di luxury footwear fondato nel 1994 e riconosciuto a livello internazionale…

2 mesi ago