L'API Optimize JavaScript consente di utilizzare il codice JavaScript per apportare modifiche alle varianti utilizzando le funzioni di callback. Puoi anche scegliere di combinare queste modifiche al codice con quelle apportate utilizzando l'editor visivo di Optimize. Ciò può essere particolarmente utile quando devi sviluppare codice che esegue azioni aggiuntive esattamente nel momento in cui vengono applicate le modifiche. L'API può essere molto utile anche per il debug in generale.
Contenuti di questo articolo:Registrazione dei callback di implementazione
Con l'API client di Optimize, puoi specificare la tua implementazione dell'esperimento in base al codice JavaScript fornito dal tuo sito web ed evitare completamente di utilizzare l'editor di Optimize. Tuttavia, tieni presente che dovrai implementare un meccanismo personalizzato per impedire lo sfarfallio, poiché il tuo codice JavaScript potrebbe essere richiamato dopo che la pagina sarà diventata visibile a un visitatore.
In primo luogo, è importante considerare che Optimize viene caricato in modo asincrono. Ciò significa che non è possibile verificare l'inserimento di un esperimento basato su codice sincrono. Anche se apparentemente non si verificano problemi, l'ordine di esecuzione non è garantito.
Devi invece fornire la tua implementazione come callback:
// Da utilizzare negli script inseriti dopo l'installazione di Optimize o GTM
// o dopo l'inizializzazione della variabile dataLayer.
// Non richiesto se viene utilizzata l'implementazione Google Analytics gtag.
function gtag() {dataLayer.push(arguments)}
function implementExperimentA(value) {
if (value == '0') {
// Fornisci il codice per i visitatori nell'originale.
} else if (value == '1') {
// Fornisci il codice per i visitatori nella prima variante.
} else if (value == '2') {
// Fornisci il codice per i visitatori nella variante di sezione.
}
...
}
gtag('event', 'optimize.callback', {
name: '<experiment_id_A>',
callback: implementExperimentA
});
Puoi registrare un callback dell'implementazione per un esperimento con un identificatore specifico, disponibile nella pagina dei dettagli dell'esperimento.
In secondo luogo, è importante considerare che il callback può essere richiamato prima che diventi disponibile l'intero albero DOM. Pertanto, se devi modificare gli elementi della pagina, potresti dover verificare lo stato della pagina e registrare la tua implementazione in modo che venga eseguita in un secondo momento, come gestore di eventi dell'evento DOMContentLoaded, oppure utilizzare un elemento simile a jQuery.ready se la pagina contiene jQuery. Ad esempio:
function implementExperimentA(value) {
...
else if (value == '2') {
// Presupponendo che tu abbia jQuery sulla tua pagina.
$( document ).ready(function() {
$('#my_element').text('Hello from variant 2');
})
}
...
}
Esperimenti MVT (test multivariato)
Per gli esperimenti MVT (test multivariato), il valore fornito dall'esperimento include gli indici di tutte le varianti di sezione, separate da un trattino ("-").
function implementExperimentA(value) {
var sections = value.split("-");
if (sections[0] == '0') {
// Fornisci il codice della prima sezione per i visitatori nell'originale.
} else if (sections[0] == '1') {
// Fornisci il codice della prima sezione per i visitatori nella prima variante.
}
...
if (sections[1] == '0') {Fornisci il codice della seconda sezione per i visitatori nell'originale.
} else if (sections[1] == '1') {
// Fornisci il codice della seconda sezione per i visitatori nella prima variante.
}
}
Gestione di più esperimenti
Puoi inoltre fornire un singolo callback che implementi più esperimenti:
function implementManyExperiments(value, name) {
if (name == '<experiment_id_A>') {
// Fornisci l'implementazione per l'esperimento A
if (value == '0') {
// Fornisci il codice ai visitatori nell'originale.
} else if (value == '1') {
// Fornisci il codice per i visitatori nella prima variante.
...
} else if (name == '<experiment_id_B>') {
// Fornisci l'implementazione dell'esperimento B
...
}
gtag('event', 'optimize.callback', {
callback: implementManyExperiments
});
Debug delle risorse
L'API Optimize JavaScript ti consente anche di accedere alla variabile globale google_optimize, che ha un metodo "get" e può essere utile negli scenari di debug. Ad esempio, puoi verificare se un esperimento è attivo per una determinata visita di pagina anche se:
- Le modifiche non sono visibili, ad esempio vengono applicate nei contenuti attualmente nascosti.
- Si sono verificati problemi, ad esempio gli elementi scelti come target non esistono più nella pagina.
- Non sono presenti modifiche in alcune varianti.
- Il visitatore è stato assegnato alla variante originale.
Per eseguire il debug di un esperimento, recupera l'ID esperimento dalla pagina dei dettagli dell'esperimento di Optimize. Controlla poi la variante assegnata all'esperimento inserendo quanto segue in Chrome DevTools > Console:
console.log(google_optimize && google_optimize.get('<experiment_id_A>'));
google_optimize potrebbe non essere definito.Se il risultato della console DevTools è undefined, l'esperimento non è attivo nella pagina. I possibili motivi sono:
- Le regole di targeting non corrispondono.
- Al visitatore non è stata assegnata una ponderazione delle varianti.
- Il visitatore è stato escluso a causa delle condizioni del browser (ad es. ha disattivato le attività sul sito di Google Analytics).
- Se è installato lo snippet per nascondere la pagina: la velocità della rete del visitatore è inferiore al timeout di async-hide. Scopri di più.
- L'editor visivo è aperto in un'altra scheda del browser. Gli esperimenti non verranno eseguiti in modalità di modifica. Scopri di più.
- Stai visualizzando l'anteprima della variante di un altro esperimento. È possibile eseguire un solo esperimento in modalità di anteprima.
- L'esperimento sta utilizzando l'attivazione personalizzata e non è stato ancora attivato.
- L'esperimento sta utilizzando l'attivazione personalizzata ed è stato attivato, ma successivamente disattivato (le regole di targeting non corrispondono più).
Se il risultato della console DevTools è:
- 0: l'esperimento è stato eseguito, è attivo e il visitatore è stato assegnato alla variante 0 (originale).
- 1: l'esperimento è stato eseguito, è attivo e il visitatore è stato assegnato alla variante 1.
- 2: l'esperimento è stato eseguito, è attivo e il visitatore è stato assegnato alla variante 2,
- e così via.
Puoi visualizzare tutti gli esperimenti attualmente attivi digitando quanto segue in DevTools > Console:
gtag('event', 'optimize.callback', {
callback: (value, name) => console.log(
'Experiment with ID: ' + name + ' is on variant: ' + value)
});
Inizializzazione ritardata della pagina
In alcuni casi, per utilizzare un valore dell'esperimento, potresti dover ritardare una funzionalità fondamentale che viene eseguita durante l'inizializzazione della pagina. Supponiamo, ad esempio, che siano presenti richieste Ajax che caricano dati aggiuntivi e che per queste richieste tu voglia utilizzare percorsi di URL diversi per varianti differenti.
In questi casi, è consigliabile utilizzare lo snippet per nascondere la pagina per accertarti che questa funzionalità fondamentale includa il ritardo massimo consentito, in base al timeout per nascondere la pagina, e che venga richiamata in qualsiasi situazione. Inoltre, dovrai verificare che questa funzionalità venga inizializzata per gli utenti che non partecipano all'esperimento, ad esempio se non corrispondono alle regole di targeting o se non stai includendo tutto il traffico nell'esperimento.
A tale scopo, nella pagina puoi includere lo snippet per nasconderla ed eseguire l'override del callback che termina questa operazione.
function delayedInitialization() {
var value = google_optimize &&
google_optimize.get('<experiment_id_A>');
if (value == '0') {
// Fornisci il codice per i visitatori nell'originale.
} else if (value == '1') {
// Fornisci il codice per i visitatori nella prima variante.
...
} else if (value == undefined) {
// Fornisci il codice per i visitatori non inclusi nell'esperimento
}
}
var hideEnd = dataLayer.hide.end;
if (hideEnd) {
dataLayer.hide.end = function() {
delayedInitialization();
hideEnd();
}
} else {
delayedInitialization();
}
<STYLE> dallo snippet per nascondere la pagina. Per ulteriori informazioni, consulta il sito per sviluppatori di Optimize.Come puoi notare sopra, esiste una variabile di finestra globale denominata google_optimize che può essere utilizzata per recuperare i valori dell'esperimento. Tieni presente che, sebbene sia possibile provare a utilizzarla direttamente nel codice, tale variabile verrà definita solo dopo il caricamento del contenitore Optimize e, pertanto, non può essere utilizzata negli script sincroni.
Ovviamente, non è possibile definire la variabile google_optimize se il caricamento del contenitore Optimize non riesce per un motivo qualsiasi, ad esempio per problemi di rete. Inoltre, tieni presente che il codice sopra indicato restituirà valori non definiti per gli esperimenti con attivazione personalizzata, poiché questi ultimi vengono in genere attivati e forniscono valori in un secondo momento.
Eventi di attivazione
Se utilizzi gli eventi di attivazione per l'esperimento, devi tenere presente che i callback possono essere richiamati più volte, in particolare ogni volta che viene riattivata o disattivata una variante. Quando una variante è disattivata, il valore dell'esperimento sarà undefined (non definito).
function implementExperimentA(value) {
if (value == '0') {
// L'esperimento originale è stato attivato o riattivato
// (può essere richiamato più volte).
} else if (value == '1') {
// La prima variante è stata attivata o riattivata
// (può essere richiamata più volte).
...
} else if (value == undefined) {
// L'esperimento è stato disattivato
// (può essere richiamato più volte).
}
Come previsto, il callback verrà richiamato più volte con lo stesso valore (al momento della riattivazione) o con il valore undefined.
value -> 1 1 1 undefined 1 undefined 1 1 ...
Annullamento della registrazione dei callback
Talvolta, potresti voler interrompere il richiamo dei callback e annullarne la registrazione per evitare che vengano gestiti i valori dell'esperimento. Questa situazione si verifica quando sono presenti esperimenti che utilizzano eventi di attivazione e la tua app di un'unica pagina o di più pagine sta passando a un nuovo stato non previsto e non è in grado di gestire il valore dell'esperimento.
Annulla la registrazione ed esegui la pulizia dei callback, come indicato di seguito:
gtag('event', 'optimize.callback', {
name: '<experiment_id_A>',
callback: implementExperimentA,
remove: true
});
Quando utilizzi più callback, annullane la registrazione ed eseguine la pulizia come indicato di seguito:
gtag('event', 'optimize.callback', {
callback: implementManyExperiments,
remove: true
});
Risorse correlate
- Utilizzare lo snippet anti-sfarfallio di Optimize: sito per sviluppatori di Optimize
- Esperimenti lato server: sito per sviluppatori di Optimize
- Esperimenti AMP: sito per sviluppatori di Optimize