Banner a carosello

I banner a carosello consentono agli addetti al marketing di guidare la conversione creando facilmente contenuti promozionali interattivi rotanti e consegnandoli a 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 renderli più mirati. I banner a carosello consentono di creare o modificare rapidamente i banner rotanti e di aggiungere interattività come il collegamento di punti attivi ai dettagli del prodotto o alle risorse correlate. È possibile distribuirli su qualsiasi schermo, consentendo di immettere nuovi contenuti promozionali sul mercato più rapidamente.

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

chlimage_1-438

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

chlimage_1-439

Qui puoi navigare tra le immagini selezionando i numeri. Inoltre, le diapositive ruotano automaticamente in base a un intervallo di tempo personalizzabile. Le immagini in un banner carosello supportano sia punti attivi che mappe immagine. Gli utenti possono selezionare o passare a un collegamento ipertestuale o accedere a una finestra Quickview.

In questo esempio, un utente ha selezionato una mappa immagine e ha effettuato l'accesso alla finestra Quickview per i guanti:

chlimage_1-440

Guarda una procedura dettagliata su creazione dei banner a carosello (Durata: 10 minuti e 33 secondi). Scopri anche come visualizzare in anteprima, modificare e distribuire banner a carosello.

NOTA

Gli utenti non amministrativi devono essere aggiunti al utenti dam per creare o modificare banner carosello. In caso di problemi durante la creazione o la modifica, rivolgiti all’amministratore di sistema che può aggiungerti al dutenti gruppo.

Per farti iniziare a lavorare velocemente:

  1. Identificare le variabili dei punti attivi e delle mappe immagine (solo per i clienti che utilizzano Adobe Experience Manager Assets + Dynamic Media)

    Per iniziare, identifica le variabili dinamiche utilizzate dall'implementazione della visualizzazione rapida esistente. In questo modo puoi inserire correttamente gli hotspot e i dati della mappa immagine durante il processo di creazione del banner carosello in Experience Manager Assets.

  2. 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 è possibile riutilizzare questo predefinito visualizzatore personalizzato per più caroselli. Tuttavia, se lo desideri, gli utenti possono personalizzare direttamente il comportamento e l’aspetto del carosello durante la creazione del carosello. Questo approccio è da preferire quando si desidera una progettazione specifica per un determinato carosello.

  3. Caricare un banner immagine.

    Carica i banner immagine che desideri rendere interattivi.

  4. Creare un set carosello.

    In Set caroselli, gli utenti navigano tra le immagini dei banner e selezionano punti attivi o mappe immagine per accedere ai contenuti pertinenti.

    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. Aggiungere punti attivi o mappe immagine a un banner immagine.

    Aggiungi uno o più punti attivi o mappe immagine a un banner immagine. Quindi, associa ciascuno di essi a un’azione come un collegamento, una visualizzazione rapida o un frammento esperienza. Dopo aver aggiunto punti attivi o mappe immagine, finisci questa attività pubblicando il set carosello. La pubblicazione crea il codice di incorporamento che puoi utilizzare per copiare e applicare alla pagina di destinazione del tuo sito web.

    Vedi (Facoltativo) Anteprima banner carosello - Facoltativo. Se lo desideri, puoi visualizzare una rappresentazione del set carosello e verificarne l’interattività.

  6. Pubblicare banner a carosello.

    Puoi pubblicare un set carosello come faresti con una risorsa. In Assets, individua il set carosello, selezionalo e selezionalo Pubblica. La pubblicazione di un set carosello attiva l’URL e la stringa di incorporamento.

  7. Effettua una delle operazioni seguenti:

Se è necessario modificare i set carosello, consulta Modifica set carosello. Inoltre, puoi visualizzare e modificare Proprietà del set carosello.

Identificare le variabili di punti attivi e mappe immagine

Per iniziare, identifica le variabili dinamiche utilizzate dall'implementazione della visualizzazione rapida esistente. Questo metodo consente di inserire correttamente i dati di hotspot o mappe 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, assegni un SKU (Stock Keeping Unit). Puoi anche assegnare variabili aggiuntive facoltative a ogni punto attivo o mappa immagine. Tali variabili vengono utilizzate in seguito per far coincidere punti attivi o mappe immagine con il contenuto della visualizzazione rapida.

