Ti immagini mostrare le campagne AdWords o far apparire determinati banner in base al meteo dell’utente che sta navigando il tuo sito?
Oppure semplicemente puoi capire se c’è una corrispondenza tra temperatura e tasso di conversione (per alcuni business correlati alle condizioni climatiche probabilmente sì).
Ok, Matteo… sono tutt’orecchi, come si fa?
La risposta è ormai banale 😛 Tracciamo meteo e temperatura con Google Tag Manager.
Può sembrare difficile, ma ti assicuro che non lo è.
Sei pronto? Iniziamo!
[premessa: lo script utilizza la libreria jQuery di JavaScript]
La guida fa riferimento a questo articolo del buon Enrico Pavan (che è sempre un passo avanti).
Il Tag che andrai a creare ti permetterà di raccogliere le informazioni riguardo la geolocalizzazione dell’utente, sia che tu abbia un sito http che https.
<script>
var locations=window.location.protocol;
if (locations != "https:"){
jQuery.get("http://ipinfo.io", function(response) {
//console.log(response.city, response.country);
var lati=response.city;
var longi=response.country;
dataLayer.push({'event':'location','lati':lati,'longi':longi})
}, "jsonp");
}
else{
if ("geolocation" in navigator){ //check geolocation available
//try to get user current location using getCurrentPosition() method
navigator.geolocation.getCurrentPosition(function(position){
//console.log("" \nLat : "+position.coords.latitude+" \nLang :"+ position.coords.longitude);
var lati=position.coords.latitude;
var longi=position.coords.longitude;
var lat2 = lati.toFixed(2);
var long2 = longi.toFixed(2)
dataLayer.push({'event':'mylocation','lati':lat2,'longi':long2})
});
};
}
</script> Lo script dello step precedente ha generato due eventi personalizzati e due Variabili. Gli eventi personalizzati li catturerai andando a creare due Attivatori:
Il secondo Attivatore è molto simile, cambia solo il nome:
Ora ti servono due Variabili di tipo Livello Dati. In questo caso le due Variabili prenderanno la città e il paese in cui si trova l’utente. Servono per capire in che posizione si trova e di conseguenza venire a sapere il meteo e la temperatura.
Prima di creare il secondo Tag, devi registrarti a OpenWeatherMap e ottenere la tua chiave API. Registrarsi è completamente gratuito, al contrario di altre piattaforme.
All’interno della sezione “API Keys” troverai la tua chiave API da copiare e incollare nel codice che troverai qui sotto 🙂
C’è prima una distinzione da fare, cioè se il sito è in http o in https. A seconda del caso, cambierà lo script e quindi il Tag HTML personalizzato.
Nel caso di un sito in https, per creare il Tag HTML personalizzato, dovrai seguire questi passaggi:
<script>
var wuAppId = 'INSERISCI QUI LA TUA CHIAVE API';
jQuery.get("https://api.openweathermap.org/data/2.5/weather?lat=" + {{Lati}} + "&lon=" + {{Longi}} + "&units=metric&appid=" + wuAppId, function(data) {
var meteo=data.weather[0].main;
var tempi=data.main.temp;
window.dataLayer.push({
'event': 'meteoTracciato',
'meteo': meteo,
'temperatura': tempi
});
},"json")
</script> Per un sito http, il codice sarà leggermente diverso:
<script>
var wuAppId = 'INSERISCI QUI LA TUA CHIAVE API';
jQuery.get("https://api.openweathermap.org/data/2.5/weather?q=" + {{Lati}} + "," + {{Longi}} + "&units=metric&appid=" + wuAppId, function(data) {
var meteo=data.weather[0].main;
var tempi=data.main.temp;
window.dataLayer.push({
'event': 'meteoTracciato',
'meteo': meteo,
'temperatura': tempi
});
},"json")
</script>
Ultimo Attivatore, promesso 😛 Questo ti servirà per il Tag evento che creerai nei prossimi step, con cui invierai i dati raccolti sul meteo a Google Analytics.
Per raccogliere i dati riguardanti il meteo e la temperatura, è necessario creare altre due Variabili. Una per il meteo:
E l’altra che traccerà la temperatura:
Il meteo influenza il comportamento dell’utente? Sicuramente sì. Per questo motivo confrontare meteo e temperatura con le altre metriche (conversion rate, bounce rate, ecc…) è fondamentale. E come si fa? Beh, lo fai creando le dimensioni personalizzate su Google Analytics:
Pssss… mi raccomando, segnati gli indici delle dimensioni, ti serviranno nel prossimo step!
Siamo quasi alla fine, ti manca solo di assemblare il tutto con un Tag evento di tipo Universal Analytics e associargli Variabili, Dimensioni personalizzate e Attivatore. Ecco i passaggi da seguire:
Nello step 6 hai creato due dimensioni personalizzate su Google Analytics, di conseguenza le dovrai aggiungere al Tag, in modo tale da poter incrociare i dati tra loro.
Grazie a questo Tag, Google Analytics riceverà i dati su meteo e temperatura.
Apri la funzione di Debug e Anteprima e controlla che tutto stia funzionando correttamente! Se vedi i dati raccolti, vuol dire che puoi pubblicare le tue modifiche 😉 per farlo ricordati di cliccare sul pulsante blu “Invia” in Google Tag Manager.
Interessante, vero? Non hai idea di quante cose puoi fare con queste informazioni!
Fammi sapere nei commenti cosa ne pensi!
A presto e… Buon Tag!
LUISAVIAROMA è uno dei principali fashion e-tailer di lusso al mondo, con oltre 5 milioni…
All’interno del vasto e competitivo mercato della Grande Distribuzione Organizzata (GDO), Mondo Convenienza rappresenta uno…
Se ti occupi di marketing o advertising, saprai che i funnel rappresentano il percorso che…
È stato un nuovo record per il GA4Summit: oltre 500 professionisti e professioniste del web…
Negli ultimi mesi hai notato in Google Analytics 4 un calo improvviso e inspiegabile nelle…
Se ti trovi su questa guida è perché hai compreso che solo attraverso la Data…
View Comments
Buongiorno e grazie per l'imponente lavoro.
ho scritto tutto come da guida ma non mi da mete e temperature, che sono Variabile di livello dati undefined
undefined
Cosa posso sbagliare?
Ciao :)
Assicurati di utilizzare il giusto script in base al protocollo del tuo sito web (http oppure https).
Nota bene che anche l’attivatore è diverso a seconda dello script ;)
Altra cosa, lo script si basa su jQuery e quindi devi avere installata la sua libreria nel sito.
Fammi sapere!
Buongiorno,
chiedo scusa per la troppo tempestiva domanda. Ho cambiato browser e tutto è ok.
Prima usavo Avast ora uso Edge.
Ancora complimenti per il lavoro, grazie.
Ottimo! Ti consiglio di usare browser come Chrome, Firefox, Safari o Edge. Avast è un browser "tarocco" fatto da Avast (che di fatto è un software antivirus).
Grazie del feedback!
Buon Tag
WOW, Matteo
grande tutorial, devo assolutamente provare.
Grazie Sylwia :D
Fammi sapere!
Come ci sei riuscito? Anche tu usi DuracellTomi mi sembra? Credo che il plugin in qualche modo previene il rilevamento da parte di Google. Controllando il codice sorgente, mi sono accorto che, contrariamente a quanto indica Google, il plugin inserisce il codice solo una volta e non sia nell'head che a inizio body.
Ciao Mario, no il plugin lo posiziona in modo corretto. Forse c'è qualcosa che non va con il template che usi? In ogni modo ho semplicemente seguito gli step della search console ;)
A presto!
Ciao, volevo chiederti, tu sei riuscito a verificare la proprietà del tuo sito su Google Search Console tramite codice Google Tag Manager? A me dice che non trova il codice sul sito, ed il codice è implementato tramite il plugin di DuracellTomi e io lo vedo, mi sembra assurdo...
Ciao Mario, sì ci son riuscito :)