Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 1385
Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 690
Warning: Invalid argument supplied for foreach() in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 697
Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 690
Warning: Invalid argument supplied for foreach() in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 697
Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 1385
Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 690
Warning: Invalid argument supplied for foreach() in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 697
Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 690
Warning: Invalid argument supplied for foreach() in /home/customer/www/fabiopiccigallo.com/public_html/wp-content/plugins/smart-image-loader/simple_html_dom.php on line 697
Nella quinta puntata di questo piccolo corso base sull'uso di Google Tag Manager per il web marketing abbiamo affrontato il tema del tracciamento dei link sulle call to action, e di come trasmettere l'informazione del click a Google Analytics al fine di generare un obiettivo di conversione.
In questo modo, fino ad ora abbiamo sempre tracciato dei click specifici, possibilmente su link, e abbiamo facilmente intercettato l'evento mediante un ascolto diretto.
Che succede, però, se vogliamo tracciare non un solo link, ma un insieme di link caratterizzati in modo eterogeneo?
Ad esempio, potremo trovarci a voler intercettare un click su un qualsiasi elemento contenuto in un elenco o in un box, oppure magari verificare quale immagine della nostra gallery riscuote più interesse da parte dei nostri visitatori.
Oppure - ed è il caso che accade più spesso - potremmo trovarci a dover rinunciare a analizzare un singolo link, perché non è caratterizzato in alcun modo e non è pertanto distinguibile dall'insieme dei link che troviamo nella pagina.
Infine, ci potrebbe interessare valutare quante volte il menu principale del nostro sito web è stato cliccato per ogni sessione (dato non da poco, per capire come gli utenti utilizzano il nostro sito).
La situazione concreta
Per comprendere meglio la situazione di cui stiamo parlando, immaginiamo di avere nel nostro sito o sulle pagine del nostro blog una situazione come la seguente:
Ecco due immagini affiancate. Quale cliccherà il nostro utente?
Per chiarire meglio la situazione, vediamo il codice sottostante:
Per ognuna di queste immagini, dovrei riuscire a tracciare il click.
Non solo: dovrei anche riuscire a sapere quale delle due (o 100) immagini è stata cliccata. La condizione, però, è che a me interessano solamente i click che avvengono all'interno del mio box colorato: nel caso abbia un click su una delle immagini riproposto in un altro punto del mio sito, questo click non dovrà generare alcun evento registrato da Google Tag Manager.
Come fare?
Un operatore efficace
Se avessi dovuto scrivere questo articolo un annetto fa, avrei iniziato ad inondarti di codice javascript in variabili personalizzate allo scopo di navigare trasversalmente lungo tutto l'asse parentale di ogni elemento del DOM.
Oggi, per fortuna, non è più così, grazie all'introduzione in Google Tag Manager di un operatore che si rivela fondamentale per risolvere il nostro problema: matches CSS selector (lo troverai nella versione italiana di Google Tag Manager come corrisponde al selettore CSS).
Cosa fa, in sostanza, questo operatore?
Fa una cosa semplicissima e allo stesso tempo estremamente utile: verifica lungo la nidificazione del codice HTML che ci sia una corrispondenza tra una condizione da noi posta e i selettori css che caratterizzano gli elementi della nostra pagina.
Insomma, se ho una situazione standard, del tipo:
<a href="http://qualcosa.com"><span class="miaclasse">Il mio link</span></a>
potrò tracciare con semplicità questo link mediante un attivatore costruito in questo modo:
Nota che ho utilizzato un attivatore di click generico, e non uno che si limiti ai click sui link. In questo modo sono sicuro di intercettare il click sul contenuto dei tag <span>...</span>, e di intercettarli solo quando la classe di appartenenza di questi tag sia, appunto, "miaclasse".
Risalire la catena
La vera utilità del nostro matches CSS selector, però, è nella sua capacità di creare selezioni utilizzando di fatto la stessa sintassi con la quale un programmatore CSS identifica degli elementi all'interno di una nidificazione.
In sostanza, mediante il nostro operatore noi possiamo non solo verificare che un tag HTML abbia un selettore css uguale a quello da noi identificato, ma anche che questo selettore sia presente in uno dei suoi progenitori - o elementi nidificati.
Insomma, se ci troviamo davanti a una situazione del genere:
<div class="miaclasse"><p><a href="http://qualcosa.com">Il mio link</a></p></div>
noi potremo comunque verificare l'avvenuto click sul nostro link mediante un attivatore costruito in questo modo:
Cosa è cambiato?
È cambiato, che adesso il selettore da verificare non è più riferito al tag in cui avviene il link, ma ad un suo progenitore.
Insomma, tutte le volte che avremo un click su un tag <a> nidificato all'interno di un tag con classe "miaclasse", avverrà la magia, e il nostro trigger scatterà, pronto a innescare un tag diretto ad Analytics o a qualsiasi altro strumento di analisi.
Come utilizzare i selettori CSS in Google Tag Manager
Uno strumento come matches CSS selector è una vera manna per l'analista di marketing, perché consente di analizzare (e ottimizzare in modo appropriato) virtualmente qualsiasi elemento all'interno di una pagina web - a patto, naturalmente, di sapere come identificare propriamente gli elementi in gioco.
Fortunatamente, a questo scopo ci viene in aiuto il bravissimo Simo Ahava, che in un articolo del suo blog ha censito sintassi e spiegazione dei più importanti selettori da utilizzare nei trigger di Google Tag Manager.
| Selettore | Descrizione |
|---|---|
| .miaclasse | risponde se l'elemento ha come classe "miaclasse" |
| .miaclasse.altraclasse | risponde se l'elemento ha classi "miaclasse" e "altraclasse" |
| #mioid | risponde se l'elemento ha come ID "mioid" |
| #mioid, .miaclasse | risponde se l'elemento ha come classe "miaclasse" e discende da un elemento con ID "mioid" |
| div#mioid .miaclasse | risponde se l'elemento ha come classe "miaclasse" ed è figlio diretto di un <div>con ID "mioid" |
| :checked | risponde se l'elemento (un radio button ad esempio) è selezionato |
| [title*=”il mio bel titolo”] | risponde se l'elemento ha un attributo "titolo" il cui valore contenga da qualche parte la stringa "il mio bel titolo" |
| a[href$=”.pdf”] | risponde se l'elemento <a> (quindi un link) ha al suo interno un attributo href che termina con ".pdf" |
| .miaclasse:only-child | risponde se l'elemento ha classe "miaclasse" ed è l'unico figlio del suo genitore |
Insomma, mediante l'operatore di analisi dei selettori CSS è virtualmente possibile andare a pescare qualsiasi combinazione di condizioni all'interno di una pagina, per identificare in modo univoco solo i selettori che ci interessano.
Soprattutto, come abbiamo visto, mediante questo operatore sarà possibile verificare eventi che riguardano elementi nidificati e raccolti in un elemento genitore (o comunque di livello superiore) lasciando fuori tutti gli altri.
Proprio quanto ci serviva, quindi, per il nostro problema iniziale.
Tracciare i link da una galleria di immagini
Torniamo dunque al punto di partenza.
Abbiamo una serie di immagini linkate a qualcosa e inserite all'interno di un box (grigio, nel nostro caso) generato mediante un tag <div>...</div>. Noi vogliamo intercettare in modo generico i click effettuati da un utente su queste immagini, e vogliamo anche poter identificare in modo univoco l'immagine su cui è stato effettuato il click.
A questo scopo, iniziamo dunque a configurare il trigger che si occuperà di tracciare tutti i click sui tag <img> che siano nidificati all'interno di un box che abbia Id="imgbox":
Il più è fatto: tutte le volte che cliccheremo all'interno di un'immagine contenuta nel box, verrà attivato un trigger che a sua volta servirà, come al solito, ad attivare un tag.
Quale tag?
Ovviamente, un tag di Universal Analytics di tipo evento.
Mediante questo tipo di tag, infatti, sarai in grado non solo di determinare nei tuoi report quante volte l'evento "click sull'immagine nel box Imgbox" è stata cliccata, ma potrai anche identificare l'immagine mediante la sua URL o, se presente, mediante un elemento Title o Alt acquisito mediante la creazione di una variabile di evento automatico creata a questo scopo:
Facile, no?
Continua...
Mediante questa modalità di analisi degli eventi, è possibile evidentemente non solo monitorare i click sulle immagini, ma su qualsiasi elemento del nostro Document Object Model, ed effettuare selezioni e raggruppamenti molto precisi degli elementi che andremo a monitorare.
Le potenzialità sono infinite: pensa ad esempio all'analisi dei click sugli articoli correlati, sui link interni, sui materiali di cui può essere effettuato il download, sulle liste di servizi forniti dalla tua impresa... ogni elemento o gruppo di elementi può essere incasellato e monitorato agevolmente, e senza mettere mano al codice del sito.
Nella prossima puntata del corso, inizieremo ad occuparci di advertising e di monitoraggio delle conversioni da campagne in PPC.
Alla prossima!
Ciao Fabio,
non ho ben capito come fai ad impostare la variabile “Click element” per il match con il selettore CSS.
Si tratta di un evento personalizzato?
Antonio
Assolutamente no. Puoi utilizzare l’operatore in relazione alla variabile Click Element in qualsiasi trigger. Gli eventi personalizzati sono un’altra cosa.