Evento Onclick - Istruzioni dettagliate

Indice dei contenuti

Nell'esempio seguente, imposteremo il monitoraggio delle conversioni per un clic su una voce di menu di una pagina WordPress.

Nel nostro esempio, vogliamo tracciare tutti i clic effettuati sulla voce di menu "Nuovo qui?".

Passo 1 - Creare la conversione con Trackboxx

A tal fine, richiamiamo la panoramica dei siti web tramite le impostazioni (ruota dentata) e selezioniamo la voce "Destinazioni" per il sito web corrispondente.

Qui si aggiunge un nuovo progetto di destinazione e gli si dà un nome adatto. Nel nostro caso, fare clic su "Nuovo qui?". - Menu principale.

Una volta creato il progetto di destinazione, ora abbiamo lo snippet di codice corrispondente. L'elemento più importante è l'ID dello script.

Nel nostro articolo "Come si utilizza il monitoraggio delle conversioni?", qui troverete diversi metodi per integrare lo script di conversione. Nel nostro caso, spiegherò ora l'evento "OneClick". Ciò significa che tracciamo il clic sulla voce di menu attraverso l'etichettatura unica (classe CSS) della voce di menu.

Nel caso di WordPress, ad esempio, non è facile inserire il nostro codice di conversione nel menu, ma possiamo etichettare la voce di menu "unica" e quindi tracciarla senza problemi.

Passo 2 - Aggiunta di una classe CSS per la voce di menu

Per prima cosa, richiamate il vostro menu corrispondente nell'amministrazione di WordPress alla voce Design - Menu.

Per poter aggiungere una classe CSS qui, potrebbe essere necessario attivare prima questa opzione. A tale scopo, fare clic sull'opzione "Personalizza vista" in alto e attivare la casella di controllo "Classi CSS".

Dopo l'attivazione, abbiamo ora un campo di immissione per la classe CSS sotto la voce di menu corrispondente e inseriamo, ad esempio, "new-here" nel nostro caso e salviamo il tutto.

Fase 3 - Personalizzazione e installazione del codice di conversione

Ora prendiamo il nostro codice di conversione e lo adattiamo di conseguenza. Esiste un formato fisso per l'integrazione tramite OneClick. Questi formati si trovano anche nella nostra panoramica principale sull'argomento tracciamento delle conversioni.

Dobbiamo inserire la nostra classe CSS unica nel codice e il nostro script finale avrà questo aspetto:

<script type=testo/javascript>
documento.querySelector('.new-here').addEventListener('click', () => {
   trackboxx(trackGoal', WNUXTLZ2GT');
});
</script>Lingua del codice: HTML, XML (xml)

Informazioni aggiuntive! Fondamentalmente, è possibile utilizzare un ID CSS o una classe CSS per l'etichettatura univoca di una voce di menu o di un pulsante. Con WordPress, solo la classe CSS può essere inserita direttamente nel menu, quindi usiamo document.querySelector invece di document.getElementById nello script qui riportato.

Ad esempio, se è stato assegnato un ID CSS, il codice avrà il seguente aspetto:

<script>
documento.getElementById('nuovo-qui').addEventListener('click', () => {
   trackboxx(trackGoal', WNUXTLZ2GT');
});
</script>Lingua del codice: HTML, XML (xml)

Importante. Il vostro codice ha naturalmente un trackgoal: ID diverso e, a seconda di ciò che avete usato come classe CSS, anche questo deve avere il nome corrispondente.

Fase 4 - Integrare il codice di conversione nella propria pagina

Nel nostro caso, vogliamo tracciare il clic sulla voce di menu corrispondente "Page-wide". Pertanto, nel nostro caso, inseriremo il codice nel piè di pagina della pagina.

Se si vuole tracciare solo un clic su una pagina specifica, è ovviamente sufficiente integrare lo script di conversione solo su questa pagina.

L'integrazione nel footer è ovviamente possibile con WordPress utilizzando vari metodi:

  • Integrazione tramite template e page builder
  • Integrazione tramite plugin, ad esempio "Header Footer Script".
  • Integrazione tramite le impostazioni del tema o le impostazioni del costruttore di pagine
  • Integrazione tramite tema figlio e functions.php

Nel nostro caso, utilizziamo Elementor per il sito web e quindi utilizziamo l'opzione "Codice personalizzato".

Impostiamo l'impostazione della posizione su </body> Fine.

Salviamo il tutto e abbiamo così completato con successo l'integrazione del conversion tracking. I clic sul pulsante dovrebbero ora essere visualizzati nei progetti di destinazione nella dashboard di Trackboxx.

Se avete domande, bisogno di supporto o semplicemente volete togliervi un peso dallo stomaco, saremo lieti di sentirvi.

>>> al modulo di contatto