Eventi di attivazione

Esegui esperienze di Optimize su siti web dinamici e app a pagina singola.

Per impostazione predefinita, Optimize modifica i contenuti di una pagina web solo durante il suo caricamento iniziale. Tuttavia, i siti web dinamici (creati con strumenti come AMP, React, Angular ecc.) e le app a pagina singola (APS) normalmente caricano i contenuti molto tempo dopo il caricamento pagina iniziale. Optimize supporta la modifica di questi contenuti web visualizzati in ritardo tramite gli eventi di attivazione.

Per attivare la tua esperienza di Optimize utilizzando un evento di attivazione, fai clic su Caricamento pagina [Modifica] e scegli In caso di evento personalizzato o Continuamente nell'elenco.

Pulsante Evento di attivazione

Tipi di eventi di attivazione

Optimize offre vari tipi di eventi di attivazione:

  • Al caricamento della pagina: per impostazione predefinita, le esperienze di Optimize sono attivate al momento del caricamento della pagina (funzionalità utile per la maggior parte dei siti web statici).
  • Continuamente: applica le modifiche preferite a tutti i nuovi elementi corrispondenti.
  • In caso di evento personalizzato: un evento personalizzato che viene eseguito una volta per ogni evento livello dati.

Suggerimenti per gli eventi di attivazione

Indipendentemente dalla selezione dell'opzione In caso di evento personalizzato o Continuamente, affinché l'esperienza di Optimize si attivi, tutte le regole di targeting per pubblico e di pagina devono essere soddisfatte.

Opzione 1: attivazione continua

L'attivazione continua è consigliata per la maggior parte dei siti dinamici.

Se selezioni Evento di attivazione > Continuamente, Optimize applica automaticamente l'elenco delle modifiche ogni volta possibile, ad esempio appena rileva qualsiasi nuovo elemento corrispondente.

Optimize monitora continuamente una pagina per rilevare eventuali contenuti aggiunti dal momento del caricamento pagina iniziale utilizzando l'API MutationObserver integrata nei browser web moderni. Quando rileva modifiche, Optimize esegue una nuova scansione della pagina e applica l'elenco delle modifiche a tutti gli elementi corrispondenti appena rilevati.

Suggerimento
 
Optimize modifica solo le istanze di un elemento appena rilevate. Ad esempio, è possibile fare in modo che Optimize delinei in rosso il pulsante "acquista" dei prodotti ogni volta che class="vendita". Quando un visitatore scorre la pagina, vengono visualizzati altri prodotti e i rispettivi pulsanti di acquisto. Optimize modificherà solo questi nuovi pulsanti e non ogni singolo pulsante caricato sulla pagina. Dopo che Optimize ha effettuato la prima modifica, tale istanza dell'elemento è considerata completa e non verrà più modificata. Se vuoi modificare la stessa istanza di un elemento più di una volta, utilizza l'attivazione personalizzata.

Configurare l'attivazione continua

Per utilizzare l'attivazione continua con l'esperienza di Optimize:

  1. Crea l'esperienza (test A/B, multivariato, di reindirizzamento o personalizzazione).
  2. Vai a Impostazioni > Evento di attivazione nella pagina dei dettagli dell'esperienza.
  3. Fai clic su   Caricamento pagina [Modifica].
  4. Seleziona Valuta > Continuamente nel menu a discesa.
  5. Fai clic su Fine.

Screenshot di Evento di attivazione di Optimize

Nota: affinché l'esperienza di Optimize si attivi, tutte le regole di targeting per pubblico e di pagina devono restituire true.

Disattivazione automatica

Se le regole di targeting per pubblico o di pagina dell'esperienza non corrispondono, Optimize annulla automaticamente le modifiche precedentemente applicate all'esperienza.

Nota: le modifiche JavaScript non possono essere automaticamente annullate, a meno che non implementi un callback di disattivazione e lo specifichi come valore restituito.

Opzione 2: evento personalizzato

