Banner a carosello

I banner carosello consentono agli addetti al marketing di promuovere la conversione dei contenuti creando facilmente contenuti promozionali a rotazione interattivi e distribuendoli a qualsiasi schermo.

La creazione e la modifica dei contenuti visualizzati nei banner promozionali può richiedere tempo, limitando la possibilità di pubblicare rapidamente nuovi contenuti o renderli più mirati. I banner a carosello consentono di creare o modificare rapidamente i banner rotanti. È possibile aggiungere interattività, come il collegamento di hotspot ai dettagli del prodotto o a risorse correlate, e distribuirli su qualsiasi schermo, consentendo di introdurre più rapidamente sul mercato nuovi contenuti promozionali.

I banner a carosello sono indicati da un banner con la parola SET CAROSELLO

Sul sito web, un banner a carosello può essere visualizzato come segue:

Qui puoi navigare tra le immagini (facendo clic sui numeri). Inoltre, le diapositive ruotano automaticamente in base a un intervallo di tempo personalizzabile. Le immagini aggiunte nei banner carosello supportano sia punti attivi che mappe immagine, dove gli utenti possono selezionare o visitare un collegamento ipertestuale o accedere a una finestra Quickview.

In questo esempio, un utente ha toccato o fatto clic su una mappa immagine e ha effettuato l'accesso alla finestra Quickview per i guanti:

Guarda come vengono creati i banner a carosello

Riproduci una procedura dettagliata su come vengono creati i banner a carosello(10 minuti e 33 secondi) Scopri anche come visualizzare in anteprima, modificare e distribuire banner carosello.

Guida introduttiva: Banner a carosello

Per iniziare subito a usare i banner a carosello:

1. Identificare le variabili del punto attivo e della mappa immagine (solo per i clienti che utilizzano Experience Manager Assets + Dynamic Media)

   Inizia identificando le variabili dinamiche utilizzate dall’implementazione Quickview esistente, in modo da poter immettere correttamente gli hotspot e i dati della mappa immagine durante il processo di creazione del banner a carosello in Adobe Experience Manager Assets.

   NOTA

   Se sei un cliente Experience Manager Sites o e-commerce, puoi utilizzare la funzione incorporata per passare alle pagine dei prodotti e cercare le SKU (Stock Keeping Unit) esistenti nel catalogo dei prodotti. Non è necessario immettere manualmente le variabili del punto attivo o della mappa immagine. Consulta le informazioni su configurazione di eCommerce.

   Se sei un cliente di Experience Manager Assets e Dynamic Media, immetti manualmente i dati per gli hotspot e le mappe immagine, quindi integri l’URL pubblicato o il codice da incorporare con il sistema di gestione dei contenuti di terze parti.

2. Facoltativo: se necessario, crea un predefinito visualizzatore per set carosello.

   Se sei un amministratore, puoi personalizzare il comportamento e l’aspetto del carosello creando un predefinito visualizzatore Carosello personalizzato. Il vantaggio principale è che puoi riutilizzare questo predefinito visualizzatore personalizzato per più caroselli di immagini. Tuttavia, gli utenti possono personalizzare facoltativamente il comportamento e l’aspetto del carosello direttamente durante la creazione dello stesso. Questo metodo è l’approccio preferito quando si desidera un progetto specifico per un determinato carosello.

3. Carica un banner immagine.

   Carica i banner immagine da rendere interattivi.

4. Creare set carosello.

   In Set caroselli di immagini, gli utenti possono navigare tra le immagini dei banner e selezionare punti attivi o mappe immagine per accedere al contenuto pertinente.

   Per creare un set carosello in Assets, seleziona Crea, quindi seleziona Set carosello. Aggiungi risorse alle diapositive e seleziona Salva. Inoltre, puoi modificare l’aspetto e il comportamento del carosello direttamente nell’editor.

