[Aggiornata 01 Agosto 2022]

Attenzione: in seguito al provvedimento del Garante Privacy italiano che ha dichiarato illecita l’implementazione di Google Universal Analytics (GA3) su un sito web, è necessario eliminare il prima possibile la proprietà di GA3 dai propri progetti web e passare subito a GA4.

Se non hai dimestichezza con GA4 e desideri imparare a padroneggiare nel modo corretto questo strumento, nel mio libro su GA4 “Google Analytics 4 per chi inizia” ti guido passo passo per imparare a utilizzarlo in maniera semplice e pratica.

La buona notizia è che grazie alla procedura che trovi in questa guida puoi installare Google Optimize anche in Google Analytics 4.

–

In passato ti ho parlato di cosa sia e cosa serve Google Optimize. Oggi voglio mostrarti come installare questo strumento con Google Tag Manager.

Beh, e che ci vorrà Matteo? Un Tag e via!

E invece no.

No, perché l’installazione di Google Optimize tramite GTM può creare un problema di flickering.

Flickering, che?

Il flickering è quel fenomeno che accade quando un utente entra all’interno del tuo sito, prima vede la versione originale della pagina e successivamente vede l’esperimento che hai impostato.

‘Na roba brutta, insomma. Non vorrai mica far pensare ai tuoi utenti che il sito sia posseduto da qualche forma strana, no? 😉

Non ti preoccupare, ora ti mostrerò come evitare tutto questo, così anche tu potrai iniziare a creare A/B test come se non ci fosse un domani 😛

PREMESSA

Esistono due metodi per installare Google Optimize:

• con tag globale del sito (gtag)
• con Google Tag Manager

Quello consigliato, perché risulta migliore a livello di performance (detta terra-terra: inserisce meno roba e ci mette meno tempo a caricare la pagina), è quello con gtag.

Il primo metodo però comporta esclusivamente modifiche dirette lato codice, che come sappiamo non sempre è possibile 🙁

In questa guida vedremo come installare Google Optimize con il secondo metodo, ovvero con Google Tag Manager 😉

STEP 1 – CREA IL TAG GOOGLE OPTIMIZE

Per prima cosa, ti servirà l’ID contenitore di Google Optimize e la tua costante GA (o il tuo codice UA). Poi dovrai seguire i seguenti passaggi:

• Entra all’interno del tuo contenitore.
• Vai nella sezione Tag.
• Clicca su: Nuovo.
• Tipo di Tag: Google Optimize.
• Adesso seleziona la Variabile delle impostazioni di Google Analytics in Impostazioni di Google Analytics, se l’hai creata, oppure abilita l’override e seleziona la costante {{gaID}} (che dovresti avere se hai seguito la mia guida su come creare una costante per l’ID di monitoraggio di GA). In alternativa inserisci semplicemente il tuo codice UA-XXXXXX-X.
• ID contenitore Optimize: Inserisci il tuo ID.

Inizialmente l’ID di Google Optimize aveva lo stesso identico prefisso dell’ID di Google Tag Manager (GTM- XXXXXXX). Della serie, ci piace rendervi la vita difficile. Fortunatamente Google si è rinsavita e ora il codice è OPT-XXXXXX (nell’immagine sotto c’è ancora GTM-XXXXX, ma tu inserisci quello che hai, quindi in teoria OPT-XXXXX).

• Ora dovrai inserire all’interno di Altre impostazioni e Impostazioni avanzate, tutti i campi e le impostazioni che hai all’interno del tuo Tag Pageview di Google Analytics. Perciò, se hai aggiunto l’impostazione per anonimizzare gli IP o ottimizzato il siteSpeedSampleRate, aggiungili nei campi appositi.
• Non aggiungere alcun Attivatore.
• Salva con il nome: “GO – Nome Sito”.

 

STEP 2 – MODIFICA IL TAG GOOGLE ANALYTICS

Ora dovrai dovrai impostare il Tag Pageview di Google Analytics in modo tale che si attivi dopo quello di Google Optimize.

• Cerca il Tag di Google Analytics che hai creato precedentemente.
• Vai in Impostazioni avanzate.
• In Sequenza tag, spunta l’opzione: Attiva un tag prima dell’attivazione di GA – Pageview.
• Tag di installazione: seleziona il Tag “GO – Nome Sito”.
• Salva.

STEP 3 – AGGIUNGI IL PAGE HIDING SNIPPET

Brutta notizia per te 🙁 Questo passaggio lo dovrai per forza fare a manina, ma ti giuro che è l’unico ed è piuttosto importante, perché va ad evitare il fenomeno di flickering di cui ti ho parlato prima. La User Experience dell’utente ne trarrà benefici, posso assicurartelo.

• Inserisci questo script all’interno delle pagine del tuo sito:

  <!-- Page hiding snippet (recommended) -->
  
  <style>.async-hide { opacity: 0 !important} </style>
  
  <script>
  
  (function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
  h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
  (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
  })(window,document.documentElement,'async-hide','dataLayer',4000,
  {'GTM-XXXXXX':true});
  </script>

• Ricordati di inserire il tuo ID contenitore di Google Tag Manager.
• Inserisci lo snippet nella parte più in alto della sezione <head>, prima di Google Analytics e Google Tag Manager.
• Finito 🙂

STEP 4 – VERIFICA I TAG

Ora non ti resta che verificare che il Tag di Google Optimize si attivi prima di Google Analytics. Come al solito, lo farai grazie alla funzione di Visualizza in anteprima.

Nei Tags Fired On This Event vedrai comparire infatti prima il Tag di Google Optimize “GO – Nome Sito” e poi il Pageview di Google Analytics.

Se tutto funziona come previsto, torna sul contenitore e clicca sul pulsante blu “Invia” per pubblicare ufficialmente le modifiche.

STEP 5 – VERIFICA CON GOOGLE OPTIMIZE.

Ultimo passaggio, fai una verifica con Google Optimize (lo puoi fare direttamente su Optimize, installandoti l’estensione di Chrome che ti servirà per fare gli A/B test).

Ora sei pronto per testare e creare, vedrai che figata 😉

Ti è piaciuta questa guida? Lasciami un commento, mi fa sempre piacere ricevere feedback!

A presto e… Buon Tag!

 

Link ufficiali

• Installare Optimize https://support.google.com/optimize/answer/7513085
• Pubblica Optimize utilizzando Google Tag Manager https://support.google.com/optimize/answer/6314801