Gli eventi personalizzati consentono un controllo granulare sull'esperienza di Optimize, in quanto ti permettono di attivare un evento nel momento preciso in cui la pagina è pronta. Se assegni all'evento personalizzato un nome unico, l'evento livello dati può essere implementato a livello di sito per attivare un'esperienza di Optimize.

Per utilizzare un evento personalizzato, attiva un evento livello dati che induca Optimize ad applicare un elenco delle modifiche a tutti gli elementi corrispondenti appena rilevati. Un evento personalizzato viene eseguito solo una volta per ogni evento livello dati; se vuoi che un evento venga eseguito di continuo, utilizza l'opzione Continuamente.

Per attivare un'esperienza di Optimize utilizzando un evento personalizzato:

  1. Crea un evento personalizzato dal livello dati del tuo sito web.
  2. Crea una nuova variabile livello dati.
  3. Attiva l'evento con JavaScript.

Creare un evento personalizzato

Come prima cosa crea un evento personalizzato dal livello dati del tuo sito web:

  1. Accanto a Evento di attivazione, fai clic su Caricamento pagina [Modifica].
  2. Seleziona Valuta > In caso di evento personalizzato nel menu a discesa.
  3. Inserisci un Nome evento (ad es. optimize.activate) dal livello dati.
  4. Fai clic su Fine.

Dopo aver creato l'evento personalizzato, imposta le regole di targeting per pubblico e/o di pagina in Optimize come faresti normalmente e stabilisci se sono richieste la riattivazione e/o la disattivazione.

Creare una nuova variabile livello dati

Dopo aver creato un evento di attivazione, devi creare una variabile livello dati.

  1. Fai clic su Variabile di livello dati > Crea nuova.
  2. Inserisci il nome della variabile livello dati da cui leggere.
  3. Assegna un nome alla variabile.
  4. Fai clic su Crea variabile.

Creare una nuova variabile livello dati in Optimize

Attivare l'evento con JavaScript

Dopo aver completato i passaggi riportati sopra, devi attivare un evento livello dati utilizzando il nome inserito sopra per attivare l'esperienza di Optimize. Quando la pagina web target si carica allo stato preferito, attiva l'esperienza di Optimize con il seguente JavaScript:

dataLayer.push({'event': 'optimize.activate'});

