Installare Optimize

Come aggiungere Optimize al tuo sito web.

Optimize viene installato aggiungendo al sito web un piccolo snippet di codice che consente ai visitatori di visualizzare le esperienze di Optimize (test e personalizzazioni).

Prerequisiti

Prima di procedere, devi disporre di un account Optimize e di un contenitore collegato a una proprietà di Google Analytics. Per sapere come fare, consulta l'articolo Impostare Optimize. Devi anche modificare l'accesso al codice HTML del tuo sito web per taggarlo con lo snippet Optimize.

Scegliere un metodo

Esistono due metodi consigliati per installare Optimize, a seconda di come viene distribuito Google Analytics:

  1. Metodo 1: se utilizzi il tag globale del sito (gtag.js).
  2. Metodo 2: se utilizzi Google Tag Manager (GTM).

Metodo 1: installare Optimize con il tag globale del sito (gtag.js)

Nota: se utilizzi Google Tag Manager, segui queste istruzioni.

Passaggio 1: installa il tag globale del sito con Analytics

Nota: se hai già taggato il tuo sito web con il tag globale del sito e Analytics, vai al passaggio 2 per aggiungere l'ID contenitore Optimize.

Per installare Optimize, è necessario il tag globale del sito (gtag.js) con Google Analytics. Puoi trovarlo nella console di amministrazione di Google Analytics (Amministratore > colonna Proprietà > Informazioni per il monitoraggio > Codice di monitoraggio) oppure puoi personalizzare l'esempio seguente.

Esempio: tag globale del sito con Google Analytics

Il tag riportato di seguito carica la libreria gtag.js, stabilisce GA_TRACKING_ID come ID proprietà predefinito di Google Analytics e invia un hit di visualizzazione di pagina a Google Analytics.

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID');
</script>

 

Nota: sostituisci GA_TRACKING_ID con il tuo ID di monitoraggio di Google Analytics.

Consulta il Centro assistenza Analytics per ulteriori informazioni su come impostare il monitoraggio di Analytics.

Passaggio 2: aggiungi Optimize al tag globale del sito

Se hai il tag globale del sito (gtag.js) e l'ID di monitoraggio di Google Analytics, devi aggiungere l'ID contenitore Optimize alla riga gtag('config', ad esempio:

   gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});

In Optimize (Contenitore > Configurazione contenitore > Installa Optimize) è possibile inserire automaticamente nel tag globale del sito personalizzato i tuoi ID di Analytics e Optimize.

Esempio: tag globale del sito con Google Analytics e Optimize

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>
 

Nota: sostituisci GA_TRACKING_ID con il tuo ID di monitoraggio di Google Analytics e OPT_CONTAINER_ID con l'ID contenitore Optimize.

Passaggio 3: installa il tag globale del sito sul tuo sito web

Per installare il tag globale del sito sul tuo sito web, incolla lo snippet di codice subito dopo il tag <head> in ogni pagina che vuoi ottimizzare.

  • Se il tag globale del sito è già installato nel sito web, aggiungi l'ID contenitore Optimize (vedi il passaggio 2 in alto) e sposta il tag esistente all'inizio della sezione <head>.
  • Se il tag globale del sito non è installato nel sito web, installalo all'inizio della sezione <head> in ogni pagina web che vuoi ottimizzare.

Nota: è necessario un solo tag globale del sito per pagina.

Best practice sul posizionamento dello snippet

Per avere un rendimento ottimale, posiziona il tag globale del sito all'inizio della sezione <head> di ogni pagina che vuoi ottimizzare.

Gli unici elementi che dovrebbero apparire sopra il tag globale del sito sono:

  1. Inizializzazione del livello dati. Nota: la variabile dataLayer non deve mai essere riassegnata dopo lo snippet per nascondere la pagina (se utilizzato).
  2. Gli script che dichiarano le variabili e le funzioni JavaScript o che impostano i cookie che vuoi utilizzare nelle esperienze Optimize, ad esempio jQuery o una libreria JavaScript da utilizzare nell'implementazione o nel targeting. Nota: jQuery non è installato da Optimize per impostazione predefinita.
  3. Lo snippet per nascondere la pagina (facoltativo) che può essere utilizzato per evitare lo sfarfallio.

