Immagini interattive interactive-images

È possibile rendere le immagini statiche ricche di esperienze coinvolgenti per i clienti trascinando e rilasciando punti attivi "shoppable" su un'immagine. Gli hotspot acquistabili combinano informazioni aggiuntive su un prodotto o servizio con una funzionalità diretta, punto vendita "Aggiungi al carrello" o "Acquista". I clienti possono toccare questi hotspot ed essere collegati direttamente al prodotto o al servizio, aggiungerli a un carrello o essere collegati a una pagina web. Esperienze dirette come queste aumentano il coinvolgimento e la conversione dei clienti sul tuo sito web.

Di seguito è riportato un banner acquistabile con un pop-up Quickview. Un utente attiva la visualizzazione rapida toccando il cerchio o il "punto attivo" sul modello.

Vedi le immagini interattive in azione nella pagina web precedente andando al seguente:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion-QVzoom/index2-shoppable.html?lang=it?lang=it

Guarda come vengono creati i banner immagine interattivi watch-how-interactive-image-banners-are-created

Segui una procedura dettagliata di 10 minuti e 33 secondi creazione di banner immagine interattivi. Scoprirai anche come visualizzare in anteprima, modificare e distribuire banner immagine interattivi.

Avvio rapido: Immagini interattive quick-start-interactive-images

La seguente descrizione dettagliata del flusso di lavoro è stata progettata per aiutarti a iniziare rapidamente a usare le immagini interattive in AEM Assets.

Cerca la Esempio intestazione all'interno di alcune delle attività di avvio rapido. Contiene una breve esercitazione basata sul seguente esempio di pagina web che non dispone ancora di Immagini interattive aggiunte:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=it?lang=it

L’esercitazione illustra i passaggi necessari per integrare le immagini interattive nel sito web.

Flusso di lavoro per le immagini interattive:

(Facoltativo) Identificazione delle variabili dei punti attivi optional-identifying-hotspot-variables

Per iniziare, identifica le variabili dinamiche utilizzate dall'implementazione di Quickview esistente in modo da poter inserire i dati dei punti attivi per creare l'immagine interattiva.

Quando aggiungi punti attivi a un'immagine del banner in AEM Assets, devi assegnare un SKU (Stock Keeping Unit; un identificatore univoco per ogni prodotto o servizio distinto offerto) e variabili aggiuntive facoltative per ogni punto attivo. Tali variabili dei punti attivi vengono utilizzate in seguito per far corrispondere gli hotspot con il contenuto di Quickview.

È importante identificare correttamente il numero e il tipo di variabili da associare ai dati dei punti attivi. Ogni punto attivo aggiunto a un'immagine del banner deve contenere informazioni sufficienti per identificare in modo non ambiguo il prodotto nel sistema di back-end esistente.

Esistono diversi modi per identificare un set di variabili da utilizzare per i dati dei punti attivi.

A volte può essere sufficiente consultare gli specialisti IT responsabili dell'implementazione di Quickview esistente, in quanto è probabile che sappiano quale sia il set minimo di dati necessari per identificare Quickview 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 Quickview utilizza il seguente paradigma:

L’approccio consiste quindi nel visitare diverse aree del sito web esistente in cui è implementata la funzione Quickview , attivare la visualizzazione rapida e acquisire l’URL Ajax inviato dalla pagina web per caricare i dati o il 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:

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

Ora trova l'URL Ajax Quickview nel registro di rete e copia l'URL registrato per analisi future. Nella maggior parte dei casi, 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 Quickview possono avere parti comuni per una determinata categoria di siti web, ma possono essere modificati 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 all’immagine del banner.

Tuttavia, in casi complessi, l’URL Quickview presenta diversi elementi diversi rispetto all’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 attivo nella funzione immagine interattiva acquistabile in AEM Assets.

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

Esempio

Puoi applicare lo stesso approccio utilizzato nei tre esempi sopra alla pagina web demo:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=it?lang=it

La pagina web demo ha diverse miniature di prodotto, ognuna con un pulsante Quickview etichettato Altro. Con lo strumento di debug del browser Web ancora attivato, fai clic su ogni pulsante e osserva gli URL registrati di Quickview. Dopo aver attivato tutti e quattro i prodotti Quickview disponibili sulla pagina, si dispone del seguente elenco di richieste Quickview effettuate al backend:

