Campagne Contenuto dinamico

Il modulo Contenuto dinamico consente di sostituire i componenti Web statici e trasformarli in esperienze dinamiche, controllandoli direttamente dalla console di Experience OS. I casi d'uso per Contenuto dinamico includono banner dinamici basati su regole, riferimenti intelligenti a contenuti aggiuntivi (anziché elenchi statici soggetti ad aggiornamenti manuali), cursori dinamici con contenuti basati sui feed di dati e altro ancora.

Crea una campagna Contenuto dinamico

1. Vai a Personalizzazione del sito › Nuova campagna e fai clic su Contenuto dinamico.
2. Inserisci un nome e, facoltativamente, aggiungi note ed etichette.
3. Specifica le impostazioni della campagna, come il layout, la posizione e le impostazioni avanzate. Per ulteriori informazioni, consulta la sezione dedicata alle Impostazioni della campagna Contenuto dinamico.
4. Configura le impostazioni di targeting dell'esperienza per determinare quando, dove e per chi è l'esperienza viene visualizzata.
5. Crea varianti usando modelli basati su altre esperienze o un feed di dati. Una volta completate tutte le varianti, fai clic su Salva variante.
6. Imposta l' allocazione, lametrica principale e le impostazioni di esperienza avanzate.
7. Configura la quantità di traffico da allocare a ciascuna variante e al gruppo di controllo.
8. Fai clic su Salva esperienza. 
9. Puoi creare altre esperienze in questa campagna facendo clic sull'icona più .
10. Per le campagne che utilizzano un codice di incorporamento come località, copia e incolla il codice sul codice sorgente del tuo sito. Per recuperare il codice, dopo aver salvato una campagna, passa il mouse sul nome della campagna e fai clic sull'icona del codice, si aprirà la finestra di dialogo del codice di incorporamento.
    

Impostazioni della campagna Contenuto dinamico

Layout

Dopo aver assegnato alla campagna un nome univoco, seleziona il tipo di layout.

• Singolo: al visitatore viene mostrata una variante tra tutte le varianti disponibili.
• Elenco articoli: un gruppo di banner presentati insieme. Dynamic Yield sceglierà il miglior set di varianti, ordinandole automaticamente per prestazioni (prima la migliore variazione e così via), in base alla metrica principale. 
• Cursore: opzione simile a Elenco articoli, ma le varianti sono già racchiuse in una visualizzazione a carosello. 

Posizione

I contenuti dinamici possono essere inseriti e posizionati in qualsiasi pagina del tuo sito Web utilizzando i seguenti metodi:

• Sostituzione di un elemento: Dynamic Yield esegue il rendering del contenuto dinamico, sostituendo un elemento esistente sul tuo sito senza risorse tecniche o IT. Devi specificare l'elemento da sostituire come selettore CSS.
• Aggiunta dopo l'elemento: simile all'opzione Sostituzione di un elemento, ma l'elemento viene posizionato subito dopo uno specifico selettore CSS. 
• Aggiunta prima dell'elemento:simile all'opzione Sostituzione di un elemento, ma l'elemento viene posizionato subito prima di uno specifico selettore CSS. 
• Incorporazione con codice: implementa contenuti dinamici direttamente nel codice sorgente del tuo sito Web (Dynamic Yield non ne esegue il rendering). Dopo aver pubblicato la campagna, passa il mouse sul nome della campagna e clicca sull'icona del codice per individuare il codice.

Per le prime tre opzioni, devi specificare le pagine su cui Dynamic Yield dovrebbe eseguire il rendering della campagna. 

Definizione del layout dell'elenco degli articoli

Puoi configurare un elenco di elementi per visualizzare le varianti orizzontalmente o verticalmente utilizzando le opzioni dellayout dell'elenco degli articoli predefinite.

Tuttavia, se desideri configurare un layout diverso, ad esempio una griglia, o aggiungere del codice HTML al layout, puoi creare il tuo layout personalizzato come segue:
(Visualizzazione di esempi di codici di layout personalizzati)

1. Durante la creazione o la modifica di un elenco di elementi con contenuto dinamico, seleziona Personalizza nell'area Layout dell'elenco degli articoli.
2. Effettua una delle seguenti operazioni:
   • Definisci un Tag che racchiude tutte le varianti per sostituire il tag che racchiude tutte le varianti <div> predefinito con un tag HTML diverso. Ad esempio: <ul>
     
   • Definisci un Tag che racchiude ogni variante per sostituire il tag che racchiude ogni variante <div> predefinito con un tag HTML diverso. Ad esempio: <li>
     
   • Aggiungi CSS o JS al contenitore dell'elenco degli articoli. Questo vale per tutte le varianti nell'editor di codice.
     
   • Aggiungi HTML prima degli articoli o HTML dopo gli articoli. Quest'opzione è utile per l'intestazione e il testo a piè di pagina.  
     

Impostazioni avanzate