5. Aggiunta di punti attivi o mappe immagine a un banner immagine.

   Aggiungi uno o più punti attivi o mappe immagine a un banner immagine e associali a un'azione, ad esempio un collegamento, una visualizzazione rapida o un frammento esperienza. Dopo aver aggiunto punti attivi o mappe immagine, completa questa attività pubblicando il set carosello. La pubblicazione crea il codice da incorporare che puoi utilizzare per copiare e applicare alla pagina di destinazione del sito web.

   Consulta (Facoltativo) Anteprima dei banner a carosello - Facoltativo. Se lo desideri, puoi visualizzare una rappresentazione del set carosello e testarne l’interattività.

6. Pubblicare i banner a carosello.

   Pubblichi un set carosello come faresti con una risorsa. In Assets, passa al set carosello, selezionalo e fai clic su Pubblica. La pubblicazione di un set carosello attiva l’URL e la stringa di incorporamento.

7. Effettua una delle operazioni seguenti:

   • Aggiungi un banner carosello alla pagina del tuo sito web Puoi aggiungere l’URL del banner del carosello o il codice da incorporare copiato nella pagina del sito web.

     • Integrare il banner del carosello con un Quickview esistente. Se utilizzi un sistema di gestione dei contenuti web di terze parti, devi integrare il nuovo banner carosello con l’implementazione Quickview esistente sul tuo sito web.

   • Aggiungi un banner carosello al tuo sito web nell’Experience Manager Se sei un cliente di Experience Manager Sites, puoi aggiungere il set carosello direttamente alla pagina in questo Experience Manager, utilizzando il componente File multimediali interattivi.

Per modificare i set carosello, consulta modifica di set carosello. Inoltre, è possibile visualizzare e modificare Proprietà set carosello.

Identificare le variabili hotspot e mappa immagine

Inizia identificando le variabili dinamiche utilizzate dall’implementazione Quickview esistente, in modo da poter immettere correttamente gli hotspot o i dati della mappa immagine durante il processo di creazione del set carosello in Experience Manager Assets.

Quando aggiungi punti attivi o mappe immagine a un'immagine del banner in Experience Manager Assets, assegna una SKU e variabili aggiuntive facoltative a ciascun punto attivo o mappa immagine. Tali variabili vengono utilizzate in un secondo momento per far corrispondere i punti attivi o le mappe immagine con il contenuto Quickview.

È importante identificare correttamente il numero e il tipo di variabili da associare ai dati del punto attivo o della mappa immagine. Ogni punto attivo o mappa immagine aggiunta a un'immagine del banner deve contenere informazioni sufficienti per identificare in modo inequivocabile il prodotto nel sistema back-end esistente. Allo stesso tempo, ogni punto attivo o mappa immagine non deve includere più dati del necessario. Il motivo è che questo renderebbe il processo di immissione dei dati eccessivamente complesso e la gestione dei punti attivi o delle mappe immagine in corso più soggetta a errori.

Esistono diversi modi per identificare un set di variabili da utilizzare per i dati del punto attivo o della mappa immagine.

A volte è sufficiente consultare gli specialisti IT responsabili dell'implementazione Quickview esistente. È probabile che conoscano il set minimo di dati necessari per identificare Quickview nel sistema. Tuttavia, di solito è anche possibile semplicemente analizzare il comportamento esistente del codice front-end.

La maggior parte delle implementazioni Quickview utilizza il seguente paradigma:

• L’utente attiva un elemento dell’interfaccia utente sul sito web. Ad esempio, toccando un Quickview pulsante.
• Il sito web invia una richiesta Ajax al backend per caricare i dati o il contenuto Quickview, se necessario.
• I dati Quickview vengono tradotti nel contenuto in preparazione al rendering sulla pagina web.
• Infine, il codice front-end riproduce visivamente tali contenuti sullo schermo.

L’approccio consiste quindi nel visitare diverse aree del sito web esistente in cui è implementata la funzione Quickview. Attiva Quickview e acquisisci l’URL Ajax inviato dalla pagina web per caricare i dati o il contenuto Quickview.

In genere non è necessario utilizzare strumenti di debug specifici. I browser web moderni dispongono di web inspector che svolgono un lavoro adeguato. Di seguito sono riportati alcuni esempi di browser Web che includono i controlli Web:

