Banner a carosello

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

La creazione e la modifica dei contenuti contenuti contenuti nei banner promozionali può richiedere molto tempo, limitando la possibilità di pubblicare rapidamente nuovi contenuti o rendendoli più mirati. I banner carosello consentono di creare o modificare rapidamente i banner a rotazione, aggiungere interattività quali punti di attivazione collegati ai dettagli del prodotto o alle risorse correlate e distribuirli su qualsiasi schermo, consentendo di immettere più rapidamente sul mercato nuovi contenuti promozionali.

I banner carosello sono contrassegnati da un banner con la parola CAROUSELSET:

Nel sito Web, un banner carosello può essere visualizzato come segue:

Qui è possibile spostarsi tra le immagini (facendo clic sui numeri). Inoltre, le diapositive vengono ruotate automaticamente in base a un intervallo di tempo personalizzabile. Le immagini aggiunte nel banner del carosello supportano sia i punti attivi che le mappe immagine, dove gli utenti possono toccare o passare a un collegamento ipertestuale o accedere a una finestra di visualizzazione rapida.

In questo esempio, un utente ha toccato o fatto clic su una mappa immagine per accedere alla finestra di visualizzazione rapida dei guanti:

Scoprite come creare i banner carosello

Guardate la procedura dettagliata di 10 minuti e 33 secondi sulla modalità di creazione dei banner carosello. Inoltre verrà illustrato come visualizzare in anteprima, modificare e distribuire i banner carosello.

Avvio rapido: Banner carosello

Per iniziare subito a lavorare:

1. Identificare le variabili dei punti di attivazione e delle mappe immagine (solo per i clienti che utilizzano AEM Assets + Dynamic Media)

   Per iniziare, identificate le variabili dinamiche utilizzate dall’implementazione esistente della visualizzazione rapida in modo da poter inserire correttamente i punti di attivazione e i dati delle mappe immagine durante il processo di creazione dei banner carosello in AEM Assets.

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

   Gli amministratori possono personalizzare il comportamento e l’aspetto del carosello creando un proprio predefinito per visualizzatori Carosello. Il vantaggio principale è che potete riutilizzare questo predefinito per visualizzatori personalizzati per più caroselli. Tuttavia, gli utenti possono anche personalizzare direttamente il comportamento e l’aspetto del carosello durante la creazione del carosello. Questo è l’approccio preferito quando si desidera un design molto specifico per un determinato carosello.

2. Caricate un banner immagine.

   Caricate i banner immagine da rendere interattivi.

3. Create un set carosello.

   In Set caroselli, gli utenti si spostano tra le immagini dei banner e toccano i punti attivi o le mappe immagine per accedere ai contenuti pertinenti.

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

4. Aggiungete punti di attivazione o mappe immagine a un banner immagine.

   Aggiungete uno o più punti di attivazione o mappe immagine a un banner immagine e associateli a un’azione come un collegamento, una visualizzazione rapida o un frammento esperienza. Dopo aver aggiunto punti di attivazione o mappe immagine, potete completare questa attività pubblicando il set di caroselli. Con la pubblicazione viene creato il codice da incorporare da copiare e applicare alla pagina di destinazione del sito Web.

   Consultate (Facoltativo) Anteprima dei banner carosello. - Facoltativo. Se necessario, potete visualizzare una rappresentazione del set carosello e verificarne l’interattività.

5. Pubblicare Banner Carosello.

   Potete pubblicare un set di caroselli come qualsiasi altra risorsa. In Risorse, andate al set carosello e selezionatelo, quindi toccate Pubblica. Quando si pubblica un set carosello, vengono attivati l’URL e la stringa da incorporare.