È importante identificare in modo appropriato 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 non ambiguo il prodotto nel sistema back-end esistente. Allo stesso tempo, assicurati che ogni punto attivo o mappa immagine non includa 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 dei punti attivi o delle mappe immagine.

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

La maggior parte delle implementazioni di Quickview utilizza il seguente paradigma:

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

L’approccio consiste quindi nel visitare diverse aree del sito web esistente in cui è implementata la funzione Quickview. Quindi attiva la visualizzazione rapida e acquisisci l’URL Ajax inviato dalla pagina web per il caricamento dei dati o del contenuto della visualizzazione rapida.

Normalmente non è necessario utilizzare strumenti di debug specializzati. I browser web moderni dispongono di ispettori web che svolgono 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 degli strumenti per sviluppatori. Selezionare la scheda Rete.
  • In Firefox, è possibile attivare il plug-in Firebug premendo F12 (Windows®) o Comando-Opzione-I (Mac). Utilizzare la relativa scheda Rete oppure utilizzare lo strumento integrato Inspector e la relativa scheda Rete.

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

Ora trova l'URL Ajax della visualizzazione rapida nel registro di rete e copia l'URL registrato per analisi future. Solitamente, quando si attiva la visualizzazione rapida sono presenti numerose richieste inviate al server. In genere, l’URL Ajax Quickview è uno dei primi dell’elenco. Dispone di una porzione o di un percorso di stringa di query complessa e il relativo tipo MIME di risposta è text/html, text/xmloppure text/javascript.

Durante questo processo, è importante visitare diverse aree del sito web, con diverse categorie di prodotti e tipi. Il motivo è che gli URL di visualizzazione rapida 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 Quickview è lo SKU del prodotto. In questo caso, il valore SKU è l’unico elemento dati necessario per aggiungere punti attivi o mappe immagine all’immagine del banner.

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

Prendi in considerazione i seguenti esempi di URL di visualizzazione rapida e le relative variabili di punti attivi o mappe immagine risultanti:

SKU singolo, trovato nella stringa query.

Gli URL registrati della visualizzazione rapida 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 nell’URL è il valore della variabile productId= parametro della stringa query, ed è chiaramente un valore SKU. Pertanto, gli hotspot o le mappe immagine richiedono solo campi SKU popolati con valori come 866558, 1196184, 1081492, 1898294.

SKU singolo, trovato nel percorso URL.

Gli URL registrati di Quickview 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 hotspot/mappe immagine:6422350843, 1607745002, 0086724882.

SKU e ID categoria nella stringa query.

Gli URL registrati della visualizzazione rapida 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. La SKU viene memorizzata nel prodId e l'ID della categoria viene memorizzato nella variabile category=parametro .

Di conseguenza, le definizioni dei punti attivi e delle mappe immagine sono coppie. Cioè, 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.

Carica banner immagine

Se hai già caricato le immagini da utilizzare, passa al passaggio successivo, Crea set carosello. Le immagini utilizzate nel carosello devono essere caricate dopo l’abilitazione di Dynamic Media.

Per caricare i banner immagine, vedi Caricare le risorse.

NOTA

Gli utenti non amministrativi devono essere aggiunti al utenti dam per creare o modificare banner carosello. In caso di problemi durante la creazione o la modifica, rivolgiti all’amministratore di sistema che può aggiungerti al utenti dam gruppo.