Osservando queste chiamate al server, puoi vedere che le informazioni specifiche per il prodotto sono presenti solo nel percorso della richiesta. Noterai inoltre che la stringa di query non viene utilizzata e che sono presenti due tipi distinti di parti di dati:

Considerate queste informazioni, l'intero URL della visualizzazione rapida ha il seguente pattern:

/datafeed/$categoryId$-$SKU$.json

In base a tale analisi, puoi utilizzare categoryId e SKU per hotspot.

Ora puoi caricare un banner immagine e aggiungervi hotspot utilizzando la funzione di immagine interattiva acquistabile in AEM Assets.

(Facoltativo) Creazione di un predefinito visualizzatore di immagini interattive optional-creating-an-interactive-image-viewer-preset

Puoi scegliere di utilizzare il predefinito visualizzatore di immagini interattive predefinito denominato Banner_Shoppable che viene fornito con AEM Assets. Oppure puoi creare un predefinito visualizzatore personalizzato da usare con le immagini interattive.

Quando crei un predefinito visualizzatore di immagini interattive personalizzato, puoi determinare l’aspetto degli hotspot sul banner immagine. Come parte della creazione del predefinito visualizzatore, puoi scegliere di utilizzare un grafico per punti attivi da una raccolta di immagini predefinite.

Dopo aver salvato il predefinito visualizzatore, questo viene attivato automaticamente (attivato) sul Predefinito visualizzatore pagina elenco in AEM Assets. Questa funzionalità significa che è visibile nel componente File multimediali interattivi e ogni volta che visualizzi una risorsa. Tuttavia, distribuire un banner interattivo con questo predefinito visualizzatore, è necessario pubblicare anche il predefinito per visualizzatori (vale per i predefiniti visualizzatore personalizzati o predefiniti).

Per creare un predefinito visualizzatore di immagini interattive:

Caricamento di un banner immagine uploading-an-image-banner

Se hai già caricato le immagini da utilizzare, passa al passaggio successivo, Aggiunta di punti attivi a un banner immagine.

Per caricare un banner immagine:

Aggiunta di punti attivi a un banner immagine adding-hotspots-to-an-image-banner

Puoi aggiungere punti attivi a un banner immagine utilizzando l’editor nella sezione Gestione dei punti attivi pagina.

Quando aggiungi degli hotspot, puoi definirli come una visualizzazione a comparsa Quickview, come un collegamento ipertestuale o un frammento esperienza.

Vedi Frammenti esperienza.

Annulla e Ripeti le opzioni , situate nell’angolo superiore destro della pagina, sono supportate durante la sessione di creazione/modifica corrente.

Al termine della creazione dell’immagine interattiva, puoi utilizzare Anteprima per visualizzare una rappresentazione dell’immagine interattiva che verrà visualizzata ai clienti.

Vedi (Facoltativo) Anteprima delle immagini interattive.

Per aggiungere punti attivi a un banner immagine:

(Facoltativo) Anteprima delle immagini interattive optional-previewing-interactive-images

È possibile utilizzare Anteprima per vedere come si presenterà l’immagine interattiva ai clienti e per testare gli hotspot dell’immagine in modo che si comportino come previsto.

Una volta ottenuta l’immagine interattiva, puoi pubblicarla.
Vedi Incorporamento del visualizzatore di video o immagini in una pagina web.
Vedi Collegamento di 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 AEM Sites.
Vedi Aggiunta di risorse Dynamic Media alle pagine.

Per visualizzare in anteprima le immagini interattive:

Pubblicazione delle risorse immagine interattive publishing-interactive-image-assets

Vedi Pubblicazione delle risorse per informazioni dettagliate su come pubblicare le risorse immagine interattive.

Integrazione di un’immagine interattiva con il sito web integrating-an-interactive-image-with-your-website

Dopo aver caricato un'immagine del banner, aggiunto degli hotspot all'immagine e pubblicato l'immagine interattiva, ora puoi aggiungerla alla pagina del tuo sito web.

Se sei un cliente di AEM Sites, puoi aggiungere l’immagine interattiva trascinando il componente File multimediali interattivi sulla pagina. Vedi Aggiunta di risorse Dynamic Media alle pagine.