6. Effettua una delle operazioni seguenti:

   • Aggiungete un banner carosello alla pagina del sito WebPotete aggiungere nella pagina del sito Web l’URL del banner carosello o il codice da incorporare che avete copiato.

     • Integrare il banner del carosello con una visualizzazione rapida esistente. Se utilizzate un sistema di gestione dei contenuti Web di terze parti, dovrete integrare il nuovo banner carosello con l’implementazione esistente di Quickview sul sito Web.

   • Aggiungete un banner carosello al sito Web in AEMIse siete un cliente AEM Sites potete aggiungere il set carosello direttamente alla pagina in AEM, utilizzando il componente Supporto interattivo.

Per modificare i set di caroselli, consultate modifica dei set di caroselli. Inoltre, potete visualizzare e modificare le proprietà del set carosello.

Identificazione delle variabili dei punti di attivazione e delle mappe immagine

Per iniziare, identificate le variabili dinamiche utilizzate dall’implementazione esistente della visualizzazione rapida in modo da poter inserire correttamente i punti di attivazione o i dati delle mappe immagine durante il processo di creazione dei set carosello in AEM Assets.

Quando aggiungete punti di attivazione o mappe immagine a un'immagine del banner in AEM Assets, dovete assegnare un SKU e variabili aggiuntive facoltative a ogni punto di attivazione o mappa immagine. Tali variabili vengono utilizzate in seguito per far corrispondere punti attivi o mappe immagine con contenuto di visualizzazione rapida.

È importante identificare in modo appropriato il numero e il tipo di variabili da associare ai dati dei punti di attivazione o delle mappe immagine. Ogni punto sensibile o mappa immagine aggiunta a un'immagine banner deve contenere informazioni sufficienti per identificare in modo chiaro il prodotto nel sistema di back-end esistente. Allo stesso tempo, ogni punto di attivazione o mappa immagine non deve includere più dati del necessario. Questo perché renderebbe il processo di immissione dei dati eccessivamente complesso e la gestione continua dei punti attivi o delle mappe immagine più soggetta a errori.

Esistono diversi modi per identificare un set di variabili da utilizzare per i dati di aree sensibili o mappe immagine.

A volte può essere sufficiente consultare gli specialisti IT responsabili dell'implementazione della visualizzazione rapida, in quanto è probabile che sappiano qual è il set minimo di dati necessario per identificare la visualizzazione rapida nel sistema. Tuttavia, nella maggior parte dei casi è anche possibile analizzare semplicemente il comportamento esistente del codice front-end.

La maggior parte delle implementazioni di visualizzazione rapida utilizza il seguente paradigma:

• L’utente attiva un elemento dell’interfaccia utente sul sito web. Ad esempio, questo accade quando tocca un pulsante Quick View (Visualizzazione rapida).
• Il sito Web invia una richiesta Ajax al back-end per caricare i dati della visualizzazione rapida o il contenuto, se necessario.
• I dati della visualizzazione rapida vengono convertiti nel contenuto in preparazione del rendering sulla pagina Web.
• Infine, il codice front-end esegue visivamente il rendering di tali contenuti sullo schermo.

L’approccio consiste quindi nel visitare diverse aree del sito Web esistente in cui è implementata la funzione di visualizzazione rapida, attivare la visualizzazione rapida e acquisire l’URL Ajax inviato dalla pagina Web per caricare i dati di visualizzazione rapida o il contenuto.

Normalmente non è necessario utilizzare strumenti di debug specializzati. I browser Web moderni dispongono di ispettori Web che eseguono un lavoro adeguato. Di seguito sono riportati alcuni esempi di browser Web che includono ispettori Web:

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

Quando il monitoraggio della rete è attivato nel browser, attiva la visualizzazione rapida sulla pagina.

Ora trova l'URL Ajax della visualizzazione rapida nel registro di rete e copia l'URL registrato per analisi future. Nella maggior parte dei casi, quando si attiva la visualizzazione rapida, vengono inviate al server numerose richieste. In genere, l’URL Ajax della visualizzazione rapida è uno dei primi dell’elenco. Dispone di una porzione o di un percorso di una stringa di query complessa e il tipo MIME della 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 di visualizzazione rapida possono avere parti comuni per una determinata categoria di siti Web, ma possono essere modificati solo se visitate un’area diversa del sito Web.

