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 😛

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.
  • Inserisci la tua costante GA all’interno della sezione ID monitoraggio di Google Analytics.
  • ID contenitore Optimize: Inserisci il tuo ID.

Eh sì, come avrai notato, l’ID di Google Optimize è scritto come l’ID di Google Tag Manager (GTM- XXXXXXX). Della serie, ci piace rendervi la vita difficile.

 

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.

attivare tag google optimize prima google analyticsSTEP 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.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
    
    (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},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.

verifica tag google optimize e google analytics google tag manager

 

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

A presto e… 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 *