Installare Optimize con analytics.js

Per gli utenti di analytics.js che vorrebbero aggiungere Optimize.
Questo articolo contiene informazioni su uno snippet precedente che non è supportato nelle nuove installazioni.
La panoramica dell'installazione di Optimize contiene istruzioni su come installare Optimize sul tuo sito web.

Optimize è una riga di codice che puoi aggiungere al tag analytics.js esistente per mostrare esperienze ai visitatori del tuo sito web. Questo articolo ti guiderà nella procedura di aggiunta di Optimize allo snippet analytics.js esistente sul tuo sito web.

Altri metodi di installazione

Nota: se non hai installato Google Analytics sul tuo sito web, inizia da qui.

  • Se utilizzi lo snippet Optimize (optimize.js), inizia da qui.
  • Se utilizzi Google Tag Manager (GTM), inizia da qui.
  • Se utilizzi il tag globale del sito (gtag.js), inizia da qui.
  • Se utilizzi analytics.js (in precedenza "Universal Analytics" o "UA"), continua a leggere questo articolo.

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. Inoltre, hai bisogno dell'accesso in modifica al codice HTML del sito web per inserire lo snippet Optimize.

PASSAGGIO 1: ottieni il tag analytics.js

Lo trovi nel sistema di gestione dei contenuti (CMS) in cui è ospitato il tuo sito web. In alternativa, puoi utilizzare il comando di visualizzazione del codice sorgente del browser.

Questo è l'aspetto del tag analytics.js:

<!-- Google Analytics -->
<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', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Nota: sostituisci GA_MEASUREMENT_ID con il tuo ID proprietà (o "ID misurazione") di Google Analytics.

L'interfaccia di gestione di Analytics fornisce il codice solo nel formato del tag globale del sito (gtag.js) e non supporta analytics.js.

PASSAGGIO 2: ottieni il tuo ID contenitore Optimize

L'ID contenitore Optimize è una stringa alfanumerica di nove cifre che inizia con "OPT-" o "GTM-" che lo identifica in modo univoco. L'ID contenitore fa parte dello snippet Optimize che viene assegnato quando fai clic su INSTALLA OPTIMIZE. In alternativa, puoi ottenere il tuo ID contenitore Optimize in Configurazione contenitore > Informazioni contenitore. Scopri di più sui contenitori Optimize.

L'ID contenitore Optimize può avere una di queste due forme:

OPT-A1B2CD
GTM-A1B2CD

Nota: nella documentazione, gli ID contenitori vengono denominati "OPT_CONTAINER_ID".

PASSAGGIO 3: crea il tuo snippet Optimize

Per creare il tuo snippet Optimize, sostituisci "OPT_CONTAINER_ID" con il tuo ID contenitore Optimize nella seguente riga di codice:

ga('require', 'OPT_CONTAINER_ID');

PASSAGGIO 4: aggiungi Optimize al tag analytics.js

Copia lo snippet Optimize che hai creato al passaggio 3 e incollalo nel tag analytics.js, subito prima della riga che inizia con ga('create',.

<!-- Google Analytics -->
<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('require', 'OPT_CONTAINER_ID');
ga('create', 'GA_MEASUREMENT_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

Nota: sostituisci OPT_CONTAINER_ID con il tuo ID contenitore Optimize e GA_MEASUREMENT_ID con il tuo ID proprietà (o "ID misurazione") di Google Analytics.

Opzioni di configurazione avanzata

Per impostazione predefinita, il livello dati avviato e a cui fa riferimento Google Tag Manager è denominato dataLayer. Se per il livello dati utilizzi un nome diverso, puoi usarlo in Optimize in due modi:

1. Se carichi Optimize tramite Google Analytics, la sintassi è:

ga('require', 'OPT_CONTAINER_ID', {dataLayer: 'CUSTOM_DATALAYER_NAME'});

Nota: sostituisci OPT_CONTAINER_ID con l'ID contenitore Optimize e CUSTOM_DATALAYER_NAME con il nome dataLayer personalizzato.

2. Se carichi Optimize tramite gtag.js, aggiungi il parametro di ricerca dataLayer alla richiesta gtag:

https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID&l=CUSTOM_DATALAYER_NAME

Nota: sostituisci GA_MEASUREMENT_ID con l'ID proprietà (o "ID misurazione") di Google Analytics e CUSTOM_DATALAYER_NAME con il nome dataLayer personalizzato.

Snippet anti-sfarfallio con nome dataLayer personalizzato

Se segui la procedura descritta nell'articolo sull'installazione dello snippet Optimize (in particolare le best practice per l'installazione), la pagina web dovrebbe caricare Optimize prima delle altre risorse necessarie per visualizzare la pagina. Quando la pagina carica Optimize per primo, non ci sarà nessuno sfarfallio e non è necessario installare lo snippet anti-sfarfallio.

Se noti uno sfarfallio della pagina, innanzitutto segui i passaggi descritti nell'articolo sull'installazione dello snippet Optimize e nella sezione delle best practice, prima di provare altre soluzioni per risolvere il problema. In particolare, devi assicurarti che lo snippet Optimize sia installato il più in alto possibile nell'intestazione (<HEAD>) del sito web. In questo modo, è possibile risolvere la maggior parte dei problemi di sfarfallio.

Se noti uno sfarfallio della pagina nonostante tu abbia seguito la procedura appena descritta, il modo più efficace per risolvere questo problema è nascondere temporaneamente la pagina durante il caricamento del contenitore Optimize. A tal fine, aggiungi lo snippet anti-sfarfallio come primo script della/e pagina/e.

Esempio di codice

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

Nota: sostituisci CUSTOM-DATALAYER-NAME con il tuo nome DataLayer personalizzato e OPT_CONTAINER_ID con il tuo ID contenitore Optimize.

Best practice di tagging

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.

Passaggi successivi

Dopo aver implementato il tag analytics.js modificato nelle pagine web, puoi creare il tuo primo test A/B, di reindirizzamento o MVT.

È stato utile?
Come possiamo migliorare l'articolo?