UX & Coding

Tracciare automaticamente accordion e tab con Analytics e jQuery

"Come tracciare in modo automatico attraverso gli eventi di Google Analytics e JavaScript l'apertura di Accordion o Tab"

Spesso in un sito ci sono alcuni elementi ricorrenti che integrano importanti informazioni di contenuto come tab e accordion.

Può essere molto utile tracciare il loro utilizzo per acquisire informazioni sulla loro utilità e comprensione. Questo metodo è applicabile a qualsiasi elemento ricorrente nei template, accordion e tab sono solo un esempio.

In un progetto dinamico non è detto che si possa avere pieno controllo della gestione di nuovi elementi o la sostituzione di quelli esistenti dato che questa attività potrebbe essere delegata al cliente.

Con alcuni accorgimenti è possibile creare una semplice funzione JavaScript che aggiunge alle pagine l’integrazione necessaria al sistema di tracciamento, basandosi sugli eventi Analytics.

Esame degli elementi e automatizzazione

Per tracciare in modo automatico tutte le pagine che contengono accordion o tab sono necessarie prima di tutto le informazioni che verranno utilizzate per generare gli eventi Analytics.

Ipotizzando quindi una struttura simile a quella di seguito (uguale in tutte le pagine a livello di HMTL) sarà possibile identificare quali elementi possono aiutare il recupero delle informazioni principali.

<body>
<div id="title">
<h1>Domande frequenti</h1>
</div>
<ul id="faq">
<li class="panel-title">
<a data-toggle="collapse">I prezzi sono iva inclusa?</a>
</li>
<li class="panel-title">
<a data-toggle="collapse">Quanto costa la spedizione?</a>
</li>
<li class="panel-title">
<a data-toggle="collapse">Posso pagare con PayPal?</a>
</li>
</ul>
</body>

Dato che il markup fa ovviamente uso di tag, id e classi c’è tutto quello che serve:

  • un titolo della pagina riconoscibile: il tag H1 nel div con id title
  • un riferimento comune per ogni elemento dell’accordion: tutti i li con classe panel-title

In questo modo, facendo uso delle informazioni a disposizione, è possibile pensare di impostare gli eventi secondo una precisa logica.

Azione (event_action)
Nome dell’elemento: “accordion” o “tab” (scelto a propria discrezione).
Categoria (event_category)
Titolo della pagina: “chi siamo”, “domande frequenti”, “prodotti” (recuperato dall’HTML).
Etichetta (event_label)
Titolo dell’accordion: “i prezzi sono iva inclusa?”, “quanto costa la spedizione?” (recuperato dall’HTML).

Sviluppo della funzione JavaScript

Come prima cosa bisogna gestire rispettivamente in due variabili il titolo della pagina (pageTitle) e l’elemento HTML che contiene il titolo dell’accordion (accordionElm).

var pageTitle = $('#title h1').text();
var accordionElm = $('.panel-title a');

Dato che gli elementi dell’accordion sono molteplici (e non si sa a prescindere quanti) il recupero dell’informazione “titolo” nella variabile accordionTitle deve essere ripetuto con metodo .each() per “interrogare” tutti quelli che trova.

Inoltre, in questa fase viene definita la sintassi per aggiungere all’elemento un attributo onclick che contiene il codice per generare un evento Analytics composto in parte dalle variabili definite.

In questo esempio è stata utilizzata la sintassi del Global Site Tag (gtag.js) da poco rilasciato che cambia rispetto a quella utilizzata da Universal Analytics .

$(accordionElm).each(function() {
var accordionTitle = $(this).text();
$(this).attr('onclick', 'gtag(\'event\', \'Accordion\', { \'event_category\': \'' + pageTitle + '\', \'event_label\': \'' + accordionTitle + '\' });');
})

Ora è sufficiente inserire in una funzione analyticsEventsAccordion il codice precedentemente scritto.

function analyticsEventsAccordion() {
var pageTitle = $('#title h1').text();
var accordionElm = $('li.panel-title a');

$(accordionElm).each(function() {
var accordionTitle = $(this).text();
$(this).attr('onclick', 'gtag(\'event\', \'Accordion\', { \'event_category\': \'' + pageTitle + '\', \'event_label\': \'' + accordionTitle + '\' });');
})
}
analyticsEventsAccordion();

Esaminando nel dettaglio il funzionamento, questo è quello che succede:

  • recupero il titolo della pagina con la variabile pageTitle
  • definisco l’elemento dell’accordion che si ripete con accordionElm
  • inizio a fare un ciclo per ogni accordionElm dove recupero il testo e lo salvo nella variabile accordionTitle
  • aggiungo all’ancora <a> di ogni accordion un attributo onclick che imposta azione, categorie ad etichetta
  • richiamo la funzione analyticsEventsAccordion in modo che azioni tutto quello che è stato definito

Il risultato finale, osservando il rendering HTML preso da una pagina che utilizza questo metodo, sarà più o meno questo.

Codice evento Google Analytics

Funzione selettiva

Per far “scattare” la funzione solo dove realmente necessario, per non appesantire le altre pagine, può essere comodo definire su quali url intervenire.

Con una semplice condizione è possibile selezionare le pagine che devono essere tracciate facendo riferimento al contenuto della loro URL (es. tutte le pagine che contengono “about-us” o “contacts”).

if (window.location.href.indexOf('about-us') > -1 | ('contacts') > -1) {
analyticsEventsAccordion();
}

Ovviamente quest’ultimo approccio (controllo url) presuppone di avere poche pagine o pochi gruppi dove si conosce bene l’alberatura, non è certo indicato per siti di grandi dimensioni dove le sezioni possono essere create senza un preciso controllo.

Il codice completo risulterà così.

function analyticsEventsAccordion() {
var pageTitle = $('#title h1').text();
var accordionElm = $('li.panel-title a');

$(accordionElm).each(function() {
var accordionTitle = $(this).text();
$(this).attr('onclick', 'gtag(\'event\', \'Accordion\', { \'event_category\': \'' + pageTitle + '\', \'event_label\': \'' + accordionTitle + '\' });');
})
}

if (window.location.href.indexOf('about-us') > -1 | ('contacts') > -1) {
analyticsEventsAccordion();
}

Analisi dei dati

Sul pannello di Analytics sarà possibile ottenere in modo organizzato informazioni sulla fruizione degli elementi divisi per pagina, tipologia ed etichetta.

CategoriaAzioneEtichettaEventi
About UsAccordionI prezzi sono iva inclusa?12
Posso pagare con PayPal?9
TabInformazioni azienda15
ProductsAccordionCosto pagamento conttassegno23
TabContattaci subito18

Dato che questa funzione non si basa su elementi specifici ma sulla strutturazione dei tag, a meno di una revisione del codice, ogni nuovo elemento verrà automaticamente tracciato senza necessità di interventi manuali.

Aggiungi un commento

UX & Coding

Articoli recenti

Newsletter

Inserisci la tua email per restare aggiornato sulle ultime novità.