Come funziona il tempo di esecuzione di Optimize

Scopri cosa accade nel browser del visitatore e in che modo vengono applicate le modifiche.

Il tempo di esecuzione di Optimize prevede tre passaggi che si verificano ogni volta che un visitatore accede al tuo sito e che sono illustrati di seguito.

Contenuti di questo articolo:

Download sincrono e asincrono

Sebbene l'installazione sincrona sia più semplice e garantisca il massimo rendimento per le tue esperienze, Optimize può funzionare anche in modo asincrono, il che è un'ottima notizia, poiché non influisce sul regolare funzionamento del tuo sito. Il contenitore Optimize viene scaricato in parallelo con altri script e risorse della pagina senza bloccarli: gli script che sono stati scaricati per primi possono essere eseguiti senza alcun ritardo.

Tuttavia, devi tenere presente che in genere Optimize modifica i contenuti della pagina, ha quindi un'importanza prioritaria.

Per questo consigliamo di posizionare l'installazione di Optimize nella parte superiore dell'elemento <HEAD> affinché possa essere eseguita il prima possibile, senza subire arresti a causa di altri script e librerie della pagina.

Il posizionamento errato di Optimize potrebbe causare uno sfarfallio, un periodo di occultamento più lungo e timeout del contenitore (se utilizzi lo snippet anti-sfarfallio).

Snippet anti-sfarfallio

Un problema comune che si verifica quando si modifica con codice JavaScript una pagina HTML è lo sfarfallio: i visitatori possono visualizzare temporaneamente la versione originale della pagina prima che venga modificata.

Con uno strumento come Optimize, ciò potrebbe causare confusione nei visitatori, i quali potrebbero persino rendersi conto di essere parte di un esperimento, con effetti sul tuo sito e sui risultati dell'esperimento. Per questo Optimize è dotato di una serie di diversi meccanismi per garantire che ciò non avvenga.

Un primo livello di difesa per questo obiettivo è lo snippet anti-sfarfallio, necessario a causa della natura asincrona di Optimize.

Mentre uno script sincrono blocca il browser che analizza e mostra la pagina (arrivando fino a interrompere il caricamento del sito), uno script asincrono può essere eseguito in qualsiasi momento, anche dopo la visualizzazione della pagina e non può essere dannoso (ad esempio, impedire il caricamento del sito); tuttavia, uno scriptasincrono può provocare uno sfarfallio.

Lo snippet anti-sfarfallio nasconde temporaneamente la pagina web finché il contenitore Optimize non abbia tempo a sufficienza per essere scaricato. Non ci sono picchi di rendimento sulla pagina web tipica con lo snippet anti-sfarfallio installato correttamente perché il contenitore Optimize viene scaricato in parallelo con altri script e risorse della pagina che potrebbero impedirne il rendering.

Lo snippet non è l'unico meccanismo utilizzato da Optimize per evitare lo sfarfallio, in quanto in genere termina prima che la pagina sia effettivamente resa disponibile dal browser, in modo da poter essere modificata da Optimize.

Nota: il timeout anti-sfarfallio non indica un overhead che Optimize aggiunge alla tua pagina; è solo la peggiore delle ipotesi. Inoltre, il valore di timeout consigliato non è correlato al rendimento del tuo sito o di Optimize, ma principalmente alla velocità della rete dei visitatori (ad esempio, in caso di cattiva ricezione del segnale ecc.).

Se il contenitore Optimize (insieme ad altre risorse della pagina) non è stato scaricato ed eseguito sul dispositivo del visitatore prima del raggiungimento del valore di timeout, l'occultamento della pagina termina e viene abbandonato ogni esperimento di Optimize applicabile in seguito, mentre la visita viene esclusa dal traffico dell'esperimento.

Una volta scaricato il contenitore Optimize, l'occultamento della pagina globale termina, il contenitore valuta le regole dell'esperimento e si assicura che solo gli elementi coinvolti nelle varianti selezionate rimangano nascosti. Ciò può verificarsi anche se tali elementi non sono ancora presenti nella pagina.