Se sei un cliente AEM Assets autonomo, puoi aggiungere manualmente l’immagine interattiva al tuo sito web come descritto in questa sezione.

Esempio

Utilizzo del sito web demo come esempio:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-0.html?lang=it?lang=it

Notate che l'immagine dei tre uomini è statica IMG tag:

<img class="img-responsive" width="100%" title="Hero Image 2" alt="Hero Image 2" src="images/shoppable-banner.jpg">

L'integrazione è semplice come rimuovere IMG e sostituirlo con il codice di incorporamento copiato da AEM Assets. Puoi vedere il risultato nel seguente URL che mostra l'immagine interattiva acquistabile sulla pagina con tre punti attivi di cerchio:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-1.html?lang=it?lang=it

Per applicare un ritaglio a un’immagine interattiva acquistabile per un ambiente dinamico, puoi includere l’attributo di configurazione Immagine interattiva ZoomView.iscommand al percorso, dove ZoomView è il componente da chiamare e iscommand è il comando di ritaglio dell'immagine applicato.

Vedi ZoomView.iscommand attributo di configurazione.

Vedi coltura comando di servizio delle immagini.

È ora possibile integrare l’immagine interattiva con una Quickview esistente sul sito web.

Integrazione di un’immagine interattiva con una Quickview esistente integrating-an-interactive-image-with-an-existing-quickview

L’ultimo passaggio di questo processo consiste nell’integrazione dell’immagine interattiva con un’implementazione Quickview esistente sul sito web. Non esiste una soluzione all’integrazione che funzioni per tutti i casi. Ogni implementazione di Quickview è unica ed è necessario un approccio specifico che molto probabilmente coinvolge l'assistenza di una persona IT front-end.

L'implementazione di Quickview esistente rappresenta normalmente una catena di azioni correlate che avvengono sulla pagina web nel seguente ordine:

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.

Allo stesso tempo, quando l'immagine interattiva acquistabile sostituisce il passaggio 1 e in parte il passaggio 2, quando un utente fa clic su un punto attivo all'interno dell'immagine acquistabile, l'interazione dell'utente viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati del punto attivo precedentemente aggiunti ad AEM Assets.

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

Il codice di incorporamento restituito da AEM Assets dispone già di un gestore eventi ready-to-use che viene commentato, come mostrato nel seguente frammento di codice evidenziato:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, you will need to add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //Please refer to your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

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 è sostanzialmente opposto al processo utilizzato per identificare le variabili dei punti attivi trattate in precedenza.

Vedi Identificazione delle variabili dei punti attivi.

Utilizzando i nostri precedenti esempi di URL di visualizzazione rapida, puoi vedere negli esempi seguenti come viene costruito l’URL di visualizzazione rapida in ogni caso:

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

Puoi vedere come questi passaggi vengono applicati al sito web demo per integrare completamente un’immagine interattiva acquistabile con il codice Quickview. In precedenza, la struttura dell’URL di visualizzazione rapida era identificata come segue:

/datafeed/$categoryId$-$SKU$.json

Per ricostruire questo URL all’interno di quickViewActivate handler, puoi utilizzare categoryId e SKU campi disponibili nel inData oggetto passato al gestore dal codice del visualizzatore:

var sku=inData.sku;
var categoryId=inData.categoryId;
var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";

Il sito Web demo sta attivando la finestra di dialogo Quickview utilizzando un semplice loadQuickView() chiamata della funzione. Questa funzione accetta un solo argomento, ovvero l’URL dei dati Quickview. Come tale, l'ultimo passo necessario per integrare l'immagine interattiva acquistabile è quello di aggiungere la seguente riga di codice al quickViewActivate handler:

loadQuickView(quickViewUrl);

Di seguito è riportato il codice sorgente completo:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

Il sito web demo finale con l'immagine interattiva completamente integrata si presenta così:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-banner/we-fashion/landing-3.html?lang=it?lang=it

Utilizzo delle visualizzazioni rapide per creare finestre a comparsa personalizzate using-quickviews-to-create-custom-pop-ups

Vedi Creazione di pop-up personalizzati tramite Quickview.