Nel caso più semplice, l’unica parte variabile nell’URL della visualizzazione rapida è lo SKU del prodotto. In questo caso, il valore SKU è l’unico dato necessario per aggiungere aree sensibili o mappe immagine all’immagine del banner.

Tuttavia, in casi complessi, l’URL di visualizzazione rapida presenta elementi diversi oltre allo SKU, come ID categoria, codice colore, codice dimensione e così via. In questi casi, ogni elemento è una variabile separata nella definizione dei dati del punto di attivazione o della mappa immagine nella funzione del banner del carosello.

Considerate i seguenti esempi di URL di visualizzazione rapida e le relative variabili di aree sensibili o mappe immagine risultanti:

SKU singolo, trovato nella stringa di query.	Gli URL di visualizzazione rapida registrati includono quanto segue: https://server/json?productId=866558&source=100 https://server/json?productId=1196184&source=100 https://server/json?productId=1081492&source=100 https://server/json?productId=1898294&source=100 L'unica parte variabile dell'URL è il valore del parametro della stringa di query productId=, che è chiaramente un valore SKU. Pertanto, i nostri punti di attivazione o le nostre mappe immagine richiedono solo campi SKU popolati con valori come 866558, 1196184, 1081492, 1898294.
SKU singolo, trovato nel percorso dell’URL.	Gli URL di visualizzazione rapida registrati includono quanto segue: https://server/product/6422350843 https://server/product/1607745002 https://server/product/0086724882 La parte variabile si trova nell'ultima parte del percorso e diventa il valore SKU delle aree sensibili/mappe immagine:6422350843, 1607745002, 0086724882.
SKU e ID categoria nella stringa di query.	Gli URL di visualizzazione rapida registrati includono quanto segue: https://server/quickView/product/?category=1100004&prodId=305466 https://server/quickView/product/?category=1100004&prodId=310181 https://server/quickView/product/?category=1740148&prodId=308706 In questo caso, l’URL contiene due parti diverse. Lo SKU è memorizzato nel parametro prodId e l'ID categoria è memorizzato nel parametro category=. Di conseguenza, le definizioni di aree sensibili e mappe immagine sono coppie. ovvero un valore SKU e una variabile aggiuntiva denominata categoryId. Le coppie risultanti sono le seguenti: SKU è 305466 e categoryId è 1100004. SKU è 310181 e categoryId è 1100004. SKU è 308706 e categoryId è 1740148.

Caricamento dei banner immagine

Se avete già caricato le immagini che desiderate usare, passate al passaggio successivo, Creazione di set di carosello. Le immagini utilizzate nel carosello devono essere caricate dopo che Dynamic Media è stato abilitato.

Per caricare i banner immagine, consultate Caricamento delle risorse.

Creazione di set carosello

Per creare un set carosello

1. In Risorse, andate alla cartella in cui desiderate creare il set carosello e toccate Crea > Set carosello.

2. Nella pagina Editor banner carosello toccate Toccate per aprire Selettore risorsa per selezionare l'immagine per la prima diapositiva.

   Nella pagina Editor banner carosello, effettuate una delle seguenti operazioni:

   • Vicino all'angolo superiore sinistro della pagina, toccare l'icona Aggiungi diapositiva.

   • Vicino al centro della pagina, toccate Toccate per aprire Selettore risorsa.

   Tocca per selezionare le risorse da includere nel Set carosello. Le risorse selezionate dispongono di un’icona a forma di segno di spunta. Al termine, nell'angolo superiore destro della pagina, toccare 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 tocca l’icona Filtro nella 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.

   Per ulteriori informazioni, vedere Utilizzo dei selettori.

3. Continuate ad aggiungere diapositive finché non avrete aggiunto tutte le immagini da ruotare nel set carosello.