Page-hiding-snippet-flow-diagram

Valutazione delle regole di targeting

Una volta scaricato il contenitore Optimize, questo valuterà le regole di targeting degli esperimenti configurati per l'attivazione con l'opzione di caricamento della pagina predefinita. Gli esperimenti per cui è configurata un'attivazione non predefinita attenderanno i loro rispettivi eventi di attivazione.

Nota: la pagina del modello dell'esperimento che puoi utilizzare per avviare l'editor di Optimize non è pertinente per il targeting, anche se inizialmente viene assegnata come regola predefinita di targeting. Per vedere esattamente quali regole si applicano a un esperimento, devi controllare la scheda Targeting nella pagina dei dettagli dell'esperimento.

Un visitatore verrà assegnato a una variante la prima volta che visita una pagina dopo l'inizio dell'esperimento (non deve però essere la sua prima visita su quella pagina). L'assegnazione è casuale, in base all'ID cliente Google Analytics e seguendo le ponderazioni delle varianti. Il visitatore rimarrà nella variante assegnata fino alla fine dell'esperimento, mentre le azioni che si verificano in un momento successivo (ossia gli obiettivi) vengono attribuite a tale variante.

La variante dell'assegnazione viene memorizzata in un cookie originale dedicato (_gaexp) e verrà utilizzata per le visite future dello stesso visitatore, in modo da garantire un'esperienza coerente. Ciò non significa che il visitatore visualizzerà necessariamente la variante nelle visite successive; ogni volta che le regole vengono rivalutate e corrispondono, l'utente vedrà la stessa variante. Tieni però presente che le conversioni su quella o su altre pagine verranno attribuite a tale variante indipendentemente dalle regole.

Se un visitatore viene esposto a più esperimenti in esecuzione (su qualsiasi pagina), tali assegnazioni vengono concatenate sullo stesso cookie. A causa delle limitazioni del browser relative alle dimensioni dei cookie, è possibile specificare un numero massimo di esperimenti simultanei a cui un utente può essere assegnato. Quando il cookie di un visitatore supera tale limite, viene escluso dal traffico degli esperimenti e non verranno mostrate varianti di esperimenti aggiuntivi. Una volta terminato un esperimento, le assegnazioni delle varianti vengono ripulite e il visitatore può essere associato ad altri esperimenti.