• Per visualizzare tutte le richieste HTTP in uscita in Google Chrome, premi F12 (Windows) o Comando-Opzione-I (Mac) per aprire il pannello Strumenti per sviluppatori, quindi seleziona la scheda Rete.
• In Firefox, è possibile attivare il plug-in Firebug premendo F12 (Windows) o Command-Option-I (Mac) e utilizzando la relativa scheda Net, oppure è possibile utilizzare lo strumento integrato Inspector e la relativa scheda Rete.

Quando il monitoraggio della rete è attivato nel browser, attiva Quickview sulla pagina.

Ora trova l’URL Ajax di Quickview nel registro di rete e copia l’URL registrato per l’analisi futura. Di solito, quando si attiva Quickview, vengono inviate numerose richieste al server. In genere, l’URL Ajax di Quickview è uno dei primi dell’elenco. Possiede una porzione o un percorso di stringa di query complesso e il relativo tipo MIME di risposta è text/html, text/xml, o text/javascript.

Durante questo processo, è importante visitare diverse aree del sito web, con diverse categorie e tipi di prodotti. Il motivo è che gli URL Quickview hanno parti comuni per una determinata categoria di siti web, ma cambiano solo se visiti un’area diversa del sito web.

Nel caso più semplice, l’unica parte variabile nell’URL di Quickview è lo SKU del prodotto. In questo caso, il valore SKU è l'unico dato necessario per aggiungere punti attivi o mappe immagine all'immagine del banner.

Tuttavia, in casi complessi, oltre allo SKU l'URL Quickview presenta diversi elementi variabili, ad esempio ID categoria, codice colore e codice di dimensione. In questi casi, ogni elemento è una variabile separata nella definizione del punto attivo o della mappa immagine nella funzione del banner del carosello.

Prendi in considerazione i seguenti esempi di URL Quickview e le variabili hotspot o mappa immagine risultanti:

Carica banner immagine

Se hai già caricato le immagini che desideri utilizzare, passa al passaggio successivo, Creare set carosello. Tieni presente che le immagini utilizzate nel carosello devono essere caricate dopo l’abilitazione di Dynamic Media.

Per caricare i banner immagine, consulta Caricare le risorse.

Creare set carosello

Per creare set carosello:

1. In Assets, individua la cartella in cui vuoi creare il set carosello e passa a Crea > Set carosello.

2. Nella pagina dell’editor di banner a carosello, seleziona Toccate per aprire il selettore risorse per selezionare l'immagine per la prima diapositiva.

   Nella pagina dell’editor di banner a carosello, effettua una delle seguenti operazioni:

   • Nell’angolo in alto a sinistra della pagina, seleziona Aggiungi diapositiva icona.

   • Nella parte centrale della pagina, seleziona Toccate per aprire il selettore risorse.

   Seleziona per selezionare le risorse da includere nel set carosello. Le risorse selezionate dispongono di un’icona a forma di segno di spunta. Al termine, vicino all’angolo superiore destro della pagina, seleziona Seleziona.

   Con il Selettore risorse, puoi cercare le risorse digitando una parola chiave e toccando o facendo clic su Invio. Per perfezionare i risultati della ricerca, puoi anche applicare i filtri. Puoi filtrare in base a percorso, raccolta, tipo di file e tag. Seleziona il filtro e quindi fai clic su Filtro sulla barra degli strumenti. Per modificare la visualizzazione, tocca l’icona Visualizza e fai clic su Vista a colonne, Vista a schede o Vista a elenco.

   Consulta Utilizzare i selettori per ulteriori informazioni.

3. Continuate ad aggiungere diapositive fino ad aggiungere tutte le immagini da ruotare nel set carosello.

4. (Facoltativo) Effettuate una delle seguenti operazioni:

   • Se necessario, trascinare la diapositiva per riordinare le immagini nell'elenco.

   • Per eliminare un’immagine, selezionala, quindi seleziona Elimina diapositiva sulla barra degli strumenti.

   • Per applicare un predefinito, seleziona l’elenco a discesa dei predefiniti nell’angolo superiore destro della pagina, quindi seleziona un predefinito da applicare al set contemporaneamente.

   Per eliminare una diapositiva, selezionarla, quindi sulla barra degli strumenti selezionare Elimina diapositiva. Per spostare una diapositiva, selezionate l'icona Riordina (Reorder), quindi tenete premuto e spostate nella posizione desiderata.