4. (Facoltativo) Effettuate una delle seguenti operazioni:

   • Se necessario, trascinate le diapositive per riordinare le immagini nell’elenco del set.

   • Per eliminare un'immagine, selezionarla, quindi toccare Elimina diapositiva sulla barra degli strumenti.

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

   Per eliminare una diapositiva, toccate o fate clic sulla diapositiva e toccate o fate clic su Elimina diapositiva nella barra degli strumenti. Per spostare una diapositiva, toccate l’icona del reoreder, quindi tenete premuto e spostatevi nella posizione desiderata.

5. Dopo aver aggiunto le immagini nelle diapositive, potete aggiungere un punto di attivazione, una mappa immagine o entrambi all’immagine. Vedere aggiunta di punti di attivazione o mappe immagine.

6. Per modificare la progettazione visiva e il comportamento dei set carosello, toccate o fate clic sulle schede Comportamento e Aspetto e apportate le modifiche necessarie per ottenere l’aspetto del banner carosello o per determinare il funzionamento di componenti specifici. Consultate Gestione dei predefiniti per visualizzatori per ulteriori informazioni sull'utilizzo dell'editor per visualizzatori.

   NOTA

   Per i banner carosello, potete regolare quanto segue:

   • Durata della visualizzazione di un’immagine. Per impostazione predefinita, ogni immagine viene visualizzata per 9 secondi.
   • Animazione. Per impostazione predefinita, ogni transizione di diapositiva è una dissolvenza. È possibile modificare questa impostazione in una transizione diapositiva.
   • Stile dei pulsanti. Gli utenti possono ruotare i banner toccando ogni punto o numero. È possibile modificare la posizione in cui appaiono i pulsanti degli indicatori di set (e se si tratta di uno stile numerico o punteggiato) e le loro dimensioni.
   • Modifica lo stile di evidenziazione di una mappa immagine o dell’icona utilizzata per i punti di attivazione.
   • Prima di modificare un predefinito per visualizzatori, scegliete lo stile su cui basare il predefinito. In caso contrario, quando iniziate a modificare il predefinito per visualizzatori, tutte le modifiche apportate andranno perdute se decidete di passare a un altro predefinito

   Potete anche visualizzare l’anteprima dell’aspetto del banner del carosello. Consultate (facoltativo) Anteprima dei banner carosello.

7. Toccate Save al termine.

Aggiunta di punti attivi o mappe immagine a un banner immagine

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

Quando aggiungete aree sensibili o mappe immagine, potete definirle come una visualizzazione a comparsa Quickview, come un collegamento ipertestuale o un frammento esperienza.

Vedere Frammento esperienza.

Quando aggiungete punti di attivazione o mappe immagine a un’immagine, ricordate di salvare il lavoro. Le opzioni Annulla e Ripristina, accanto all’angolo superiore destro della pagina, sono supportate durante la sessione di creazione/modifica corrente.

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

Vedere (facoltativo) Anteprima dei banner carosello.

Per aggiungere punti attivi o mappe immagine a un banner immagine

1. Da Risorse, andate al set di caroselli da rendere interattivo.

2. Selezionare il set carosello e toccare Modifica. Viene aperto l’Editor visualizzatore carosello.

3. Selezionate la diapositiva da rendere interattiva.

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

5. Effettuate una delle seguenti operazioni:

   • Per i punti attivi: Sull'immagine, toccate la posizione in cui desiderate visualizzare il punto di attivazione.
   • Per le mappe immagine: Sull’immagine, fate clic, quindi trascinate dall’alto a sinistra verso il basso a destra per creare l’area della mappa immagine. Per regolare le dimensioni della mappa immagine, trascinatene gli angoli.

   Se necessario, trascinate il punto di attivazione o la mappa immagine in una nuova posizione. Oppure, utilizzare i tasti freccia della tastiera per controllare la posizione di un punto sensibile selezionato. Se necessario, potete aggiungere altri punti di attivazione o mappe immagine.

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