Una volta che un visitatore è stato assegnato a un esperimento, il tempo di esecuzione garantisce che le informazioni sulle varianti necessarie vengano monitorate da Google Analytics. Per gli esperimenti attivati con la configurazione predefinita "caricamento pagina" (e non con l'attivazione personalizzata), l'assegnazione della variante avviene prima dell'hit della visualizzazione di pagina di Google Analytics e del monitoraggio dell'esperimento che utilizza tale hit. In altri casi (o se non hai seguito l'installazione di Optimize consigliata) sarà disponibile un ulteriore hit di dati di Google Analytics per garantire il monitoraggio dell'esperimento.

La modifica delle ponderazioni dell'esperimento non comporta l'assegnazione di visitatori. Anche se imposti una ponderazione della variante su zero, potrebbe esserci ancora traffico sulle varianti per quei visitatori che sono stati assegnati prima della modifica della ponderazione.

Gli esperimenti sono indipendenti gli uni dagli altri. Una singola visita può partecipare a più esperimenti ed è necessario evitare effetti collaterali. Benché sia perfettamente possibile eseguire più esperimenti sulla stessa pagina, questi dovrebbero essere effettuati su diverse aree della pagina evitando l'introduzione di bias, ad esempio quando la variante di un esperimento promuove la variante di un altro esperimento.

Nota: le varianti di Optimize vengono applicate nel miglior modo possibile. Se alcuni selettori CSS delle varianti non esistono o se le modifiche JavaScript presentano eccezioni, la visita verrà comunque misurata come parte della variante dell'esperimento.

Infine, alcune regole di targeting potrebbero essere valutate dal lato server, con la conseguente totale eliminazione dell'esperimento dal contenitore scaricato.

Targeting rule evaluation flow diagram

Applicazione delle varianti scelte A/B e MVT (test multivariato)

Una volta che il contenitore ha scelto le varianti, cercherà di applicarle. Una variante è definita come un elenco di operazioni di modifica mostrate nell'editor di Optimize e generalmente applicate in ordine (esistono alcune ottimizzazioni quando non sono presenti conflitti).

Ogni modifica ha come target un selettore CSS che potrebbe corrispondere a uno o più elementi. Optimize sa se una modifica ha come target più elementi, poiché questo viene rilevato dall'editor.

Spesso l'elemento di una modifica non sarà disponibile nella pagina al momento dell'esecuzione di Optimize. In tal caso, Optimize si assicurerà che rimanga nascosto quando sarà disponibile, aggiungendo una regola CSS necessaria e mettendo in pausa l'esecuzione dell'elenco di modifiche.

Non appena l'elemento target diventa disponibile, Optimize applicherà la modifica, rimuoverà la regola CSS nascosta e tenterà di applicare la seguente modifica all'elenco nello stesso modo.

Una volta che il browser ha modificato lo stato della pagina su "pronto" dopo l'evento DOMContentElement, Optimize farà un ultimo tentativo possibile per applicare tutte le modifiche rimanenti. Se non viene trovato l'elemento di una modifica in quel momento, Optimize lo ignorerà e proseguirà oltre.

Nota: le modifiche allo stile vengono generalmente implementate con regole CSS, pertanto non devono essere sottoposte al processo sopra menzionato. Vengono invece applicate immediatamente non appena viene caricato Optimize e non è necessario occultarle ulteriormente.

Anche le modifiche JavaScript hanno un selettore CSS target e vengono eseguite una volta che l'elemento di questo selettore è reso disponibile dal browser.

L'implementazione di un'intera variante con una singola modifica JavaScript (ad esempio l'utilizzo di jQuery) su <BODY> non è consigliata in Optimize poiché il codice potrebbe essere eseguito dopo il momento previsto. Prova a limitare il selettore target di un JavaScript agli elementi che vuoi modificare o al più piccolo elemento contenitore principale possibile.

Infine, una modifica potrebbe avere un selettore CSS che ha come target più elementi che potrebbero apparire su una pagina in momenti diversi (l'editor di Optimize supporta la selezione di più elementi facendo clic con il tasto Maiusc). Optimize li modificherà quando vengono visualizzati, ma al termine della procedura li occulterà tutti.

Application of variants flow diagram

Se utilizzi eventi personalizzati per attivare l'esperimento, le regole di targeting non vengono valutate una volta al caricamento della pagina, ma ogni volta che invii un evento di attivazione. La prima volta che le regole vengono abbinate, il visitatore viene assegnato a una variante, viene inviato un hit di Google Analytics (in genere un hit di dati) per garantire il monitoraggio dell'esperimento e vengono applicate le modifiche della variante.

A differenza del caso dell'attivazione predefinita "caricamento pagina", tuttavia, questa non sarà la fine del tempo di esecuzione. In genere, è necessario inviare più eventi di attivazione ogni volta che si verifica una modifica significativa dello stato della pagina, ad esempio URL o albero DOM. In questi casi ci sono due possibilità:

  • La corrispondenza delle regole di targeting è ancora valida e la variante viene "riattivata": il tempo di esecuzione esegue nuovamente le modifiche della variante ma le applica solo ai nuovi elementi che non erano disponibili nella precedente esecuzione.

  • La corrispondenza delle regole di targeting non è più valida e la variante viene "disattivata": le modifiche vengono ripristinate e agli elementi viene riassegnato lo stato precedente all'applicazione delle modifiche. Per ogni evento, tutte le disattivazioni avvengono prima delle attivazioni, in modo che la pagina ritorni allo stato originale per poter applicare correttamente il nuovo esperimento. Tieni presente che non è possibile ripristinare automaticamente le modifiche JavaScript.

Risorse correlate

È stato utile?
Come possiamo migliorare l'articolo?