Guida Avanzata: come tracciare il Meteo del Visitatore in GA4 con Google Tag Manager

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!