Ti piacerebbe mostrare campagne pubblicitarie o far apparire determinati banner in base al meteo dell’utente che sta interagendo col tuo sito web?

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… sarebbe fantastico, ma come si fa?

La risposta è sempre la stessa… con Google Tag Manager!

In questa 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)

  • 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”

 

Tag HTML geolocation GA4 Google Tag Manager

 

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”

 

Trigger custom event mylocation Google Tag Manager

 

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

 

Trigger custom event location Google Tag Manager

 

STEP 3 – CREA LE VARIABILI di livello dati

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.

  • Sezione Variables > User-Defined Variables > New 
  • Tipo di Variabile: Data Layer Variable
  • Nome Variabile: latitude
  • Salva la Variabile, nominandola: “latitude”

 

Variabile di livello dati latitude evento Meteo GA4

 

  • Sezione Variables > User-Defined Variables > New
  • Tipo di Variabile: Data Layer Variable
  • Nome Variabile: longitude
  • Salva la Variabile, nominandola: “longitude”

 

Variabile di livello dati longitude evento Meteo GA4

 

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 🙂

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 Custom HTML

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=" + {{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>

 

  • Aggiungi il Trigger: “mylocation”

 

tag meteo https google tag manager

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=" + {{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>

  • Aggiungi il Trigger: “location”

 

tag meteo http google tag manager

 

STEP 5 – CREA IL TRIGGER PER IL TAG EVENTO DI GA4

Ultimo Trigger, promesso 😛 Questo ti servirà per il Tag evento che creerai nei prossimi step, con cui invierai i dati raccolti sul meteo a Google Analytics 4.

  • Sezione Triggers> New
  • Tipo di Trigger: Custom Event
  • Nome evento: weatherTrack
  • Salva con il nome: “weatherTrack”

 

Trigger weatherTrack per evento meteo Google Analytics 4

 

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”

 

Variabile di livello dati weather evento Meteo GA4

 

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”

 

Variabile di livello dati temperature evento Meteo GA4

 

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

 

Choose GA4 event tag

 

  • 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.

 

Tag evento weather GA4 Google Tag Manager

 

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 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).

 

Tag evento weather GA4 Google Tag Manager fired

Vuoi essere ancora più sicuro che tutto funzioni correttamente?

Allora ti consiglio di utilizzare il DebugView di Google Analytics 4 per testare gli eventi!

VUOI IMPARARE A USARE GA4 (GOOGLE ANALYTICS 4) IN MANIERA SEMPLICE E VELOCE?

Se ne hai abbastanza di perdere valanghe di ore a studiare delle guide per cercare di usare Google Analytics 4 da vero esperto e vuoi passare subito all’azione, forse ti posso aiutare.

Il consiglio spassionato che ti do è di dare un’occhiata al mio corso Google Analytics 4.

Ah, se invece gestisci un e-commerce (tuo o dei tuoi clienti) e vuoi configurare alla perfezione Google Analytics 4, nello Shop di Tag Manager Italia trovi un corso dedicato proprio a questa esigenza: si tratta di ”L’E-commerce in GA4”.

 

Corso Google Analytics 4

 

Buon Tag!

Condividi anche tu Google Tag Manager!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.