Scopriamo come tracciare i click solo quando siamo su device mobile
Vediamo gli step di cui avremo bisogno:
Su Google Tag Manager
- Una variabile di tipo “Custom Javascript”
- Un trigger di tipo “Just links”
- Un TAG di tipo “Universal Analytics”
Su WordPress
- Una funzione javascript per inviare il dato a Google Tag Manager
- Un selettore di classe da aggiungere ai tag a che contengono il numero di telefono
Su Google Analytics e Google Tag Manager
Google Tag Manager: Una variabile di tipo “Custom Javascript“
Cliccare su “Variables”, e poi sul bottone NEW. Chiameremo la variabile “Device type”:
Il codice :
function()
{
/// the minimum width for each device we're able to detect, from big to small
var deviceMinWidths = {
'desktop': 769,
'tablet': 321,
'mobile': 0
}
/// find the device type
for(var device in deviceMinWidths)
{
if(window.screen.width >= deviceMinWidths[device])
{
//console.log('test');
return device;
}
}
}…ci consentirà di individuare il tipo di device basandoci sulla larghezza del viewport o area visibile del browser che in esso visualizzerà la pagina web.
Google Tag Manager: Un Trigger di tipo “Just Links“
Creiamo adesso l’attivatore o trigger che ci servierà nel tag. Il tipo di Trigger è “Click-Just links”. Lo chiameremo “click numeri di telefono”. Queste le opzioni da configurare:
Dopo aver cliccato su Check Validation imposteremo le condizioni tramite le quali il trigger verrà messo a disposizione. Esso sarà disponibile su tutte le pagine, ovvero quando page URL corrisponde a .*
Il blocco successivo imposta invece la condizione nella quale dovremo trovarci affinchè l’attivatore venga “scatenato”. Questo accadrà quando l’url inizierà per “tel:“.
Come sappiamo l’espressione “tel:” all’interno dell’attributo “href” nel tag “a” istruisce il device ad attivare il dialer, riportando il numero indicato dopo “tel:” in esso. Lo scopo è quello di far trovare ai supporti mobile, dei tag “a” con classe “tel:” in presenza di numeri di telefono…
Google Tag Manager: Un TAG di tipo “Universal Analytics“
A questo punto possiamo creare il TAG. Cliccare sulla voce di menu TAG e poi sul bottone new
Diamo il nome “GA – Event – Click Phone” al tag e scegliamo come tipo “Universal Analytics”.
Si noti l’utilizzo nel campo azione della variabile “built in” {{CLICK URL}}. Stessa cosa per la variabile utilizzata per il campo “Label”, {{Page Path}}.
Le variabili “built in” possono essere richiamate, se già non presenti nell’elenco che viene visualizzato di default cliccando sulla voce di menu “Variables”, cliccando sul bottone “CONFIGURE”:
… e scegliendo quali visualizzare:
La variabile Google Analytics Settings memorizza infine il codice di monitoraggio collegato a Tag Manager.
Il nostro tag avrà come attivatore il trigger “click numeri di telefono” visto in precedenza.
WordPress: creare una funzione javascript per inviare il dato a Google Tag Manager
Non tratteremo in questo articolo tutta la parte relativa a come inserire codice e personalizzazioni su wordpress. In estrema sintesi possiamo dire che abbiamo bisogno di un file .js o comunque di una funzione js da inserire nelle pagine, dove poter mettere il nostro codice custom. Normalmente, si consiglia di creare un tema figlio e aggiungere il proprio file .js attraverso il file functions dello stesso tema figlio :).
Questo il codice che andremo a inserire:
jQuery(document).ready(function($){
var isMobile;
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
isMobile = true;
}else{
isMobile = false;
}
function listenToEvents(isMobile){
if(isMobile){
$('a.tel').bind('click',function(e){
var $numero = 'tel:'+$(this).text();
$(this).attr('href', $numero);
});
}else{
//rimuovo tag, lascio testo
$('a.tel').contents().unwrap();
}
}
listenToEvents(isMobile);
});//end readyLa funzione di cui sopra fa essenzialmente due cose:
– Verifica se ci troviamo su un device mobile
– Se la risposta è “true“, quando si clicca su un link che abbia classe uguale a “tel”, popoliamo una variabile , “$numero”, con il valore da passare al dialer del device (tel:numero), e la settiamo come valore dell’attributo “href”
– Se la risposta è “false“, rimuoviamo completamente il tag “<a>” dal numero, in modo da non poterlo rendere cliccabile ed avere così un dato statistico su analytics più veritiero. Passeremo infatti solo gli eventi click che arrivano dai device mobile, ovvero quelli che hanno effettivamente un dialer con cui fare delle telefonate!
WordPress: aggiungere un selettore di classe ai tag a che contengono il numero di telefono
Bene! A questo punto, per completare la parte di lavoro su WordPress, sarà sufficiente, ovunque ci sia un numero di telefono, inserirlo con la seguente sintassi:
<a href="#" class="tel">02xxxxxxx</a>… facendo attenzione a inserire dentro al tag a il solo numero di telefono senza icone o altro.
Test di funzionamento
Dopo aver salvato tutte le modifiche su Tag Manager, andiamo in modalità preview
e apriamo il sito su un nuovo tab dello stesso browser.
come possiamo vedere, inizialmente, non avendo cliccato su alcun numero, l’evento Click Phone non è stato scatentato.
NB: lo script che invia l’evento click ad analytics viene attivato solo sui device mobile, quindi, per verificare sulla preview di tag manager che il tag venga attivato, dovremmo modificare la funzione javascript inserita su wordpress per renderla disponibile anche sul desktop. In ogni caso possiamo andare avanti con il test andando direttamente sugli eventi in tempo reale di Analytics.
Come potete notare dallo screen degli eventi di analytics sotto riportato, dopo aver cliccato su un numero di telefono, visualizzeremo la categoria evento “Phone”, con il valore corrispondente al numero di telefono cliccato!
… e non solo, cliccando sulla categoria “Phone” potremo visualizzare anche il link della pagina da cui il numero è stato cliccato (colonna “etichetta evento”).
See you soon!