Per creare dei set carosello:

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

  2. Nella pagina Editor banner carosello, seleziona Tocca per aprire il selettore risorse per selezionare l'immagine per la prima diapositiva.

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

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

    • Vicino al centro della pagina, seleziona Tocca 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 della procedura, seleziona Seleziona.

    Con il Selettore risorse, puoi cercare le risorse digitando una parola chiave e selezionando Ritorno. 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 seleziona la Filtro nella barra degli strumenti. Per modificare la visualizzazione, seleziona l’icona Visualizza e fai clic su Vista a colonne, Vista a schede oppure Vista a elenco.

    Vedi Utilizzare i selettori per ulteriori informazioni.

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

  4. (Facoltativo) Effettua una delle seguenti operazioni:

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

    • Per eliminare un’immagine, selezionala e seleziona Elimina diapositiva nella barra degli strumenti.

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

    Per eliminare una diapositiva, selezionarla. Sulla barra degli strumenti, seleziona Elimina diapositiva sulla barra degli strumenti. Per spostare una diapositiva, selezionate l'icona di riordino e spostatevi nella posizione desiderata.

  5. Dopo aver aggiunto le immagini nelle diapositive, puoi aggiungere un punto attivo, una mappa immagine o entrambi all’immagine. Vedi Aggiungere punti attivi o mappe immagine a un banner immagine.

  6. È possibile modificare la progettazione visiva e il comportamento dei set carosello. Seleziona la Comportamento e Aspetto schede per modificare l’aspetto del banner carosello o il comportamento di componenti specifici. Vedi Gestire i predefiniti per visualizzatori per ulteriori informazioni su come utilizzare l’editor per visualizzatori.

    NOTA

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

    • Durata visualizzata da un’immagine. Per impostazione predefinita, ogni immagine viene visualizzata per 9 secondi.
    • Animazione. Per impostazione predefinita, ogni transizione di diapositiva è una dissolvenza. È possibile passare a una transizione diapositiva.
    • Stile dei pulsanti. Gli utenti possono ruotare attraverso i banner selezionando ogni punto o numero. È possibile modificare la posizione in cui vengono visualizzati i pulsanti degli indicatori impostati (e se si tratta di uno stile numerico o punteggiato) e la loro dimensione.
    • Modifica lo stile di evidenziazione di una mappa immagine o dell’icona utilizzata per gli hotspot.
    • Prima di modificare un predefinito visualizzatore, scegli lo stile su cui desideri basare il predefinito. Se non scegli uno stile, quando inizi a modificare il predefinito visualizzatore, perderai tutte le modifiche se modifichi un predefinito diverso.

    È inoltre possibile visualizzare in anteprima l’aspetto del banner carosello. Vedi (Facoltativo) Anteprima banner carosello.

  7. Seleziona Salva una volta finito.

Aggiungere punti attivi o mappe immagine a un banner immagine

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

Quando aggiungi punti attivi o mappe immagine, puoi definirli come una visualizzazione a comparsa Visualizzazione rapida, come collegamento ipertestuale o come frammento esperienza.

Vedi Frammento esperienza.

NOTA

Gli strumenti di condivisione social media in Carosello Banner non sono supportati quando incorpori il visualizzatore in un Frammento esperienza.

Per risolvere questo problema, puoi utilizzare o creare predefiniti visualizzatore privi di strumenti di condivisione social media. Questi predefiniti per visualizzatori consentono di incorporarli correttamente nei Frammenti esperienza.

Quando aggiungi punti attivi o mappe immagine a un'immagine, ricorda di salvare il tuo lavoro. Le opzioni Annulla e Ripristina, situate 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 carosello per i clienti.

Vedi (Facoltativo) Anteprima banner carosello.

NOTA

Quando aggiungi punti attivi a un banner immagine, le informazioni relative al punto attivo vengono memorizzate nella stessa posizione di metadati, in relazione alla posizione dell'immagine. Questo punto è vero indipendentemente dal fatto che si tratti di un’immagine interattiva o di un banner carosello. Questa funzionalità consente di riutilizzare facilmente la stessa immagine, insieme ai relativi dati definiti per i punti attivi, in entrambi i visualizzatori.
Tenere tuttavia presente che i caroselli banner supportano mappe immagine su immagini che possono contenere anche punti attivi; un'immagine interattiva non lo è. Tieni presente questo suggerimento se intendi creare un’immagine interattiva o un banner carosello che utilizza la stessa immagine. Considera la creazione di immagini interattive e di banner carosello utilizzando copie separate della stessa immagine.

NOTA

