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!
STEP 1 – Crea il Tag Custom HTML per gestire la geolocalizzazione dell’utente
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:
- Sezione Tags > New
- Tipo di Tag: Custom HTML
- Incolla il seguente snippet:
<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>
- Aggiungi il Trigger: “All Pages”
- Salva il Tag con il nome: “Geolocation”
STEP 2 – Crea l’attivatore Custom Event mylocation
Lo script dello step precedente ha generato due eventi personalizzati e due Variabili. Gli eventi personalizzati li catturerai andando a creare due Trigger:
- Sezione Triggers > New
- Tipo di Trigger: Custom Event
- Nome evento: mylocation
- Salva con il nome: “mylocation”
Il secondo Trigger è molto simile, cambia solo il nome:
- Sezione Triggers > New
- Tipo di Trigger: Custom Event
- Nome evento: location
- Nomina il Trigger: “location”
- Salva
STEP 3 – CREA LE VARIABILI di livello dati
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.
- Sezione Variables > User-Defined Variables > New
- Tipo di Variabile: Data Layer Variable
- Nome Variabile: latitude
- Salva la Variabile, nominandola: “latitude”
- Sezione Variables > User-Defined Variables > New
- Tipo di Variabile: Data Layer Variable
- Nome Variabile: longitude
- Salva la Variabile, nominandola: “longitude”
STEP 4 – CREA IL SECONDO TAG CUSTOM HTML
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.
Caso 1 – Sito Https
Nel caso di un sito in https, per creare il Tag Custom HTML, dovrai seguire questi passaggi:
- Sezione Tags > New.
- Tipo di Tag: Custom HTML
- Incolla il seguente snippet:
<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>
- Aggiungi il Trigger: “mylocation”
Caso 2 – Sito Http
Per un sito http, il codice sarà leggermente diverso:
- Sezione Tags > New.
- Tipo di Tag: Custom HTML
- Incolla il seguente snippet:
<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>
- Aggiungi il Trigger: “location”
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.
STEP 5 – CREA IL TRIGGER PER IL TAG EVENTO DI 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.
- Sezione Triggers> New
- Tipo di Trigger: Custom Event
- Nome evento: weatherTrack
- Salva con il nome: “weatherTrack”
STEP 6 – CREA LE VARIABILI PER IL TAG EVENTO DI GA4
Per raccogliere i dati riguardanti il meteo e la temperatura, è necessario creare altre due Variabili.
Una per il meteo:
- Sezione Variables > User-Defined Variables > New
- Tipo di Variabile: Data Layer Variable
- Nome Variabile: weather
- Salva la Variabile, nominandola: “weather”
E l’altra che traccerà la temperatura:
- Sezione Variables > User-Defined Variables > New
- Tipo di Variabile: Data Layer Variable
- Nome Variabile: temperature
- Salva la Variabile, nominandola: “temperature”
STEP 7 – CREA IL TAG EVENTO DI GA4
Sempre dal tuo account di Google Tag Manager:
- Vai nel menù Tags > New
- Tipo di tag: GA4 Event
- Seleziona il Tag di Configurazione di Google Analytics 4 in Configuration Tag. Oppure inserisci direttamente il codice del Data Stream di GA4
- Event Name: weather
- Aggiungi due nuovi parametri in Event Parameters
- Parameter Name: weather – Parameter Value: {{weather}}
- Parameter Name: temperature – Parameter Value: {{temperature}}
- Attiva su: seleziona il Trigger “weatherTrack”
- Dai un nome al Tag. Solitamente la mia nomenclatura segue questa struttura: “GA4 – Event – weather“
- Salva il Tag.
STEP 8 – VERIFICA LA CONFIGURAZIONE
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!
Altre Guide che potrebbero interessarti
- Caso studio: Come CGN ha ridotto il tasso di abbandono e…
- Le metriche e dimensioni in Google Analytics 4: Bounce Rate,…
- I segreti di GA4: best practice e soluzioni ai problemi di…
- Caso studio: Greenpeace ottimizza la User Experience, il…
- Caso Studio: Aumento dell'88% delle conversioni campagne…
- Come tracciare la visualizzazione di una sezione specifica…
Chiedi pure qui sotto, sarò pronto a risponderti!
Unisciti alla più grande community italiana dedicata alla Digital Analytics!
Iscrivendoti alla newsletter gratuita di Tag Manager Italia riceverai:
- guide (base/avanzate) passo passo
- news di approfondimento
- webinar gratuiti
- offerte esclusive
e altre risorse di 1°classe sul mondo della Digital Analytics!
- Attribuzioni errate in GA4: cause e soluzioni al problema
- Come creare una Dashboard Ecommerce per analizzare i dati degli acquisti Nuovi e di Ritorno
- Caso studio: Greenpeace ottimizza la User Experience, il tasso di conversione e il ROI del suo sito web, landing page e campagne advertising grazie al Server-Side tracking e alla Consent Mode
- Consent Mode v2 e calo dei dati delle audience e del traffico in Google Ads: cause e soluzioni
- Data Leak Google: Chrome e le implicazioni per la Privacy e la Digital Analytics
- Matteo Zambon su Guida Base: come tracciare i click al link Phone (telefono) in GA4 con Google Tag Manager
- Matteo Zambon su Come gestire la Consent Mode v2 con Iubenda e Google Tag Manager
- Matteo Zambon su Come installare Google Analytics 4 (GA4) con Google Tag Manager
- Matteo Zambon su Glossario: Google Tag Assistant
- Matteo Zambon su Guida Avanzata: come configurare Conversion API di Facebook con l’integrazione nativa per Google Tag Manager
Matteo
27 07 2022
Ciao Matteo,
ho seguito la tua guida step by step e ho riscontrato delle possibili incongruenze. All’inizio non funzionava nulla o quasi ma poi ho capito il problema, che ti segnalo così che tu possa verificare (che sicuramente ne sai mooooolto più di me!).
In pratica tutte le terminologie inglesi le ho dovute “tradurre”. Dopodiché tutto ha iniziato a funzionare.
Il trigger weatherTrack è diventato meteoTracciato.
Le variabili ‘weather’ e ‘temperature’ sono diventate rispettivamente ‘meteo’ e ‘temperatura’.
Inoltre le variabili latitude e longitude sono da impostare con i valori ‘lati’ e ‘longi’.
Se ho sbagliato a interpretare qualcosa nella tua guida dimmi pure. Comunque con le modifiche indicate sopra funziona, questo è l’importante.
Grazie come sempre del super supporto che tu e il tuo team date a tutti noi!!!
Matteo Zambon
01 08 2022
Grazie Matteo del feedback! Forse è dovuto a come ti sei registrato nel servizio ipinfo 🙂
Buon Tag!
romeocharly
11 05 2022
Buongiorno,
non funziona ne con latitude o lati ne con longitude longi….nello script, se ben comprendo cè ancora lati e longi. Ma non so quali cambiare in latitude e longitude.
Matteo Zambon
18 05 2022
Ciao, verifica nel dataLayer qual è il push e i valori nella variabile.
Se prendi lo script presente nello step 1 i valori sono lati e longi.
Fammi sapere.
romeocharly
01 06 2022
Buonasera,
ho ricontrollato 4 volte i parametri immessi , se erano o no uguali ai tuoi. Ok uguali ma il data layer è vuoto:
Current values of the Data Layer:
{}
1
{}
non capisco più nulla.
Matteo Zambon
10 06 2022
Ciao Romeo, riesci a darmi il link del sito o degli screenshot di cosa vedi nel debug?
Hai seguito lo step 4 registrandoti su https://openweathermap.org/ ?
Fammi sapere, nel caso dammi maggiori dettagli qui: https://www.facebook.com/groups/TagManagerItalia
Andrea
27 10 2021
Buongiorno Mattero, sto seguendo questa tua guida per l’implementazione del tracking del meteo del visitatore ma ho trovato un ostacolo, nel momento di pubblicare ricevo due errori relativi a:
Unknown variable “Lati” found in a tag. Edit the tag and remove the reference to the unknown variable.
Unknown variable “Longi” found in a tag. Edit the tag and remove the reference to the unknown variable.
nel tag Weather – https
e l’errore è
Unknown variable name
qualche consiglio sul come procedere?
Matteo Zambon
27 10 2021
Ciao Andrea, grazie del feedback. Le variabili in GTM si chiamano latitude e longitude. Ho aggiornato lo script nello step.
Fammi sapere 🙂
Andrea
27 10 2021
Grazie Matteo per la risposta velocissima!
Adesso funziona tutto correttamente, ti ringrazio!
Matteo Zambon
29 10 2021
Ottimo 🙂