[Aggiornata il 15/02/2018]

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!
  • Reply

    Luca

    08 02 2018

    Ciao Matteo, grandissima guida grazie per aver risolto un problema. La mia domanda e’ questa: lo snippet per il flickering deve per forza essere aggiunto manualmente al sito oppure si puo’ creare un tag con codice html per evitare di toccare il codice del sito? specialmente se un analista come me che passa tempo su tag manager e dipende troppo dal suo developer…:)

    • Matteo Zambon

      09 02 2018

      Ciao Luca,

      il mio consiglio è quello di inserire il page hiding direttamente in pagina con l’aiuto degli sviluppatori o se riesci direttamente tu:) Ti sconsiglio HTML personalizzato perché di fatto lo script deve attivarsi PRIMA di Google Optimize e che il Tag di Google Optimize si attivi prima di Google Tag Manager:)

      Fammi sapere!

    • Luca

      09 02 2018

      In effetti ho provato a far attivare prima lo script tramite Tag, poi GO ed infine GA. Ma non ha funzionato.
      Capisco, quindi lo script non puo’ stare all’interno di GTM tramite tag perche’ dovrebbe attivarsi per primo. L’unico modo e’ renderlo indipendente ed inserirlo direttamente nel codice.

    • Matteo Zambon

      09 02 2018

      Esattamente Luca 🙂

  • Reply

    Leonardo

    28 01 2018

    Sempre il migliore, Matteo!
    Anche oggi mi hai risolto un problema (la documentazione di Google non è chiarissima a riguardo, IMHO)

    • Matteo Zambon

      28 01 2018

      Ciao Leonardo, mi fa piacere 🙂

      All’interno del Club Tag Manager Italia troveresti tantissime altre guide e #barbatrucchi inediti mai rivelati 😛

  • Reply

    Carlo

    12 01 2018

    Ciao Matteo,

    come al solito grazie per avermi risolto un problema! Tutto funziona correttamente dopo la tua guida ma volevo chiederti:
    Nella mia pagina, come descrivi tu, compare prima il tag Optimize, successivamente Hotjar e infine Analytics. Quindi come spieghi il tag Optimize si attiva prima di Analytics.

    Nell’immagine da te inserita in cui mostri i tag attivi nella pagina, però, si vede il contrario. Per caso, è sbagliata l’immagine o il mio ordine di lettura dei tag nella pagina?

    Grazie mille!

    • Matteo Zambon

      12 01 2018

      Ciao Carlo, ottima domanda la tua. In realtà l’ordine che vedi nel riquadro è puramente alfabetico. Google Optimize comunica la sua versione a GA perchè nella configurazione di Optimize associ la proprietà.
      Quindi è puramente alfabetica quella sequenza 😉

      PS: Maggiori approfondimenti su come ragione GTM nell’attivare prima un tag rispetto ad un altro, li trovi nel Club Tag Manager Italia

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

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