Una volta attivato l'evento optimize.activate, qualsiasi condizione di targeting aggiuntiva verrà valutata e l'esperienza passerà a uno stato attivo (verrà applicato l'elenco delle modifiche) solo se tutte le condizioni sono true.

Esempio

In caso di più chiamate AJAX che devono tutte restituire un risultato prima che la pagina sia pronta per l'esperienza, potresti attivare un evento dopo ogni chiamata AJAX e includere anche un'ulteriore regola di targeting JavaScript che verifichi un determinato valore di variabile. L'esperienza non si attiva finché l'ulteriore regola di targeting JavaScript non è true e una chiamata AJAX non ha restituito un risultato.

Riattivare un elenco delle modifiche

È possibile configurare un esperimento in modo che vengano soddisfatte tutte le condizioni di targeting e l'evento scelto come target venga attivato più volte.

Se l'evento scelto come target viene attivato più volte e tutte le altre condizioni di targeting vengono soddisfatte, l'elenco delle modifiche viene riattivato. In tal caso, Optimize controlla la pagina per capire se ha caricato eventuali ulteriori elementi che dovrebbero essere modificati in base all'elenco delle modifiche dell'esperimento. Optimize aggiorna di conseguenza gli elementi appena caricati. Gli elementi esistenti non vengono modificati.

Esempio

Prendi in considerazione una pagina che include un carrello degli acquisti dinamico dove un utente può fare clic sui prodotti per aggiungerli. Poi valuta la possibilità di eseguire un esperimento che:

  • Inserisce un'immagine dopo ogni prodotto nel carrello e...
  • Inserisce un messaggio di offerta globale nella parte superiore del corpo dell'annuncio quando un utente ha almeno un prodotto nel carrello.

La pagina attiva l'evento di attivazione (ad es. shoppingCartChanged) ogni volta che un utente aggiunge o rimuove un articolo dal carrello. Possono far parte dell'esperimento sia la condizione di pagina sia le modifiche applicate.

Nell'esempio sopra riportato, la condizione di targeting includerebbe: "Sono presenti prodotti nel carrello?"

La prima volta che l'utente aggiunge un prodotto, l'elenco delle modifiche viene attivato e Optimize:

  • Aggiunge un'immagine dopo il singolo prodotto nel carrello
  • Aggiunge il messaggio di offerta globale nella parte superiore della pagina

La seconda volta che l'utente aggiunge un prodotto al carrello, l'elenco delle modifiche viene riattivato. Optimize:

  • Aggiunge un'immagine dopo il secondo prodotto nel carrello

La seconda volta che l'utente aggiunge un prodotto al carrello, Optimize non aggiunge alla pagina un secondo messaggio di offerta né un'altra immagine dopo il primo prodotto. L'unico elemento modificato è il prodotto appena aggiunto che non era presente quando era stato applicato la prima volta l'elenco delle modifiche.

Disattivare un elenco delle modifiche

È possibile utilizzare gli eventi di attivazione per ripristinare l'elenco delle modifiche di un esperimento. Ad esempio, nello scenario del carrello degli acquisti sopra descritto, non è consigliabile mostrare un codice di offerta a un utente che non soddisfa più la condizione di targeting dell'esperimento. Analogamente, molte applicazioni web su singola pagina condividono i componenti in più sezioni del sito; tuttavia, potrebbe essere necessario limitare le modifiche dell'esperimento a un'unica sezione.

Se viene attivato un evento dopo l'attivazione di un determinato esperimento e le condizioni di targeting non sono più soddisfatte, Optimize ripristina le modifiche applicate in precedenza associate all'esperimento. In questo modo, la pagina torna nello stato in cui si trovava prima dell'attivazione dell'esperimento e dell'applicazione dell'elenco delle modifiche.

Nell'esempio sopra riportato, se dal carrello viene rimosso l'ultimo articolo, viene rimosso anche il messaggio di offerta globale.

Le modifiche JavaScript non possono essere automaticamente annullate a meno che non implementi un callback di disattivazione e lo specifichi come valore restituito.

Applicazioni a pagina singola e pagine virtuali

È possibile utilizzare i criteri di targeting per definire le pagine virtuali delle applicazioni web su singola pagina. La condizione giusta da utilizzare dipende dal framework sottostante del sito, ma la maggior parte degli sviluppatori di app web su singola pagina riscontrerà che i frammenti URL sono l'opzione più facile per i siti.

In alcuni casi, le app web non mappano una pagina virtuale a un frammento URL. Ad esempio, alcuni siti utilizzano gli interstitial per l'iscrizione alla newsletter. Questi annunci sono ottimi candidati per il test A/B. È possibile eseguire esperimenti sugli interstitial e su altri elementi simili aggiungendo ulteriori condizioni di targeting all'esperimento di Optimize. È possibile utilizzare il targeting per variabili JavaScript per verificare l'esistenza di contenuti o elementi specifici.

La disattivazione è molto utile per le app su singola pagina che utilizzano le regole CSS per apportare modifiche di stile ai componenti riutilizzati in più pagine. Durante la transizione dell'app a una pagina virtuale diversa, è possibile cancellare i tag <STYLE> di una pagina virtuale da <HEAD>.

Attivazione in un'applicazione su singola pagina

Per riattivare un elenco delle modifiche non è necessario un ulteriore round trip al server di Optimize. Pertanto, un approccio semplice ed efficace agli eventi di attivazione è attivare un evento dopo una qualsiasi modifica alla pagina.

Ad esempio, un'app AngularJS potrebbe implementare gli eventi di attivazione in sette righe di codice attivando un evento dopo ogni digest loop.

Il seguente esempio di snippet di codice attiva un evento dopo ogni digest loop in un'app AngularJS.

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})
È stato utile?
Come possiamo migliorare l'articolo?