6. Nel campo di testo Nome, digitate il nome del punto di attivazione o della mappa immagine. Questo nome viene visualizzato anche nell'elenco a discesa Mappe & Hotspot. Fornendo un nome è facile identificare il punto di attivazione o la mappa immagine se si decide di apportare modifiche in futuro.

7. Effettuare una delle seguenti operazioni nella scheda Azioni:

   • Toccate Quickview.

     • Se siete un AEM Sites , toccate l'icona del selettore prodotto (lente di ingrandimento) per aprire la pagina Selezione prodotto. Toccate il prodotto che desiderate utilizzare, quindi toccate il segno di spunta nell’angolo superiore destro della pagina per tornare all’Editor carosello banner.

     • Se non si è un AEM Sites

       • Vedere Identificazione delle variabili dei punti di attivazione come si desidera definire queste variabili.

       • Quindi, immettete manualmente il valore SKU. Nel campo di testo Valore SKU, digitare lo SKU del prodotto (Stock Keeping Unit), che è un identificatore univoco per ogni prodotto o servizio distinto offerto. Il valore SKU immesso popola automaticamente la porzione variabile del modello di visualizzazione rapida in modo che il sistema sappia associare il punto di attivazione toccato a una particolare visualizzazione rapida dello SKU.

       • (Facoltativo) Se nella visualizzazione rapida sono presenti altre variabili che è necessario utilizzare per identificare ulteriormente un prodotto, toccare Aggiungi variabile generica. Nel campo di testo, specificate una variabile aggiuntiva. Ad esempio, category=Mens è una variabile aggiunta.

       • Per ulteriori informazioni, vedere Utilizzo dei selettori.

   • Toccate Collegamento ipertestuale.

     • Se siete clienti AEM Sites , toccate l'icona Selettore sito (cartella) per passare a un URL.

       NOTA

       Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo contiene collegamenti con URL relativi, in particolare con collegamenti alle pagine AEM Sites.

     • Se siete clienti indipendenti, nel campo HREF specificate il percorso completo dell’URL di una pagina Web collegata.

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

   Per ulteriori informazioni, vedere Utilizzo dei selettori.

   • Toccate Frammento esperienza.

     • Se siete un cliente AEM Sites , toccate l’icona di ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza. Toccate o fate clic sul frammento esperienza che desiderate utilizzare, quindi toccate Seleziona nell'angolo superiore destro della pagina per tornare alla pagina di gestione dell'area sensibile.
       Vedere Frammenti esperienza.

     • Specificate la larghezza e l'altezza del frammento esperienza così come apparirà sul banner.

       NOTA

       Gli strumenti di condivisione social media in Carosello Banner non sono supportati quando incorporate il visualizzatore in un frammento esperienza.
       Per ovviare a questo problema, potete usare o creare predefiniti per visualizzatori privi di strumenti per la condivisione social media. Tali predefiniti per visualizzatori consentono di incorporarli correttamente nei frammenti esperienza.

   

   Potete anche visualizzare l’anteprima dell’aspetto del banner del carosello. Consultate (facoltativo) Anteprima dei banner carosello.

8. Toccate Salva.

9. Pubblicate il set carosello. La pubblicazione crea il codice da incorporare o l’URL che potete utilizzare nella pagina del sito Web. Se siete clienti AEM Sites , potete aggiungere il set carosello direttamente alla pagina Web.

   Consultate Pubblicazione di risorse.

   Vedere Aggiunta di un set carosello alla pagina di destinazione del sito Web

Modifica dei set di caroselli

Potete eseguire diverse attività di modifica su Set carosello, ad esempio:

• Aggiungete le diapositive a un set carosello. Vedere anche Utilizzo dei selettori.
• Riordinare le diapositive nel set carosello.
• Eliminate le risorse nel set carosello.
• Applicate un predefinito per visualizzatori.
• Eliminate il set di caroselli.
• Aggiungere o modificare punti di attivazione e mappe immagine. Vedere anche Utilizzo dei selettori.

Per modificare un set di caroselli

