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
H1nel div con idtitle - un riferimento comune per ogni elemento dell’accordion: tutti i
licon classepanel-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
accordionElmdove recupero il testo e lo salvo nella variabileaccordionTitle - aggiungo all’ancora
<a>di ogni accordion un attributoonclickche imposta azione, categorie ad etichetta - richiamo la funzione
analyticsEventsAccordionin 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.
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 del 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.
| Categoria | Azione | Etichetta | Eventi |
|---|---|---|---|
| About Us | Accordion | I prezzi sono iva inclusa? | 12 |
| Posso pagare con PayPal? | 9 | ||
| Tab | Informazioni azienda | 15 | |
| Products | Accordion | Costo pagamento conttassegno | 23 |
| Tab | Contattaci subito | 18 |
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.