Metodo 2: installare Optimize con Google Tag Manager

Se vuoi implementare Optimize utilizzando Google Tag Manager, segui le istruzioni riportate sotto. Se utilizzi un altro sistema di gestione dei tag, segui le rispettive istruzioni per aggiungere Optimize al tag Google Analytics esistente.

Impostazioni di monitoraggio personalizzate

Gli utenti che hanno definito impostazioni di monitoraggio personalizzate devono utilizzare la variabile Impostazioni di Google Analytics condivisa in Tag Manager e in Analytics per garantire la corrispondenza di tali impostazioni tra i tag.

Passaggio 1: raccogli le informazioni necessarie

Per installare Optimize sono necessarie le seguenti informazioni:

  1. Il tuo ID monitoraggio di Analytics.
  2. Il tuo ID contenitore Optimize.
  3. Conferma che le impostazioni di monitoraggio di Tag Manager e Analytics utilizzino la variabile Impostazioni di Google Analytics condivisa.

Passaggio 2: configura Optimize in Tag Manager

Quando disponi delle informazioni riportate sopra, segui questi passaggi per configurare Optimize in Tag Manager:

  1. Accedi a Tag Manager e seleziona un account.
  2. Fai clic su Tag > Nuovo.
  3. Fai clic su Configurazione tag > Google Optimize.
  4. Inserisci il tuo ID contenitore Optimize.
  5. Seleziona una variabile Impostazioni di Google Analytics.
  6. Salva il tag senza attivatori. Nota: l'attivatore di visualizzazione di pagina deve essere configurato nel tag Analytics che attiverà il tag di Optimize.
  7. Apri il tag di visualizzazione di pagina di Analytics per la proprietà Analytics collegata al contenitore Optimize.
  8. Fai clic su Configurazione tag > Impostazioni avanzate > Sequenza tag.
  9. Seleziona la casella per attivare un tag prima che venga attivato questo tag. Sotto l'intestazione Tag di installazione, fai clic sul menu e seleziona il tag Optimize che vuoi utilizzare.
  10. Configura il tag Optimize in modo che venga attivato una volta per pagina, poi salvalo.
  11. Pubblica il contenitore Tag Manager per rendere effettive le modifiche.

Per saperne di più, consulta la guida per l'impostazione dei tag per Optimize nel Centro assistenza Tag Manager.

Nota
La pagina non verrà nascosta in modo corretto se il tag visualizzazione di pagina di Analytics non utilizza un attivatore di visualizzazione di pagina, perché gli eventi pronti per DOM e sulla finestra caricata impiegano troppo tempo per caricare il contenitore Optimize.

Best practice per l'installazione degli snippet

Per ottenere un rendimento ottimale, posiziona lo snippet Optimize nella parte superiore del tag <HEAD> di ogni pagina web che vuoi ottimizzare.

Gli unici elementi che dovrebbero apparire sopra lo snippet Optimize sono:

  1. I codici di inizializzazione dataLayer. Nota: la variabile dataLayer non deve mai essere riassegnata dopo lo snippet anti-sfarfallio (se utilizzato).
  2. Tutti gli script che dichiarano le variabili o le funzioni JavaScript oppure impostano i cookie che utilizzi in Optimize, ad esempio le librerie jQuery o JavaScript utilizzate nell'implementazione o nel targeting. Nota: jQuery non viene installata da Optimize per impostazione predefinita.
  3. Lo snippet anti-sfarfallio facoltativo, utilizzato per ridurre lo sfarfallio della pagina.

 

Verificare l'installazione di Optimize

