Implementazione di Optimize

Come aggiungere Optimize direttamente al tuo sito web

Per poter eseguire esperimenti di Optimize, devi aggiungere gli snippet di Optimize al tuo sito web. Lo snippet principale di Optimize è una linea di codice che viene aggiunta al codice di monitoraggio di Google Analytics esistente. Questa linea di codice carica il contenitore dell'esperimento Optimize specificato come plug-in di Google Analytics. Lo snippet per nascondere le pagine riduce il rischio di sfarfallio e timeout delle pagine sulle connessioni lente.

Come implementare Analytics?

La modalità di implementazione di Optimize dipende da quella di Analytics. Scegli tra le opzioni riportate di seguito quella che meglio descrive la tua configurazione:
 
La maggior parte degli utenti con una semplice installazione di Analytics e non utilizzando un sistema di gestione tag (TMS) come Google Tag Manager, dovrebbe seguire le istruzioni in questo articolo.
 
Gli utenti avanzati che implementano Analytics con un TMS hanno due opzioni:
 
  1. Per un rendimento ottimale, implementa Optimize direttamente nella pagina. Ulteriori informazioni.
  2. Per una maggiore flessibilità, ma con un rendimento leggermente inferiore, puoi implementare Optimize tramite Google Tag Manager. Ulteriori informazioni.
In questo articolo:

Prerequisiti

  1. Completa i passaggi nell'articolo Impostazione di Optimize.
  2. Universal Analytics (analytics.js) installato sul tuo sito web.
  3. Accedi per apportare modifiche al tuo sito web.
  4. Esperienza di modifica HTML di base.

Ottenere lo snippet Optimize

Il metodo consigliato per implementare Optimize è di aggiungerlo al codice di monitoraggio di Google Analytics esistente direttamente sul tuo sito web, non tramite una soluzione di gestione dei tag.

Ottieni lo snippet Optimize:

  1. Vai alla pagina Esperimenti.
  2. Individua il riquadro delle informazioni Contenitore (sul lato destro della pagina).
  3. Fai clic su Installa snippet Optimize.
  4. Fai clic sul pulsante blu VISUALIZZA SNIPPET.
  5. Segui le istruzioni sullo schermo.

La finestra di dialogo snippet contiene il codice di monitoraggio di Analytics modificato e il facoltativo snippet per nascondere le pagine, personalizzato con l'ID contenitore Optimize. Entrambi sono pronti per essere implementati nelle pagine web su cui fare esperimenti.

Passaggio 1: implementazione del codice di monitoraggio di Analytics modificato

Per iniziare a eseguire esperimenti sul tuo sito web devi aggiungere il codice di monitoraggio di Analytics modificato al codice HTML della tua pagina. Puoi aggiungere il codice a tutte le tue pagine web o solo alle pagine su cui effettuare esperimenti.

Per implementare Optimize, copia il codice di monitoraggio di Analytics modificato dalla finestra di dialogo di Optimize e posizionalo il prima possibile nell'<HEAD> e prima di qualsiasi altro script di monitoraggio (non utilizzato negli esperimenti).

Di seguito ulteriori informazioni sull'ordine degli snippet.

Passaggio 2: distribuzione dello snippet per nascondere le pagine

Oltre al codice di monitoraggio di Analytics modificato, ti consigliamo di installare anche lo snippet per nascondere le pagine che riduce il rischio di sfarfallio delle pagine. Questa sezione di codice assicura anche che gli utenti con connessioni lente abbiano un'esperienza migliore, mostrando solo varianti dell'esperimento quando il contenitore Optimize viene caricato entro il timeout impostato.

Ulteriori informazioni sulla personalizzazione dello snippet per nascondere le pagine, oltre a come modificare il valore di timeout.

Best practice di codifica

Il posizionamento degli snippet di codice Optimize è importante. In generale, l'ordine dei tag dovrebbe essere:

  1. Qualsiasi JavaScript (ad es. jQuery) da utilizzare negli esperimenti Optimize. Ti consigliamo di tenerli al minimo.
  2. Inizializzazione di qualsiasi variabile necessaria per il targeting (livello dati, JavaScript, cookie ecc.).
  3. Snippet per nascondere le pagine.
  4. Codice di monitoraggio di Analytics modificato con il plug-in Optimize.
  5. Snippet contenitore Tag Manager.
  6. Altri JavaScript, tracker e tag annuncio.

Ecco alcune best practice da tenere a mente quando aggiungi il codice alle tue pagine web:

  1. Lo snippet per nascondere le pagine deve essere posizionato immediatamente prima del codice di monitoraggio di Analytics modificato (dopo le dichiarazioni <meta charset>).
  2. Sposta il codice di monitoraggio di Google Analytics fino a <HEAD>, se non è già lì. Dovrebbe seguire immediatamente lo snippet per nascondere le pagine, se possibile.
  3. l seguenti elementi devono venire prima del codice di monitoraggio di Analytics modificato:
    • <meta charset>
    • Inizializzazione del livello dati
    • Impostazione dei cookie
    • Tutti gli script da utilizzare o che dichiarano le variabili JavaScript da utilizzare negli esperimenti Optimize. Ad esempio, jQuery e JavaScript utilizzati per scegliere come target una variante Optimize
    • Snippet per nascondere le pagine
  4. I seguenti elementi devono venire dopo il codice di monitoraggio di Analytics modificato:
    • Altri tracker, tag di analisi, tag annuncio e/o tag distribuiti da un sistema di gestione tag
    • Altri script su cui non vuoi indirizzare esperimenti Optimize

Puoi anche scegliere come target le variabili impostate dopo il caricamento del plug-in Optimize, ad esempio con pagine dinamiche o applicazioni web, tramite Eventi di attivazione.

Example: Modified Analytics tracking code

The Optimize plugin is a single line of code, containing your Optimize container ID, that looks like this:

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

When added to your Analytics tracking code the modified code looks like this:

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

Note: Replace GTM-XXXXXXX with your Optimize container ID, and UA-XXXXXXX-X with your Analytics tracking ID.

Example: Modified Analytics tracking code with anti-flicker

The following is an example of an HTML page with anti-flicker snippet and the modified Analytics tracking code:

<HTML>
<HEAD>
<!-- Anti-flicker 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-XXXXXXXX-X', 'auto');
    ga('require', 'GTM-XXXXXX');
    ga('send', 'pageview');
    </script>

Note: Replace GTM-XXXXXX with your Optimize container ID and replace UA-XXXXXXXX-X with your Analytics tracking ID.

Passaggi successivi

Dopo aver implementato il codice di monitoraggio di Analytics modificato nelle tue pagine web, sei pronto per creare il tuo primo test A/B, reindirizzamento o MVT

È stato utile?
Come possiamo migliorare l'articolo?