Ago 2017
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”
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.
Altre Guide che potrebbero interessarti
Guida Base: Utilizzare l’Attivatore Visibilità…- Guida Base: Tracciare Click Immagine con Google Tag Manager
- Guida Base: Tracciare le Transazioni su Bing UET con…
- Guida Base: Mod Security Rules Apache – Iframe…
- Guida Base: implementare la Transazione nel Pixel di…
- Guida Avanzata: Creare A/B Test con Google Tag Manager
Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!
Fantastico! Mandami subito il libro e il DVD al prezzo indecente di 37 Euro!
(spese di spedizione comprese nel prezzo - Garanzia 100% Soddisfatti o Rimborsati)
Attenzione: offerta valida solo fino ad esaurimento scorte!
Fabio
08 07 2018
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?
Matteo Zambon
09 07 2018
Ciao Fabio,
riesci a mettermi uno screen dell’HTML (se lo pubblichi lo trasforma in vero html). 🙂
Fabio
10 07 2018
non trovo il modo di inserire l’immagine, quindi provo a scrivertolo così
*div class=”single_tour_price”* €220*/div*
grazie, Fabio.
Matteo Zambon
11 07 2018
Ciao Fabio, prova mettendo semplicemente .single_tour_price come valore 🙂
Fabio
11 07 2018
Purtroppo niente, il valore su GA è ancora “null”
Matteo Zambon
12 07 2018
Mi metti lo screen di come lo configuri?
Fabio
25 07 2018
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
Matteo Zambon
30 07 2018
Ciao Fabio lo fai sempre con il selettore css: ‘div.tour_attribute_content:nth-of-type(1)’ e cambi il valore da 1 a 3.
PS: All’interno del Club trovi molte risorse al riguardo e i primi 2 mesi sono gratuiti: https://club.tagmanageritalia.it/registrazione-club-tag-manager-italia/
Francesco
03 08 2017
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
Matteo Zambon
03 08 2017
Ciao Francesco! Usi i punti e spazi 🙂 Se attivi il debug di chrome e ispeziona elemento ti mostra già la sintassi da inserire 😉