5. Dopo aver aggiunto le immagini nelle diapositive, è possibile aggiungere un punto attivo, una mappa immagine o entrambi all'immagine. Consulta Aggiunta di punti attivi o mappe immagine a un banner immagine.

6. Puoi modificare la progettazione visiva e il comportamento dei set carosello. Seleziona la Comportamento e Aspetto e regolare la modalità di visualizzazione del banner del carosello o il comportamento di componenti specifici. Consulta Gestire i predefiniti visualizzatore per ulteriori informazioni su come utilizzare l’editor visualizzatore.

   NOTA

   Per i banner a carosello, è possibile regolare quanto segue:

   * Durata di visualizzazione di un’immagine. Per impostazione predefinita, ogni immagine viene visualizzata per 9 secondi.
   * Animazione. Per impostazione predefinita, ogni transizione di diapositiva è una dissolvenza. Potete cambiare questa transizione in una diapositiva.
   * Stile dei pulsanti. Gli utenti possono ruotare tra i banner toccando ogni punto o numero. È possibile modificare la posizione e le dimensioni dei pulsanti degli indicatori impostati (e se sono numerici o con uno stile punteggiato).
   * Modifica lo stile di evidenziazione di una mappa immagine o dell’icona utilizzata per gli hotspot.
   * Prima di modificare un predefinito visualizzatore, scegliete lo stile su cui basare il predefinito. Se non si sceglie uno stile, quando si inizia a modificare il predefinito visualizzatore, tutte le modifiche vengono perse se si decide di passare a un predefinito diverso.
   

   Consulta Considerazioni speciali per i banner a carosello per istruzioni dettagliate e ulteriori informazioni sull’editor visualizzatore.

   Puoi anche visualizzare in anteprima come verrà visualizzato il banner del carosello. Consulta (Facoltativo) Anteprima dei banner a carosello.

7. Seleziona Salva al termine.

Aggiunta di punti attivi o mappe immagine a un banner immagine

Puoi aggiungere punti attivi o mappe immagine a un banner utilizzando l’editor di set carosello.

Quando aggiungete punti attivi o mappe immagine, potete definirli come una visualizzazione a comparsa Quickview, come un collegamento ipertestuale o un frammento di esperienza.

Consulta Frammento esperienza.

Quando aggiungi punti attivi o mappe immagine a un'immagine, ricorda di salvare i tuoi dati. Le opzioni Annulla e Ripristina, posizionate nell'angolo superiore destro della pagina, sono supportate durante la sessione di creazione/modifica corrente.

Al termine della creazione del banner carosello, puoi facoltativamente utilizzare Anteprima per visualizzare una rappresentazione dell’aspetto del banner ai clienti.

Consulta (Facoltativo) Anteprima dei banner a carosello.

Vedi anche Aggiungere mappe immagine.

Per aggiungere punti attivi o mappe immagine a un banner immagine:

1. Da Assets, individua il set carosello da rendere interattivo.

2. Seleziona il set carosello e seleziona Modifica. Viene aperto l’Editor visualizzatore carosello.

3. Selezionare la diapositiva da rendere interattiva.

4. Nell’angolo in alto a sinistra della pagina, seleziona Punto attivo o Mappa immagine.

5. Effettuare una delle seguenti operazioni:

   • Per punti attivi: sull'immagine, seleziona la posizione in cui desideri visualizzare il punto attivo.
   • Per le mappe immagine: Sull’immagine, seleziona, quindi trascina dall’alto a sinistra verso il basso a destra per creare l’area della mappa immagine. È possibile regolare le dimensioni della mappa immagine trascinando gli angoli.

   Se necessario, trascina il punto attivo o la mappa immagine in una nuova posizione. Se necessario, aggiungi altri punti attivi o mappe immagine.

   Per eliminare un punto attivo o una mappa immagine, selezionare Azioni scheda. Seleziona il nome del punto attivo o della mappa immagine da rimuovere dall’intestazione Mappe e punti attivi del menu a discesa Tipo selezionato. Seleziona la Cestino accanto al menu, quindi seleziona Elimina.