Impostazione	Descrizione
Attiva evento Google Analytics	Visibile solo se l'integrazione con Google Analytics è abilitata. Questa opzione è abilitata per impostazione predefinita, ma è possibile disabilitarla per impedire la segnalazione di dati a Google Analytics su uno specifico Contenuto dinamico.
Esegui integrazioni personalizzate	Attiva un codice JavaScript personalizzato quando viene presentata una variante. Le integrazioni personalizzate vengono gestite nella schermata di integrazione nelle impostazioni del sito. Questa opzione è visibile solo se è abilitata un'integrazione personalizzata.
Presenta ad ogni evento SPA	Rilevante per le applicazioni a pagina singola che non generano l'aggiornamento del browser ad ogni cambio di schermata. Se desideri che il Contenuto dinamico riavvii o rivaluti le condizioni di targeting ad ogni cambio di schermata nella tua applicazione a pagina singola, attiva un evento track_pageview e abilita questa opzione. Per ulteriori informazioni sull'utilizzo di applicazioni a pagina singola , consulta questo articolo.
Ottimizza il tempo di caricamento del sito	Memorizza l'esperienza al di fuori del sito per massimizzare la velocità complessiva di caricamento del sito. Consigliato principalmente per le esperienze nella parte bassa della pagina, per ridurre il rischio di sfarfallio.
Attendi	Impedisci il rendering del Contenuto dinamico fino al caricamento di un elemento o finché non viene soddisfatta una condizione. Utilizzato principalmente a scopi di risoluzione dei problemi o per assicurarsi che Google Analytics stia monitorando correttamente il Contenuto dinamico. Seleziona una delle seguenti opzioni:
Niente (attiva al caricamento della pagina)	Non aspettare prima di eseguire il rendering del contenuto dinamico
Caricamento dell'elemento	Attendi il caricamento di un elemento nella pagina definita come selettore CSS
Libreria jQuery	Attendi il caricamento della libreria jQuery
Google Analytics (classico)	Attendi il caricamento di Google Analytics (classico)
Google Analytics (universale)	Attendi il caricamento di Google Analytics (universale)
Dynamic Yield.	Attendi il caricamento dei dati di Dynamic Yield (come le metriche delle prove sociali)
Componente esterno	Attendi il caricamento di qualsiasi funzione JavaScript personalizzata sulla pagina

Blocca una variante

Se usi gli elenchi di articoli e i layout dei cursori, puoi selezionare una variante che venga visualizzata sempre per prima. Al di sotto delle azioni delle varianti, seleziona Blocca variante Puoi aggiungere una sola variante in ogni esperienza.

Esempi di codice di layout personalizzato per l'elenco degli articoli 

Puoi utilizzare i seguenti esempi di codice CSS per creare il tuo elenco di articoli personalizzato.  

Layout orizzontale 

Visualizza gli articoli uno accanto all'altro in un'unica riga:

 

CSS:

 .dy-container-${dyTagId} { 
  visualizzazione: flessibile;
}

.dy-item-${dyTagId} {
  flex:1;
  margin-right: 20 px;
}

.dy-item-${dyTagId}:last-of-type {
  margin-right: 0 px;
}

Layout verticale 

Visualizza gli articoli uno sopra l'altro in un'unica colonna:

 

CSS:

.dy-item-${dyTagId} {   
  margin-bottom:20px;

Layout a griglia: banner di grandi dimensioni

Visualizza gli articoli in una griglia con un massimo di tre articoli per riga. Il numero di articoli per riga potrebbe essere inferiore a seconda delle dimensioni dello schermo. 

• 768px o superiore: 3 articoli per riga
• 321 - 767px: 2 articoli per riga
• 320 px o inferiore: 1 articolo per riga

Questo esempio è progettato per esperienze con almeno 6 varianti.

CSS:

.dy-container-${dyTagId} {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 20px;
}

@media solo schermo e (larghezza massima: 767 px) {
  .dy-container-${dyTagId} {
  grid-template-columns: auto auto;
  }
}

@media solo schermo e (larghezza massima: 320 px) {
  .dy-container-${dyTagId} {
  grid-template-columns: auto;
  }
}

Layout a griglia: banner di piccole dimensioni

Visualizza gli articoli in una griglia con un massimo di 6 articoli per riga. Il numero di articoli per riga potrebbe essere inferiore a seconda delle dimensioni dello schermo:

• 1681px o superiore: 6 articoli per riga
• 1023px - 1366px: 5 articoli per riga
• 768px - 1024px: 4 articoli per riga
• 321px - 767px: 3 articoli per riga
• 320 px o inferiore: 2 articoli per riga

Questo esempio è progettato per esperienze con almeno 12 varianti.

CSS:

.dy-container-${dyTagId} {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto;
  grid-gap: 20px;
}

@media solo schermo e (larghezza massima: 1366 px) {
  .dy-container-${dyTagId} {
  grid-template-columns: auto auto auto auto auto auto auto;
  }
}

@media solo schermo e (larghezza massima: 1024 px) {
  .dy-container-${dyTagId} {
  grid-template-columns: auto auto auto auto auto;
  }
}

@media solo schermo e (larghezza massima: 767 px) {
  .dy-container-${dyTagId} {
  grid-template-columns: auto auto auto;
  }
}

@media solo schermo e (larghezza massima: 320 px) {
  .dy-container-${dyTagId} {
  grid-template-columns: auto;
  }
}