Un evento elemento cliccato traccia quando un visitatore anonimo o un contatto HubSpot fa clic su un elemento specifico sul tuo sito web. Per esempio, traccia quando viene cliccato un CTA per una demo gratuita o un link per il download di un PDF. Gli eventi elemento cliccato possono essere creati e monitorati solo sulle pagine che hanno il codice di monitoraggio HubSpot installato.
Si prega di notare:
- Le istruzioni in questo articolo sono per il nuovo strumento di eventi comportamentali personalizzati, che sostituisce il precedente strumento di eventi comportamentali. Tutti gli eventi creati nello strumento precedente continueranno a funzionare, e potrai ancora gestire e analizzare quegli eventi nello strumento precedente.
- Gli eventi legacy non possono essere migrati al nuovo strumento eventi. Invece, si raccomanda di ricreare i tuoi eventi legacy nel nuovo strumento, poiché i nuovi eventi personalizzati forniscono una maggiore flessibilità con le proprietà degli eventi. Per esempio, con gli eventi precedenti avresti dovuto creare più eventi per tracciare campagne separate, ma ora un singolo evento comportamentale personalizzato può tracciare più campagne.
Gli eventi degli elementi cliccati possono essere creati in due modi:
Una volta che hai creato i tuoi eventi, impara come analizzare gli eventi negli strumenti di analisi e reporting. Puoi anche creare eventi URL visitati edeventi personalizzati.
Creare eventi per elementi cliccati con l'estensione Chrome
Installa l'estensione Chrome per gli eventi
- Nel menu laterale sinistro, vai a Tracking & analytics >Tracking Code.
- Fai clic su Installa l'estensione chrome event.
- Clicca suScarica.
- Sarai reindirizzato all'estensione HubSpot Analytics nel web store di Google Chrome. In alto a destra, fai clic suAggiungi a Chrome.
- Nella finestra di dialogo, clicca suAggiungi estensione.
- Una volta che l'estensione è stata installata, apparirà come un'icona arancione a forma di ruota dentata nella barra degli strumenti del tuo browser Chrome.
Creare un evento con l'estensione di Chrome
- Naviga verso una pagina web con il tuo codice di monitoraggio HubSpot installato.
- Nella barra degli strumenti del tuo browser Chrome, fai clic sullaruota dentata icona a forma di pignone.
- Nella finestra di dialogo, selezionaElemento cliccato.
- Clicca suAvanti. Sarai quindi in grado di selezionare un elemento sulla pagina da tracciare.
- Clicca su unelementodella pagina per creare un evento per l'elemento cliccato. Nell'esempio qui sotto, l'evento dell'elemento cliccato traccerà i clic sul link degli aspetti chiave.
- Nella finestra di dialogo, ilselettoreCSS dell'elemento verrà generato automaticamente. Inserisci unNomeper l'evento, quindi fai clic su Crea evento.
Nota benea seconda della complessità del markup HTML e CSS del tuo sito, l'estensione Chrome dell'evento potrebbe non essere in grado di rilevare un selettore CSS unico per un elemento. In questo caso, dovresti creare manualmente l'evento o aggiungere invece un tag id unico all'elemento.
- Dopo che l'evento è stato creato con successo, apparirà un messaggio di conferma. Fai clic suVisualizza evento in HubSpot per visualizzare il nuovo evento dell'elemento cliccato nella tua dashboard degli eventi.
HubSpot inizierà quindi a tracciare l'elemento. Scopri come analizzare l'evento in HubSpot.
Crea manualmente l'evento usando un ID, una classe o un selettore jQuery
- Clicca suComportamento personalizzato Eventi.
- In alto a destra, fare clic suCrea evento.
- Nel pannello di destra, inserisci un nome per il tuo evento, poi seleziona Clicked element.
- Fai clic suAvanti.
- Seleziona come vuoi identificare l'elemento cliccato sulla pagina. Scopri di più su come trovare gli identificatori su una pagina web.
- ID HTML: inserisci l'ID dell'elemento che vuoi tracciare. Per esempio, se il tuo elemento cliccato è impostato su <button id="log-in">, dovresti inserirelog-in.
- Classe HTML: inserite la classe dell'elemento che volete tracciare. Per esempio, se il vostro elemento cliccato è impostato come <button class="bigCTA">, dovreste inserire bigCTA.
- Selettore jQuery: inserisci il selettore jQuery dell'elemento che vuoi tracciare
.
- Fate clic suNext.
- Per impostazione predefinita, l'elemento cliccato sarà monitorato su tutte le pagine con il codice di monitoraggio HubSpot installato. Per tracciare solo i clic degli elementi su una pagina specifica, seleziona Pagina specifica, quindi inserisci l'URL della pagina.
Dopo aver creato l'evento, HubSpot inizierà a tracciare l'elemento. Scopri come analizzare l'evento in HubSpot.
Capire e recuperare i selettori degli elementi
Puoi identificare un elemento tramite il suo ID HTML, la classe HTML o utilizzando un selettore jQuery.
ID
Per trovare e usare l'ID di un elemento:
- Clicca con il tasto destro del mouse sulla pagina con l'elemento che stai prendendo di mira e selezionaView page sourceoInspect.
- Fare clic sull'elemento. Dovresti essere in grado di vedere l'attributo ID nella linea di codice (ad esempio, id="unique-element-name").
- Copia il valore ID e incollalo (ad esempio, in questo caso, unique-element-name) nel campo ID HTMLsenza le virgolette. Per esempio, per un elemento che include
id="get-started-marketing-hub", dovresti inserireget-started-marketing-hub nel campo.
Classe
Un evento di un elemento cliccato può identificare un elemento tramite il suo attributo di classe.
Per favore nota:
- quando più elementi su una pagina condividono la stessa classe, solo il primo elemento sulla pagina conterà per il completamento dell'evento. Pertanto, si dovrebbe usare la classe come identificatore solo quando nessun altro elemento sulla pagina condivide quella classe. Se l'elemento non ha una classe unica, si raccomanda di usare invece ID.
- Se non sei in grado di aggiornare il codice sorgente di un elemento per aggiungere una classe unica o un ID, si consiglia di utilizzare l'estensione Chrome per impostare l'evento, in quanto HubSpot assegnerà un identificatore più specifico.
Per trovare la classe di un elemento e usarla per l'evento:
- Clicca con il tasto destro del mouse sulla pagina con l'elemento che stai prendendo di mira e selezionaVisualizza sorgente paginaoIspeziona.
- Clicca sull'elemento. Dovresti essere in grado di vedere l'attributo di classe nella linea di codice (ad esempio, class="unique-element-name").
- Copia il valore della classe e incollalo nel campo HTML Class senza le virgolette. Per esempio, per un elemento che include nel campo
- Quando un elemento ha più classi, puoi usare una qualsiasi delle sue classi come obiettivo. Per esempio, se un elemento include
class="cta--primary cta--medium homepage-sales", potresti inserire cta--primary, cta--medium, o homepage-sales nel campo HTML Class. Comunque, assicurati che nessun altro elemento condivida quella classe.
- Quando si uniscono più classi, usare il seguente formato:
class1.class2.class3.
Selettore jQuery
Puoi anche usare selettori jQuery completi per indirizzare gli elementi. Questo è utile se l'elemento che stai puntando non ha un ID o una classe, o se hai bisogno di essere più specifico.
Per esempio, vuoi creare un evento per un elemento cliccato usando un selettore jQuery per il seguente elemento:
<a id="get-started-marketing-hub" class="cta--primary" href="https://www.hubspot.com/products/marketing/get-started" aria-label="Get started with Marketing Hub">Get started</a>
Invece di usare l'ID o la classe dell'elemento, si potrebbe usare un selettore jQuery per indirizzare la proprietà href dell'elemento inserendo quanto segue nel campo delselettore jQuery:
[href='https://www.hubspot.com/products/marketing/get-started']
Per saperne di più suiselettori supportati.