6. Nel campo di testo Nome digitare il nome del punto attivo o della mappa immagine. Questo nome viene visualizzato anche nel Mappe e punti attivi elenco a discesa. Specificando un nome è facile identificare il punto attivo o la mappa immagine se si decide di modificarlo in futuro.

7. Effettua una delle seguenti operazioni in Azioni scheda:

   • Seleziona Quickview.

     • Se sei un cliente di Experience Manager Sites e Ecommerce, seleziona l’icona del selettore prodotti (lente di ingrandimento) per aprire la pagina Seleziona prodotto. Seleziona il prodotto da utilizzare, quindi fai clic sul segno di spunta nell’angolo superiore destro della pagina per tornare all’editor di banner a carosello.

     • Se non sei un cliente Experience Manager Sites o e-commerce

       • Consulta Identificare le variabili dei punti attivi se desideri definire queste variabili.

       • Quindi, immetti manualmente il valore SKU. Nel campo di testo Valore SKU digitare la SKU (Stock Keeping Unit) del prodotto, che rappresenta un identificatore univoco per ogni prodotto o servizio specifico offerto. Il valore SKU immesso popola automaticamente la parte variabile del modello Quickview in modo che il sistema sappia associare il punto attivo toccato alla visualizzazione rapida di una particolare SKU.

       • (Facoltativo) Se in Quickview sono presenti altre variabili che è necessario utilizzare per identificare ulteriormente un prodotto, selezionare Aggiungi variabile generica. Nel campo di testo, specifica una variabile aggiuntiva. Ad esempio, category=Mens è una variabile aggiunta.

       • Consulta Utilizzare i selettori per ulteriori informazioni.

   • Seleziona Collegamento ipertestuale.

     • Se sei un cliente di Experience Manager Sites, seleziona l’icona Selettore siti (cartella) per passare a un URL.

       NOTA

       Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo presenta collegamenti con URL relativi, in particolare collegamenti a pagine Experience Manager Sites.

     • Se si è clienti autonomi, specificare il percorso URL completo di una pagina Web collegata nel campo di testo HREF.

   Assicurati di specificare se aprire il collegamento in una nuova scheda del browser (impostazione predefinita consigliata) o nella stessa scheda.

   Consulta Utilizzo dei selettori per ulteriori informazioni.

   • Seleziona Frammento esperienza.

     • Se sei un cliente di Experience Manager Sites, seleziona l’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza. Seleziona il frammento di esperienza da utilizzare, quindi seleziona Seleziona nell’angolo superiore destro della pagina per tornare alla pagina di gestione dei punti attivi.
       Consulta Frammenti esperienza.

     • Specifica la larghezza e l'altezza del frammento di esperienza così come viene visualizzato sul banner.

       NOTA

       Gli strumenti di condivisione per social media nel banner carosello non sono supportati quando si incorpora il visualizzatore in un frammento di esperienza.
       Per risolvere questo problema, crea predefiniti visualizzatore che non dispongono di strumenti per la condivisione sui social media. Tali predefiniti visualizzatore consentono di incorporarli correttamente in Frammenti esperienza.

   

   Puoi anche visualizzare in anteprima come verrà visualizzato il banner del carosello. Consulta (Facoltativo) Anteprima dei banner a carosello.

8. Seleziona Salva.

9. Pubblica il set carosello. La pubblicazione crea il codice o l’URL da incorporare che puoi utilizzare nella pagina del sito web. Se sei un cliente di Experience Manager Sites, puoi aggiungere il set del carosello direttamente alla pagina web.

   Consulta Pubblicazione delle risorse.

   Consulta Aggiunta di un set carosello alla pagina di destinazione del sito web

Modifica set carosello

Puoi eseguire varie attività di modifica sui set carosello, come le seguenti:

• Aggiungere diapositive a un set carosello. Vedi anche Utilizzare i selettori.
• Riordinare le diapositive nel set carosello.
• Elimina le risorse nel set carosello.
• Applica un predefinito visualizzatore.
• Elimina il set carosello.
• Aggiungi o modifica gli hotspot e le mappe immagine. Vedi anche Utilizzare i selettori.

