Installare lo snippet anti-sfarfallio

Se noti uno sfarfallio della pagina, aggiungi questo snippet per provare a risolvere il problema.

Introduzione

Se segui le indicazioni riportate nei nostri articoli sull'installazione dello snippet e le best practice per il posizionamento dello snippet (di seguito), la tua pagina web dovrebbe caricare Optimize prima delle altre risorse necessarie per visualizzare la pagina. Quando la pagina carica Optimize per la prima volta, non compare alcuno sfarfallio e non è necessario installare lo snippet che previene questo problema.

Lo sfarfallio della pagina si verifica quando una pagina web viene visualizzata brevemente con gli stili predefiniti del browser prima del caricamento di un foglio di stile CSS esterno che aggiorna la visualizzazione della pagina, causando al suo interno il "salto" temporaneo degli elementi con il nuovo stile.

Il modo più efficace per ridurre lo sfarfallio della pagina quando viene caricato Optimize è nascondere temporaneamente la pagina durante il caricamento del contenitore Optimize. A tal fine, aggiungi lo snippet anti-sfarfallio come primo script della pagina o delle pagine.

Se noti uno sfarfallio della pagina, verifica di aver seguito tutti i passaggi indicati negli articoli sull'installazione degli snippet (e le best practice) prima di provare altre soluzioni per risolvere il problema.

In particolare, assicurati che lo snippet Optimize sia installato il più in alto possibile nella sezione <HEAD> del codice HTML del sito web. L'inserimento dello snippet all'inizio della sezione <HEAD> consente di risolvere la maggior parte dei problemi di sfarfallio.

Destinatari

Questo articolo è rivolto ai clienti che hanno notato uno sfarfallio nelle pagine di Optimize.

Non installare lo snippet anti-sfarfallio:

  • …se lo snippet Optimize non è installato nella parte superiore della sezione <HEAD>.
  • …se non hai notato uno sfarfallio della pagina.
  • …se utilizzi eventi di attivazione che non attivano le modifiche al primo caricamento.
  • …con un sistema di gestione tag (TMS) come Google Tag Manager (GTM).

Snippet anti-sfarfallio con un sistema di gestione tag

Non installare lo snippet anti-sfarfallio con un sistema di gestione tag (TMS) come Google Tag Manager (GTM).
Lo snippet anti-sfarfallio deve essere installato solo in linea, direttamente nella pagina web e mai con un sistema di gestione tag (TMS) o un altro script asincrono. Se non riesci a installare lo snippet anti-sfarfallio in linea, ti consigliamo di saltare l'operazione.

Ridurre lo sfarfallio della pagina

Se noti uno sfarfallio della pagina nonostante tu abbia seguito la procedura descritta in precedenza, il modo più efficace per ridurre questo inconveniente quando viene caricato Optimize è nascondere la pagina durante il caricamento del contenitore Optimize. A tal fine, aggiungi lo snippet anti-sfarfallio come primo script della pagina o delle pagine.

Come funziona

Optimize mostra varianti ai visitatori del tuo sito web modificando il DOM (Document Object Model, Modello dell'oggetto del documento). In alcuni casi, le modifiche vengono apportate a elementi già visibili agli utenti finali. Queste modifiche visibili sono indicate da uno sfarfallio della pagina.

Lo sfarfallio della pagina si verifica quando una pagina web viene visualizzata brevemente con gli stili predefiniti del browser prima del caricamento di un foglio di stile CSS esterno che aggiorna la visualizzazione della pagina, causando al suo interno il "salto" temporaneo degli elementi con il nuovo stile.

Implementare lo snippet anti-sfarfallio

Per installare lo snippet anti-sfarfallio:

  1. Copia per intero il codice indicato di seguito e aggiungilo a ogni pagina che utilizza Optimize il più in alto possibile nella sezione <HEAD>, ma dopo eventuali dichiarazioni dataLayer.
  2. Assicurati che lo snippet Optimize o il contenitore Tag Manager sia posizionato subito dopo lo snippet anti-sfarfallio.

Esempio: snippet anti-sfarfallio

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

Nota: sostituisci CONTAINER_ID con l'ID contenitore Optimize. Se utilizzi Google Tag Manager per il deployment di Optimize, sostituisci CONTAINER_ID con l'ID contenitore Tag Manager.

Devi inizializzare dataLayer sopra lo snippet anti-sfarfallio, altrimenti il rendimento del sito verrà compromesso. Non eseguire l'override del livello dati in un secondo momento nella pagina.

Best practice sul posizionamento dello 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.

Personalizzare lo snippet anti-sfarfallio

Lo snippet anti-sfarfallio include una funzionalità di timeout impostabile che interrompe i tentativi di applicare le modifiche all'esperimento se trascorre molto tempo. Al termine del timeout, viene mostrata la pagina e l'utente non visualizza la nuova esperienza, ma solo il contenuto predefinito.

Scopri di più sulla personalizzazione dello snippet anti-sfarfallio.

Utenti di Tag manager

Nota: se utilizzi Google Tag Manager per implementare Optimize, popola lo snippet anti-sfarfallio con il tuo ID contenitore Tag Manager, non con l'ID contenitore Optimize.

L'aggiunta del tag Optimize al contenitore Tag Manager previene lo sfarfallio della pagina fino al caricamento di Optimize, ma la pagina non subirà variazioni se decidi di disattivare il tag in un secondo momento.

Scopri di più su come installare Optimize con Google Tag Manager.

Verifica dei nomi

Lo sfarfallio della pagina è noto anche come sfarfallio JavaScript, sfarfallio DOM, FOUC (Flash of Unstyled Content) e FOUT (Flash of Unstyled Text). Lo snippet per nascondere la pagina era noto in precedenza come snippet anti-sfarfallio.

È stato utile?
Come possiamo migliorare l'articolo?