Installare Google Optimize: i diversi metodi di installazione

L’installazione di Google Optimize potrebbe sembrare un’attività banale, ma in realtà è un operazione delicata che influenza l’esperienza utente.

Prima di tutto: l’installazione di Google Optimize attraverso Google Tag Manager è fortemente sconsigliata da Google stesso!
L’utilizzo di Tag Manager può generare il flickering:la visualizzazione per pochi centesimi di secondo della versione di base della pagina invece del esperimento.
Il flickering peggiora di molto la qualità del esperienza utente ed qualcosa da evitare assolutamente.

L’installazione consigliata da Google per Optimize è utilizzare il plugin per Google Analytics: una singola riga di codice javascript

ga('require', 'GTM-XXXXXX');

Il codice completo è da inserire all’interno della pagina il più in alto possibile:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-X', 'auto');
ga('require', 'GTM-XXXXXX');
ga('send', 'pageview');
</script>

Ma non basta: nonostante un’installazione secondo linee guida il flickering potrebbe sempre inficiare l’esperienza utente: per evitarla al 100% Google consiglia di installare il Page-hiding snippet: un piccolo codice javascript che evita che la pagina html sia visualizzata dal browser prima che Google Optimize abbia selezionato quale versione del esperimento mostrare all’utente corrente.

Page-hiding snippet:

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

Il page-hiding snippet deve essere installato prima del codice di Google Analytics con il plugin di Optimize.

Ma fino ad ieri tutti i nostri tag dovevano essere installati con GTM, GTM era il nostro nuovo faro nella gestione dei tag, ed ora Optimize deve essere installato con Google Analytics e mi serve anche un altro codice installato in pagina! Cosa stiamo sbagliando?

Purtroppo nulla, è Google che sembra aver perso un po’ la rotta con l’installazione di Optimize con nuove linee guida che cambiavano di mese in mese.
Ma se io sto già utilizzando GTM cosa devo fare? Tornare indietro e reimplementare Google Analytics in pagina?

Per fortuna no, esiste un workaround descritto da Google stessa: è possibile installare Google Optimize in parallelo con GTM.

Prima di tutto bisogna personalizzare il codice di Google Analytics per non inviare una pageview:

<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXXXX-Y', 'auto');  // Update tracker settings 
  ga('require', 'GTM-XXXXXX');           // Add this line
                                         // Remove pageview call
  
</script>

Manca ancora qualcosa:il page hiding!
Mettiamo tutto insieme:

<!-- 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>
<!-- Modified Analytics tracking code with Optimize plugin -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');  // Update tracker settings 
  ga('require', 'GTM-XXXXXX');           // Add this line
                                         // Remove pageview call

</script>

L’installazione perfetta prevede l’installazione dei diversi codici nel seguente ordine:

1. Page Hiding snippet
2. Optimize con codice modificato di Google Analytics
3. Google Tag Manager

Tutto questo per evitare il flickering ed gestire i nostri esperimenti al meglio.

Qua in fondo inserisco il codice finale con Page Hiding, Optimize e GTM, dovete solo cambiare gli ID di proprietà e container

<!-- 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>
<!-- Modified Analytics tracking code with Optimize plugin -->
    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXXXX-Y', 'auto');  // Update GA Property ID
  ga('require', 'GTM-XXXXXX');           // Update Optimize ID

</script>
// Update GTM container ID
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Speriamo che un giorno Google migliori questa installazione, così è molto complicato e confusionario.