Per modificare i set carosello:

1. Effettua una delle seguenti operazioni:

   • Passa il puntatore del mouse su una risorsa set carosello, quindi seleziona Modifica (icona della matita).

   • Passa il puntatore del mouse su una risorsa set carosello, seleziona Seleziona (icona di spunta), quindi seleziona Modifica sulla barra degli strumenti.

   • Seleziona una risorsa Set carosello, quindi nell’angolo superiore sinistro della pagina seleziona Modifica (icona della matita).

2. Per modificare il set carosello, effettuate una delle seguenti operazioni:

   • Per aggiungere una diapositiva, selezionare Aggiungi diapositiva , quindi individua la risorsa da aggiungere alla diapositiva e seleziona il segno di spunta.
   • Per riordinare le diapositive, trascinare una diapositiva in una nuova posizione (selezionare l'icona Riordina per spostare gli elementi).
   • Per aggiungere un punto attivo o una mappa immagine, seleziona le icone del punto attivo o della mappa immagine e vedi aggiunta di punti attivi e mappe immagine.
   • Per modificare l’aspetto o il comportamento del set carosello, seleziona la Aspetto scheda o Comportamento , quindi impostare le opzioni desiderate.
   • Per modificare punti attivi o mappe immagine, nella diapositiva appropriata, seleziona un punto attivo o una mappa immagine e cambia come necessario sotto Azioni scheda.
   • Per eliminare una diapositiva, selezionarla, quindi selezionare Elimina diapositiva sulla barra degli strumenti.
   • Per applicare un predefinito, seleziona la voce corrispondente nell’angolo superiore destro della pagina Predefinito , quindi seleziona un predefinito visualizzatore.
   • Per eliminare un intero set carosello, passa a Set carosello, selezionalo, quindi seleziona Elimina.
   NOTA

   Se si modificano immagini interattive con punti attivi e si ritaglia l'immagine, questi vengono rimossi.

(Facoltativo) Anteprima dei banner a carosello

Puoi utilizzare Anteprima per vedere come il banner del carosello viene visualizzato dai clienti e per testare gli hotspot dei banner e le mappe immagine per assicurarti che si comportino come previsto.

Quando sei soddisfatto del banner del carosello, puoi pubblicarlo.
Consulta Incorporazione di un visualizzatore di video o immagini in una pagina web.
Consulta Collegamento di URL all’applicazione web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo presenta collegamenti con URL relativi, in particolare collegamenti a pagine Experience Manager Sites.
Consulta Aggiunta di risorse Dynamic Media alle pagine.

Puoi visualizzare in anteprima i banner carosello dall’Editor carosello (metodo preferito) o dal Visualizzatori elenco.

Per visualizzare in anteprima i banner a carosello:

1. In entrata Risorse, passa a un banner carosello esistente creato e seleziona per aprirlo.

2. Seleziona Modifica.

3. Nell’elenco dei predefiniti visualizzatore nell’angolo destro della barra degli strumenti, seleziona un visualizzatore per visualizzare in anteprima il banner del carosello.

   

4. Seleziona Anteprima.

5. Seleziona gli hotspot o le mappe immagine sull'immagine in modo da poter testare le azioni associate.

Per visualizzare in anteprima i banner a carosello dall’elenco Visualizzatori:

1. In entrata Risorse, passa a un banner carosello esistente creato e seleziona per aprirlo.
2. Seleziona l’icona Contenuto nell’angolo in alto a sinistra della pagina Anteprima.
3. In Visualizzatori nel pannello a sinistra della pagina, seleziona il nome del predefinito visualizzatore banner per carosello che desideri utilizzare.
4. Seleziona gli hotspot o le mappe immagine sull'immagine in modo da poter testare le azioni associate.

Pubblicare i banner a carosello

Pubblica il carosello in modo da poterlo utilizzare. La pubblicazione di un set carosello attiva l’URL e il codice di incorporamento. Pubblica inoltre il carosello sul cloud Dynamic Media, integrato con una rete CDN per una distribuzione scalabile e performante.

Consulta Pubblicare risorse Dynamic Media per informazioni su come pubblicare i banner a carosello.

Aggiungi un banner carosello alla pagina del tuo sito web

Dopo aver caricato le immagini del banner per creare un carosello, aggiunto punti attivi e/o mappe immagine al banner e pubblicato il set di carosello, ora puoi aggiungerlo alla pagina del sito web esistente.

Tuttavia, se sei un cliente di risorse di Experience Manager autonomo, puoi aggiungere manualmente il banner a carosello alla pagina di destinazione del sito web come descritto in questa sezione.

1. Copia il codice di incorporamento del set carosello pubblicato.
   Consulta Incorporare il visualizzatore di video o immagini in una pagina web.

2. Aggiungi alla pagina web il codice da incorporare copiato da Experience Manager Assets.
   Il codice di incorporamento copiato è reattivo, pertanto deve rientrare automaticamente nell’area di incorporamento della pagina.

Integrare il banner del carosello con un Quickview esistente

L’ultimo passaggio di questo processo è l’integrazione del banner a carosello con un’implementazione Quickview esistente sul sito web. Ogni implementazione Quickview è unica ed è necessario un approccio specifico che coinvolga l'assistenza di un responsabile IT front-end.

L’implementazione Quickview esistente rappresenta in genere una catena di azioni correlate che si verificano sulla pagina web nell’ordine seguente:

1. Un utente attiva un elemento nell’interfaccia utente del sito web.
2. Il codice front-end ottiene un URL Quickview basato sull’elemento dell’interfaccia utente attivato nel passaggio 1.
3. Il codice front-end invia una richiesta Ajax utilizzando l’URL ottenuto nel passaggio 2.
4. La logica di back-end restituisce i dati o il contenuto Quickview corrispondenti al codice front-end.
5. Il codice front-end carica i dati o il contenuto Quickview.
6. Facoltativamente, il codice front-end converte i dati Quickview caricati in una rappresentazione HTML.
7. Il codice front-end visualizza una finestra di dialogo o un pannello modale ed esegue il rendering del contenuto HTML sullo schermo per l’utente finale.

Queste chiamate non rappresentano chiamate API pubbliche indipendenti che possono essere chiamate dalla logica della pagina web da un passaggio arbitrario. Si tratta invece di una chiamata concatenata in cui ogni passaggio successivo è nascosto nell’ultima fase (callback) del passaggio precedente.

Allo stesso tempo in cui il banner del carosello sostituisce il passaggio 1 e parzialmente il passaggio 2, quando un utente tocca un punto attivo o una mappa immagine all'interno del banner del carosello, tale interazione viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati del punto attivo o della mappa immagine aggiunti in precedenza.

In un gestore eventi di questo tipo, il codice front-end esegue le seguenti operazioni:

• Ascolta un evento emesso dal banner del carosello.
• Costruisce un URL Quickview in base ai dati del punto attivo o della mappa immagine.
• Attiva il processo di caricamento di Quickview dal backend e di rendering sullo schermo per la visualizzazione.

Il codice di incorporamento restituito da Experience Manager Assets contiene già un gestore di eventi pronto all’uso ed è stato aggiunto un commento.

Pertanto, è necessario solo rimuovere il commento dal codice e sostituire il corpo del gestore fittizio con il codice specifico per la particolare pagina web.

Il processo di costruzione dell’URL Quickview è opposto a quello utilizzato per identificare le variabili hotspot e mappa immagine trattate in precedenza.

Consulta Identificare le variabili hotspot e mappa immagine.

L’ultimo passaggio per attivare l’URL Quickview e il pannello Quickview richiede probabilmente l’assistenza di un responsabile IT front-end del reparto IT. Possiedono le conoscenze necessarie per sapere come attivare con precisione l’implementazione Quickview dal passaggio corretto, avendo un URL Quickview pronto all’uso.

Creare pop-up personalizzati utilizzando Quickview

Consulta Creare pop-up personalizzati con Quickview.

Risorse Business.Adobe.com

Auto Text Summarization Targeted Content Asset Collections Dynamic Forms Digital Rights Management Digital Asset Management