Il modo migliore per garantire che l'installazione di Optimize funzioni senza errori è creare una piccola personalizzazione di prova che può essere eliminata in un secondo momento, per poi utilizzare la diagnostica dell'installazione e la modalità di anteprima per verificare che il funzionamento sia corretto.

  • Per verificare l'installazione di Optimize con la diagnostica dell'installazione, fai clic su ESEGUI DIAGNOSTICA nel riquadro delle informazioni dell'esperienza. Un messaggio di diagnostica ti avviserà se vengono rilevati problemi. Ulteriori informazioni sulla diagnostica dell'installazione.
  • La modalità di anteprima consente di verificare che un'esperienza sia corretta prima di avviarla. Ulteriori informazioni sulla modalità di anteprima.
  • Google Tag Assistant è un'estensione facoltativa per Chrome che convalida automaticamente l'implementazione del tag globale del sito (gtag.js) in qualsiasi pagina. Ulteriori informazioni su Tag Assistant.

Risolvere il problema dello sfarfallio della pagina

Le istruzioni riportate in precedenza sono valide per la maggior parte dei siti web. Se noti uno sfarfallio della pagina durante l'esecuzione di Optimize, sposta il tag globale del sito o l'installazione di Tag Manager più in alto nella sezione <head> della pagina. Se lo sfarfallio continua a verificarsi, installa lo snippet anti-sfarfallio e personalizzalo in base alle tue esigenze.

Altre implementazioni

Il tag globale del sito (gtag.js) e Google Tag Manager sono i metodi di tagging consigliati per le nuove implementazioni. Se utilizzi Universal Analytics, consulta questo articolo per installare Optimize sul tuo sito web con analytics.js. Puoi seguire anche le istruzioni per installare Optimize direttamente sulla pagina insieme a Tag Manager.

Nota: Optimize non funziona con la libreria ga.js precedente.

Tecniche di tagging avanzate

Pagine dinamiche e applicazioni web

Puoi scegliere come target le variabili impostate dopo il caricamento dello snippet Optimize, ad esempio con pagine dinamiche o applicazioni web, tramite eventi di attivazione.

Più contenitori Optimize o Tag Manager

Puoi utilizzare più comandi gtag su una singola pagina aggiungendo 'send_page_view': false a tutte le pagine tranne una.

Esempio: più comandi gtag

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>
<script>
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 gtag('js', new Date());


 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_1', 'send_page_view': false});

 gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID_2'});

</script>

 

Nota: sostituisci GA_TRACKING_ID con il tuo ID di monitoraggio di Google Analytics e OPT_CONTAINER_ID_1 e OPT_CONTAINER_ID_2 con gli ID contenitore Optimize.

Se utilizzi lo snippet facoltativo per nascondere la pagina, devi configurarlo in modo che passi tutti i contenitori. Il sito per gli sviluppatori di Optimize contiene ulteriori informazioni sul caricamento di più contenitori.

Nome dataLayer personalizzato

Se vuoi personalizzare il nome dataLayer, devi passare il parametro "l" nello script, nonché modificare la funzione gtag.

Esempio: nome dataLayer personalizzato

<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID&l=myNewName"></script>
<script>
window.myNewName = window.myNewName || [];
function gtag(){myNewName.push(arguments);}
gtag('js', new Date());

gtag('config', 'GA_TRACKING_ID', { 'optimize_id': 'OPT_CONTAINER_ID'});
</script>

 

Nota: sostituisci GA_TRACKING_ID con il tuo ID di monitoraggio di Google Analytics e OPT_CONTAINER_ID con l'ID contenitore Optimize.

Nell'esempio in alto sono evidenziate tre modifiche:

  1. &l=myNewName è stato aggiunto al tag <script>
  2. window.myNewName = window.myNewName || [];
  3. function gtag(){myNewName.push(arguments);}

Se utilizzi lo snippet per nascondere la pagina per ridurre lo sfarfallio, devi modificare il nome dataLayer nell'ultima riga se utilizzi un nome dataLayer personalizzato. Nell'esempio seguente, 'dataLayer' è stato cambiato in 'myNewName'.

Esempio: dataLayer personalizzato con snippet per nascondere la pagina

<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','myNewName',4000,
{'OPT_CONTAINER_ID':true});</script>

Nota: sostituisci OPT_CONTAINER_ID con l'ID contenitore Optimize.

È stato utile?
Come possiamo migliorare l'articolo?
Ricerca
Cancella ricerca
Chiudi ricerca
App Google
Menu principale
Cerca nel Centro assistenza
true
101337
false