Bizzarra come implementazione, vero? 😀
Ma tracciare nel tuo Google Analytics 4 il dato del “Meteo” delle visite al tuo e-commerce ha uno scopo e utilità ben precisi.
Pensaci.
Mostrare le tue campagne pubblicitarie, o far apparire determinate squeeze page, in base alle specifiche condizioni meteo durante la navigazione dell’utente, non potrebbero migliorare le conversioni del tuo sito web?
(P.S.: Una squeeze page è una pagina di destinazione creata per sollecitare potenziali utenti a compiere una determinata azione. Come iscriversi alla newsletter o fare il download di una risorsa).
Oppure potresti scoprire che c’è una corrispondenza tra temperatura e tasso di conversione (per alcuni business correlati alle condizioni climatiche probabilmente è così).
“Ok, Matteo… sarebbe fantastico, ma come si fa?”
La risposta è… con Google Tag Manager ovviamente! 🙂
In questa guida ti mostrerò come tracciare il meteo e la temperatura dell’utente che sta visitando il tuo sito web e poi come inviare i dati in un evento a Google Analytics 4.
Sei pronto? Iniziamo!
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.
[ATTENZIONE] – questo script si usa la libreria jQuery (quindi deve essere implementata nel sito)
Per prima cosa vai sul tuo account Google Tag Manager:
<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 Trigger:
Il secondo Trigger è molto simile, cambia solo il nome:
Ora ti servono due Variabili di tipo Livello Dati.
In questo caso le due Variabili prenderanno il valore della Città e del 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 🙂
Lo step successivo cambia a seconda che tu abbia un sito web in http o in https.
Perché a seconda del caso cambierà il relativo script e quindi il Tag Custom HTML.
Nel caso di un sito in https, per creare il Tag Custom HTML, dovrai seguire questi passaggi:
<script>
var wuAppId = 'INSERISCI QUI LA TUA CHIAVE API';
jQuery.get("https://api.openweathermap.org/data/2.5/weather?lat=" + {{latitude}} + "&lon=" + {{longitude}} + "&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=" + {{latitude}} + "," + {{longitude}} + "&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>
Ehi, tutto bene fino a qui?
Ricordati che se hai dubbi o domande le porte della nostra community su Google Analytics 4 sono sempre aperte!
Sul nostro gruppo Facebook ufficiale “GA4 Italia” troverai il mio team e me pronti a darti una mano con le risposte che cerchi su Google Analytics 4.
In questo modo non rimarrai mai bloccato mano a mano che implementi e utilizzi GA4.
Configuriamo l’ultimo Trigger, promesso 😛
Questo ti servirà per il Tag evento che creerai nei prossimi step, con cui invierai i dati raccolti sul meteo al tuo Google Analytics 4.
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:
Sempre dal tuo account di Google Tag Manager:
Adesso non ci resta che verificare se tutto funziona correttamente.
Per cui attiva la modalità Debug/Preview di Google Tag Manager e vai sul tuo sito web.
Una volta completato il caricamento della pagina del tuo sito web dovresti vedere il Tag GA4 – Event – weather accendersi sull’evento weatherTrack.
Se apri la sezione API Call riuscirai a vedere anche il meteo (nel mio caso “Clouds” ovvero nuvoloso) e la temperatura in gradi (nel mio caso 30.45).
Vuoi essere ancora più sicuro che tutto funzioni correttamente?
Allora ti consiglio di utilizzare il DebugView di Google Analytics 4 per testare gli eventi!
Sei riuscito a configurare tutto nel modo giusto? Allora non ti resta che tornare in Google Tag Manager e pubblicare le modifiche cliccando sul pulsante blu “Submit“.
Buon Tag!
Per LaCuraDellAuto, punto di riferimento italiano per gli appassionati di car detailing, abbiamo avviato un…
Insieme a Linear - Gruppo Unipol, compagnia assicurativa online attiva dal 1996 e specializzata nell'offerta…
(* Il nome del cliente è coperto da accordo di riservatezza, e per questo motivo…
Cos'è il piano di misurazione (e cosa non è) Il piano di misurazione è un…
Avere automazioni di marketing per recuperare vendite e conversioni è un’ottima cosa. Se ci pensi…
Fgm04, fondata nel 2004 è una realtà di cosmeceutica professionale, evolutasi fino a diventare un…