Trovare ID e classe CSS di un elemento cliccabile

Importante: per prima cosa individua l’elemento della pagina su cui vuoi tracciare i click.

Puoi indicarlo in quattro modi:

usare un normale link come selettore CSS, se il link è presente nella pagina. È il metodo più semplice, ma non tutti gli elementi contengono un link;

copiare il valore dell’attributo class o ID con l’estensione per browser Copy Css Selector;

trovare manualmente l’attributo class o ID seguendo le istruzioni qui sotto;

scrivere al supporto indicando il link della pagina e allegando uno screenshot con l’elemento evidenziato;

Apri in modalità in incognito (importante) la pagina aggiunta a livesurf, cioè quella che contiene l’elemento da usare. Nell’esempio useremo Google Chrome; più avanti trovi anche gli altri browser.

Visualizzare il codice dell’elemento

Per visualizzare il codice dell’elemento selezionato e configurare il tracciamento del click, procedi così:

1. Fai clic con il tasto destro sul link "Informazioni", perché in questo esempio vogliamo configurare i click su quell’elemento (l’elemento è solo un esempio). Si aprirà il menu:

2. Nel menu scegli "Ispeziona" o "Visualizza codice".

3. Nel pannello di ispezione vedrai il codice HTML. In questo esempio l’elemento ha class="CategoryTreeLabel"; per configurare i click sugli elementi useremo quindi:

.CategoryTreeLabel

4. Il punto va inserito all’inizio perché si tratta di una classe CSS. Davanti a un ID va invece il cancelletto (#), mentre davanti al nome di una classe va il punto (.)

5. Ecco come deve apparire l’impostazione nel sito configurato (è solo un esempio: nel tuo caso la classe CSS o l’ID sarà diverso):

Importante! Il menu aperto con il tasto destro può variare da browser a browser.

Scegli la voce "Ispeziona" o "Visualizza codice". Negli screenshot qui sotto puoi vedere come questa funzione appare nei browser più usati.

FireFox

Edge, Internet Explorer

Opera

Google Chrome

Così appare un elemento con classe CSS in Google Chrome.

Riconoscere il tipo di elemento: ID o classe CSS

Il passaggio successivo è capire se l’elemento usa un ID o una classe CSS.

Dopo aver scelto "Ispeziona" o "Visualizza codice", si apre il pannello con il codice della pagina. Ecco come appare nei diversi browser:

Google Chrome

Così appare un elemento con classe CSS in Google Chrome.

Elemento con ID in Google Chrome

FireFox

Esempio di elemento con classe CSS in FireFox

Elemento con ID in FireFox

EDGE, Internet Explorer

Così appare un elemento con classe CSS in Internet Explorer

Aspetto di un elemento con ID in Internet Explorer

Opera

Aspetto di un elemento con classe CSS in Opera

Elemento con ID in Opera

Dopo aver identificato il tipo di elemento, copia correttamente il suo nome.

Per copiare il nome della classe CSS, fai doppio clic sul valore dell’attributo class. La selezione sarà simile a questa:

Il nome della classe, quindi, è: CategoryTreeLabel (è un esempio).

Non sono corretti nomi come questi:

CategoryTreeLabel CategoryTreeLabelNs14 CategoryTreeLabelCategory
/wiki/%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8F
<a class="CategoryTreeLabel
<a class="CategoryTreeLabel CategoryTreeLabelNs14 CategoryTreeLabelCategory" href="/it/wiki/%D0%9A%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F:%D0%98%D0%BD%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8F">Informazioni</a>

Se l’elemento usa un ID, devi copiare correttamente anche quel valore. Anche in questo caso fai doppio clic sul nome dell’elemento, come mostrato nello screenshot:

La parte selezionata è il nome dell’elemento; in questo caso è: t-whatlinkshere

Non sono corrette varianti come queste:

/wiki/%D0%A1%D0%BB%D1%83%D0%B6%D0%B5%D0%B1%D0%BD%D0%B0%D1%8F:%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8_%D1%81%D1%8E%D0%B4%D0%B0/%D0%92%D0%B8%D0%BA%D0%B8%D0%BF%D0%B5%D0%B4%D0%B8%D1%8F:%D0%9F%D0%BE%D0%B8%D1%81%D0%BA_%D0%BF%D0%BE_%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F%D0%BC
id="t-whatlinkshere"
<a href="/it/wiki/%D0%A1%D0%BB%D1%83%D0%B6%D0%B5%D0%B1%D0%BD%D0%B0%D1%8F:%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B8_%D1%81%D1%8E%D0%B4%D0%B0/%D0%92%D0%B8%D0%BA%D0%B8%D0%BF%D0%B5%D0%B4%D0%B8%D1%8F:%D0%9F%D0%BE%D0%B8%D1%81%D0%BA_%D0%BF%D0%BE_%D0%BA%D0%B0%D1%82%D0%B5%D0%B3%D0%BE%D1%80%D0%B8%D1%8F%D0%BC" title="Elenco di tutte le pagine che rimandano a questa [alt-shift-j]" accesskey="j">Link in entrata</a>

Se hai ancora domande su come distinguere un ID da una classe CSS o su come copiare correttamente il nome dell’elemento, contatta il supporto tecnico: ti aiuteremo a configurarlo.