1. Effettuate una delle seguenti operazioni:

   • Passate il puntatore del mouse su una risorsa Set carosello, quindi toccate Modifica (icona matita).

   • Passate il puntatore del mouse su una risorsa Set carosello, toccate Seleziona (icona a forma di segno di spunta), quindi toccate Modifica sulla barra degli strumenti.

   • Toccate una risorsa Set carosello, quindi nell’angolo in alto a sinistra della pagina toccate Modifica (icona matita).

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

   • Per aggiungere una diapositiva, toccate l'icona Aggiungi diapositiva, quindi individuate la risorsa da aggiungere alla diapositiva e toccate o fate clic sul segno di spunta.
   • Per riordinare le diapositive, trascinate una diapositiva in una nuova posizione (selezionate l’icona di riordinamento per spostare gli elementi).
   • Per aggiungere un punto di attivazione o una mappa immagine, fai clic sulle icone del punto di attivazione o della mappa immagine e vedi aggiunta di punti di attivazione e mappe immagine.
   • Per modificare l'aspetto o il comportamento del set carosello, toccare la scheda Aspetto o Comportamento, quindi impostare le opzioni desiderate.
   • Per modificare punti di attivazione o mappe immagine, nella diapositiva appropriata selezionate un punto di attivazione o una mappa immagine e apportate le modifiche necessarie nella scheda Azioni.
   • Per eliminare una diapositiva, selezionatela, quindi toccate Elimina diapositiva sulla barra degli strumenti.
   • Per applicare un predefinito, nell’angolo superiore destro della pagina toccate l’elenco a discesa Preset, quindi selezionate un predefinito per visualizzatori.
   • Per eliminare un intero set carosello, passate al set carosello, selezionatelo, quindi toccate Elimina.
   NOTA

   Se modificate immagini interattive con punti attivi e ritagliate l’immagine, i punti attivi vengono rimossi.

(Facoltativo) Anteprima dei banner carosello

Potete utilizzare Anteprima per vedere l’aspetto del banner carosello per i clienti e per testare i punti di attivazione e le mappe immagine dei banner del carosello per assicurarvi che si comportino come previsto.

Una volta ottenuto il risultato desiderato, potete pubblicarlo.
Consultate Incorporamento del visualizzatore video o di immagini in una pagina Web.
Consultate Collegamento di URL all'applicazione Web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo contiene collegamenti con URL relativi, in particolare con collegamenti alle pagine AEM Sites.
Vedere Aggiunta di risorse Dynamic Media alle pagine.

Potete visualizzare in anteprima i banner carosello dall'Editor carosello (metodo preferito) o dall'elenco Visualizzatori.

Per visualizzare in anteprima i banner del carosello

1. In Risorse, andate a un banner carosello esistente creato e toccate per aprirlo.

2. Toccate Modifica.

3. Nell’elenco dei predefiniti per visualizzatori nell’angolo a destra della barra degli strumenti, selezionate un visualizzatore per l’anteprima del banner carosello.

   

4. Toccate Anteprima.

5. Toccate i punti di attivazione o le mappe immagine sull’immagine per verificare le azioni associate.

Per visualizzare in anteprima i banner del carosello dall'elenco Visualizzatori

1. In Risorse, andate a un banner carosello esistente creato e toccate per aprirlo.
2. Nell’angolo in alto a sinistra della pagina Anteprima, fate clic sull’icona Contenuto.
3. Nell’elenco Visualizzatori nel pannello sul lato sinistro della pagina, toccate il nome del predefinito per visualizzatori di banner carosello che desiderate usare.
4. Toccate i punti di attivazione o le mappe immagine sull’immagine per verificare le azioni associate.

Pubblicazione dei banner carosello

Per utilizzarlo, è necessario pubblicare il carosello. Quando si pubblica un set carosello, vengono attivati l’URL e il codice da incorporare. Il carosello viene anche pubblicato su Dynamic Media cloud, integrato con un CDN per la distribuzione scalabile e performante.