Se modifichi immagini interattive con punti attivi e ritagli l’immagine, questi vengono rimossi.

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

  1. Da Risorse, accedi al set carosello che desideri rendere interattivo.

  2. Seleziona il set carosello e fai clic su 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. Effettua una delle seguenti operazioni:

    • Per gli hotspot: Nell’immagine, seleziona la posizione in cui vuoi visualizzare il punto attivo.
    • Per le mappe immagine: Nell’immagine, trascina dall’alto a sinistra verso l’alto 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. In alternativa, utilizza i tasti freccia della tastiera per controllare la posizione di un punto attivo selezionato. Se necessario, aggiungi altri punti attivi o mappe immagine.

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

  6. Nel campo di testo Nome , digita il nome del punto attivo o della mappa immagine. Questo nome viene visualizzato anche nel Mappe e punti attivi elenco a discesa. Se specifichi un nome, identifica facilmente il punto attivo o la mappa immagine se decidi di modificarlo in futuro.

  7. Effettua una delle seguenti operazioni nel Azioni scheda:

    • Seleziona Quickview.

      • Se siete un Experience Manager Sites cliente, seleziona l’icona Selettore prodotto (lente di ingrandimento) per aprire la pagina Seleziona prodotto . Per tornare all’Editor banner carosello, seleziona il prodotto da utilizzare, quindi seleziona il segno di spunta nell’angolo in alto a destra della pagina.

      • Se non sei un Experience Manager Sites cliente:

        • Definisci le variabili. Vedi Identificare le variabili dei punti di attivazione.

        • Quindi, inserisci manualmente il valore SKU. Nel campo di testo Valore SKU digitare la SKU (Stock Keeping Unit) del prodotto, che è un identificatore univoco per ogni prodotto o servizio distinto offerto. Il valore SKU inserito popola automaticamente la parte variabile del modello di visualizzazione rapida. Il sistema ora è in grado di associare il punto attivo selezionato a una particolare visualizzazione rapida SKU.

        • (Facoltativo) Se nella Vista rapida 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.

        • Vedi Utilizzare i selettori per ulteriori informazioni.

    • Seleziona Collegamento ipertestuale.

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

        NOTA

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

      • Se si è un cliente autonomo, nel campo di testo href specificare il percorso completo dell'URL di una pagina web collegata.

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

    Vedi Utilizzare i selettori per ulteriori informazioni.

    • Seleziona Frammento esperienza.

      • Se sei un cliente Experience Manager Sites, seleziona l’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza . Per tornare alla pagina Gestione punti attivi, seleziona il frammento esperienza da utilizzare, quindi seleziona nell’angolo in alto a destra della pagina Seleziona.
        Vedi Frammenti esperienza.

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

        NOTA

        Gli strumenti di condivisione social media in Carosello Banner non sono supportati quando incorpori il visualizzatore in un Frammento esperienza.
        Per aggirare questo problema, puoi utilizzare o creare predefiniti visualizzatore privi di strumenti per la condivisione dei social media. Questi predefiniti per visualizzatori consentono di incorporarli correttamente nei Frammenti esperienza.

    experience_fragment-carouselbanner

    È inoltre possibile visualizzare in anteprima l’aspetto del banner carosello. Vedi (Facoltativo) Anteprima banner carosello.

  8. Seleziona Salva.

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

    Vedi Pubblicare le risorse.

    Vedi Aggiungere un set carosello alla pagina di destinazione del sito web

NOTA

Gli utenti non amministrativi devono essere aggiunti al utenti dam per creare o modificare banner carosello. In caso di problemi durante la creazione o la modifica, rivolgiti all’amministratore di sistema che può aggiungerti al utenti dam gruppo.

