Passa al contenuto principale

Experiment JavaScript & Experiment CSS

Ultimo aggiornamento il 23 ott 20262 min di lettura
Indice

In breve​

Con Experiment JavaScript ed Experiment CSS puoi distribuire codice JavaScript e CSS su tutte le varianti di un esperimento, inclusa l'originale. Il codice dell'esperimento viene sempre eseguito prima del codice delle singole varianti.

Questo è utile ogni volta che il codice deve essere eseguito in modo identico per ogni visitatore nell'esperimento, ad esempio per caricare uno script di tracciamento su tutte le varianti. Il codice dell'esperimento è pensato per utenti esperti con esperienza di programmazione.

Dashboard di Varify con il menu a tre puntini di un esperimento aperto, che mostra la sezione „Codice applicato a tutte le varianti“ con le voci Add Experiment JavaScript, Add Experiment CSS e Add Reset JavaScript

Dove trovare Experiment JS ed Experiment CSS​

Puoi trovare entrambe le funzioni nella panoramica degli esperimenti del tuo dashboard:

  1. Fai clic sul menu a tre puntini in alto a destra dell'esperimento.
  2. In Code applied for all variations, seleziona Add Experiment JavaScript oppure Add Experiment CSS.
  3. Inserisci il tuo codice e salvalo.

Il badge accanto a ciascuna voce mostra se è già stato aggiunto del codice.

Come funziona il codice dell'esperimento​

  • Distribuito a ogni variante: il codice dell'esperimento viene applicato a tutte le varianti dell'esperimento e all'originale.
  • Eseguito per primo: il codice dell'esperimento viene sempre eseguito prima del codice della variante. Il codice o gli stili che aggiungi all'interno di una variante possono quindi basarsi su ciò che il codice dell'esperimento ha già impostato.
  • Stesso codice, stesso risultato per tutti: poiché il codice viene distribuito a tutte le varianti, non crea alcuna differenza tra loro. Usalo per le cose che devono applicarsi a tutti, e usa il codice della variante (vedi Add JavaScript e Add CSS) per le modifiche che vuoi testare.

Esempi di applicazione​

Eseguire uno script di tracciamento su tutte le varianti​

Un caso d'uso tipico per Experiment JavaScript è uno script di tracciamento che deve essere aggiunto a ogni variante. Invece di copiare lo script in ogni variante, lo aggiungi una sola volta come Experiment JavaScript.

// Runs on the original and on all variations
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: 'experiment_loaded',
});

Condividi gli stili tra tutte le varianti​

Con Experiment CSS puoi definire stili necessari in ogni variante, ad esempio per un elemento che aggiungi tramite JavaScript.

.promo-note {
  font-size: 14px;
  color: #333;
}

Utilizzo delle funzioni helper​

Le funzioni helper di Varify funzionano anche in Experiment JavaScript. Puoi usarle, ad esempio, per attendere elementi nel DOM o per impedire l'esecuzione del codice nell'editor. Trovi tutte le funzioni disponibili e degli esempi nell'articolo Code Helpers.

window.varify.helpers.waitFor('.product', (element) => {
  // Runs as soon as the element is available in the DOM
});

Aggiungi JavaScript Reset​

Nello stesso menu trovi anche Add Reset JavaScript. Rimuove il codice che hai aggiunto, il che è particolarmente utile per le Single Page Applications. Trovi maggiori informazioni nell'articolo Add JavaScript Reset.

Su questa pagina