Consultate Pubblicazione di Dynamic Media Assets per informazioni su come pubblicare i banner del carosello.

Aggiunta di un banner carosello alla pagina del sito Web

Dopo aver caricato le immagini dei banner per creare un carosello, aggiunto punti di attivazione e/o mappe immagine al banner e pubblicato il set di caroselli, potete ora aggiungerlo alla pagina del sito Web esistente.

Tuttavia, se siete clienti indipendenti AEM risorse, potete aggiungere manualmente il banner carosello alla pagina di destinazione del sito Web, come descritto in questa sezione.

1. Copiate il codice da incorporare del set carosello pubblicato.
   Consultate Incorporamento del visualizzatore video o di immagini in una pagina Web.

2. Aggiungete il codice da incorporare copiato da AEM Assets alla pagina Web.
   Il codice da incorporare copiato è reattivo e dovrebbe quindi adattarsi automaticamente all'area di incorporamento della pagina.

Integrazione del banner carosello con una visualizzazione rapida esistente

Nota: questo passaggio si applica solo se sei un cliente AEM Assets indipendente.

L’ultimo passaggio di questo processo consiste nell’integrare il banner del carosello con un’implementazione esistente della visualizzazione rapida sul sito Web. Ogni implementazione rapida della visualizzazione è unica ed è necessario un approccio specifico che molto probabilmente coinvolga l'assistenza di una persona IT front-end.

L’implementazione della visualizzazione rapida esistente rappresenta in genere una catena di azioni correlate che si verificano sulla pagina Web nel seguente ordine:

1. Un utente attiva un elemento nell’interfaccia utente del sito Web.
2. Il codice front-end ottiene un URL di visualizzazione rapida basato sull’elemento dell’interfaccia utente attivato al punto 1.
3. Il codice front-end invia una richiesta Ajax utilizzando l’URL ottenuto al punto 2.
4. La logica di backend restituisce i dati di visualizzazione rapida corrispondenti o il contenuto al codice front-end.
5. Il codice front-end carica i dati o il contenuto della visualizzazione rapida.
6. Facoltativamente, il codice front-end converte i dati della visualizzazione rapida 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 potrebbero non rappresentare chiamate API pubbliche indipendenti che possono essere richiamate dalla logica della pagina Web da un passaggio arbitrario. Si tratta, invece, di una chiamata concatenata in cui ogni passaggio successivo viene nascosto nell’ultima fase (callback) del passaggio precedente.

Contemporaneamente alla sostituzione del passaggio 1 e in parte del passaggio 2 da parte del banner carosello, quando un utente fa clic su un punto di attivazione o una mappa immagine all’interno del banner carosello, tale interazione viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina Web che contiene tutti i dati di aree sensibili o mappe immagine precedentemente aggiunti.

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

• Ascolta un evento emesso dal banner del carosello.
• Crea un URL di visualizzazione rapida basato sui dati del punto di attivazione o della mappa immagine.
• Attiva il processo di caricamento della visualizzazione rapida dal back-end e di rendering sullo schermo per la visualizzazione.

Il codice da incorporare restituito da AEM Assets dispone già di un gestore eventi ready-to-use impostato come commento.

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

Il processo di creazione dell’URL di visualizzazione rapida è sostanzialmente opposto a quello utilizzato per identificare le variabili dei punti di attivazione e delle mappe immagine trattate in precedenza.

Vedere Identificazione delle variabili dei punti di attivazione e delle mappe immagine.

L’ultimo passaggio per attivare l’URL della visualizzazione rapida e attivare il pannello di visualizzazione rapida richiede probabilmente l’assistenza di un addetto IT front-end del reparto IT. Essi hanno la capacità di sapere come attivare con precisione l’implementazione della visualizzazione rapida dal passaggio corretto, con un URL di visualizzazione rapida pronto all’uso.

Utilizzo delle visualizzazioni rapide per creare finestre a comparsa personalizzate

Vedere Uso delle visualizzazioni rapide per creare pop-up personalizzati.