È possibile eseguire varie attività di modifica sui set carosello, ad esempio:

  • Aggiungi le 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 punti attivi e 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 a forma di matita).

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

    • Seleziona una risorsa Set carosello, quindi nell’angolo in alto a sinistra della pagina seleziona Modifica (icona a forma di matita).

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

    • Per aggiungere una diapositiva, seleziona la Aggiungi diapositiva icona. Passa alla risorsa da aggiungere alla diapositiva, quindi seleziona il segno di spunta.
    • Per riordinare le diapositive, trascinate una diapositiva in una nuova posizione (selezionate l'icona di riordino 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 Aggiungere punti attivi e mappe immagine a un banner immagine.
    • Per modificare l’aspetto o il comportamento del set carosello, seleziona la Aspetto scheda o Comportamento , quindi imposta le opzioni desiderate.
    • Per modificare punti attivi o mappe immagine, nella diapositiva appropriata seleziona un punto attivo o una mappa immagine. Sotto la Azioni , apporta le modifiche desiderate.
    • Per eliminare una diapositiva, selezionala, quindi seleziona Elimina diapositiva nella barra degli strumenti.
    • Per applicare un predefinito, seleziona la Predefinito dall’elenco a discesa, quindi seleziona un predefinito visualizzatore.
    • Per eliminare un intero set carosello, passare al set carosello, selezionarlo, quindi selezionare Elimina.
    NOTA

    Se modifichi immagini interattive con punti attivi e ritagli l’immagine, questi vengono rimossi.

È possibile utilizzare Anteprima per vedere come viene visualizzato il banner carosello ai clienti. L’opzione Anteprima consente inoltre di testare gli hotspot e le mappe immagine del banner carosello per garantirne il funzionamento come previsto.

Quando sei soddisfatto del banner carosello, puoi pubblicarlo.
Vedi Incorporare il visualizzatore di video o immagini in una pagina web.
Vedi Collegare gli URL all’applicazione web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine Experience Manager Sites.
Vedi Aggiungere 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 facoltativamente i banner carosello:

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

  2. Seleziona Modifica.

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

    experience_fragment-carouselbanner-riquadro a discesa

  4. Seleziona Anteprima.

  5. Per testare le azioni associate, seleziona gli hotspot o le mappe immagine sull'immagine.

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

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

Per utilizzare il carosello, devi pubblicarlo. La pubblicazione di un set carosello attiva l’URL e il codice di incorporamento. Pubblica anche il carosello su Dynamic Media cloud, integrato con una rete CDN per una distribuzione scalabile e performante.

NOTA

Se utilizzi un’immagine interattiva esistente con punti attivi per il banner carosello, devi pubblicare separatamente l’immagine interattiva dopo aver pubblicato il banner carosello.
Inoltre, se modifichi un’immagine interattiva pubblicata precedentemente e utilizzata in un banner carosello, pubblica l’immagine interattiva in modo che tali modifiche si riflettano nel banner carosello.

Vedi Pubblicare risorse Dynamic Media per informazioni su come pubblicare banner carosello.

Dopo aver caricato le immagini del banner per creare un carosello, aggiunto punti attivi o mappe immagine, o entrambe, sul banner. È stato pubblicato il set carosello. Ora puoi aggiungerlo alla pagina del sito web esistente.

NOTA

Se sei un cliente di Experience Manager Sites, puoi aggiungere il banner carosello direttamente alla pagina trascinando il componente File multimediali interattivi nella pagina. Vedi Aggiungere risorse Dynamic Media alle pagine.

Tuttavia, se sei un cliente Experience Manager Assets autonomo puoi aggiungere manualmente il banner carosello alla pagina di destinazione del tuo sito web.

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

  2. Aggiungi il codice di incorporamento copiato da Experience Manager Assets alla pagina web.
    Il codice di incorporamento copiato è reattivo e si adatta automaticamente all’area di incorporamento della pagina.

Nota: questo passaggio si applica solo se sei un cliente Experience Manager Assets autonomo.

L’ultimo passaggio di questo processo consiste nell’integrare il banner carosello con un’implementazione Quickview esistente sul sito web. Ogni implementazione della visualizzazione rapida è unica ed è necessario un approccio specifico che in genere richiede l'assistenza di un IT front-end.

L'implementazione di Quickview esistente rappresenta normalmente una catena di azioni correlate che avvengono 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 nel passaggio 1.
  3. Il codice front-end invia una richiesta Ajax utilizzando l’URL ottenuto al passaggio 2.
  4. La logica back-end restituisce i dati o il contenuto della visualizzazione rapida corrispondenti 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 di 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 non rappresentano 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.

Allo stesso tempo, quando l’utente seleziona un punto attivo o una mappa immagine, il banner carosello sostituisce il passaggio 1 e in parte il passaggio 2, 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 precedentemente aggiunti.

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

  • Ascolta un evento emesso dal banner carosello.
  • Crea un URL di visualizzazione rapida basato sui dati del punto attivo 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 di incorporamento restituito da Experience Manager Assets dispone già di un gestore eventi ready-to-use in posizione, che viene aggiunto un commento.

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

Il processo di costruzione dell'URL di visualizzazione rapida è opposto al processo utilizzato per identificare le variabili dei punti attivi e delle mappe immagine trattate in precedenza.

Vedi Identificare le variabili dei punti attivi e delle mappe immagine.

L'ultimo passaggio per attivare l'URL di visualizzazione rapida e attivare il pannello di visualizzazione rapida richiede molto probabilmente l'assistenza di un esperto IT front-end del reparto IT. Essi hanno la conoscenza di sapere come attivare con precisione l'implementazione della visualizzazione rapida dal passaggio appropriato, avendo un URL di visualizzazione rapida pronto all'uso.

Crea Windows® a comparsa personalizzato utilizzando Quickview

Vedi Crea Windows® a comparsa personalizzato utilizzando Quickview.

In questa pagina