Immagini interattive interactive-images

Puoi arricchire facilmente le immagini statiche e coinvolgerle con i clienti trascinando gli hotspot "shoppable" su un'immagine. Gli hotspot acquistabili combinano informazioni aggiuntive su un prodotto o un servizio con una funzionalità diretta per i punti vendita "Aggiungi al carrello" o "Acquista". I clienti possono selezionare questi hotspot che si collegano direttamente al prodotto o al servizio, aggiungerlo al carrello o essere collegati a una pagina web. Esperienze dirette come queste aumentano il coinvolgimento dei clienti e le conversioni sul tuo sito web.

Di seguito è riportato un banner acquistabile con una finestra popup Quickview. L'utente attiva la Quickview toccando il cerchio o il "punto attivo" sul modello.

Vedi immagini interattive in azione nella pagina Web illustrata sopra.

Guarda come vengono creati i banner interattivi per le immagini watch-how-interactive-image-banners-are-created

Segui la procedura dettagliata per la creazione dei banner interattivi (10 minuti e 33 secondi). Scopri anche come visualizzare in anteprima, modificare e distribuire banner interattivi.

Guida introduttiva: 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 Adobe Experience Manager Assets.

Cerca l'intestazione Esempio all'interno di alcune delle attività di avvio rapido. Contiene una breve esercitazione basata su un esempio di pagina Web a cui non sono ancora state aggiunte immagini interattive.

Il tutorial illustra i passaggi necessari per integrare le immagini interattive nel sito web.

Passaggi delle immagini interattive:

(Facoltativo) Identificare le variabili dei punti attivi optional-identifying-hotspot-variables

Inizia identificando le variabili dinamiche utilizzate dall’implementazione Quickview esistente in modo da poter immettere i dati dei punti attivi per creare l’immagine interattiva.

Quando aggiungi punti attivi a un'immagine del banner in Experience Manager Assets, assegna uno SKU (Stock Keeping Unit). Lo SKU è un identificatore univoco per ciascun prodotto o servizio offerto. Inoltre, aggiungi eventuali variabili facoltative aggiuntive a ciascun hotspot. Tali variabili di punti attivi vengono utilizzate in un secondo momento per far corrispondere i punti attivi con il contenuto 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 univoco il prodotto nel sistema back-end esistente.

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

A volte è sufficiente consultare gli specialisti IT responsabili dell'implementazione Quickview esistente. Queste persone probabilmente sanno qual è il set minimo di dati necessari per identificare Quickview nel sistema. Tuttavia, è anche possibile semplicemente analizzare il comportamento esistente del codice front-end.

La maggior parte delle implementazioni Quickview utilizza il seguente paradigma:

L’approccio consiste quindi nel visitare diverse aree del sito web esistente in cui è implementata la funzione Quickview. Quindi 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:

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. Ha 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 possono avere parti comuni per una determinata categoria di siti Web. Tuttavia, 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 all'immagine del banner.

Tuttavia, in casi complessi, oltre allo SKU l'URL Quickview presenta diversi elementi variabili. Ad esempio, elementi diversi possono includere l’ID categoria, il codice colore e il codice dimensione. In questi casi, ogni elemento è una variabile separata nella definizione dei dati dei punti attivi nella funzione per immagini interattive acquistabili di Experience Manager Assets.

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

Esempio

Puoi applicare lo stesso approccio utilizzato nei tre esempi precedenti alla pagina web demo.

La pagina web demo presenta diverse miniature di prodotto, ciascuna con un pulsante Quickview etichettato "See More" (Vedi altro). Con lo strumento di debug del browser ancora attivato, seleziona ogni pulsante e annota gli URL registrati di Quickview. Dopo aver attivato tutte e quattro le visualizzazioni rapide del prodotto disponibili nella pagina, viene visualizzato il seguente elenco di richieste Quickview effettuate al backend:

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

Considerate queste informazioni, l'intero URL Quickview ha il seguente pattern:

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

In base a tale analisi, utilizzerai categoryId e SKU per gli hotspot.

Ora puoi caricare un banner immagine e aggiungervi punti attivi utilizzando la funzione per immagini interattive acquistabili in Experience Manager Assets.

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

È possibile scegliere di utilizzare il predefinito visualizzatore predefinito di immagini interattive denominato Shoppable_Banner fornito con Experience Manager Assets. Oppure puoi creare un predefinito visualizzatore personalizzato da utilizzare con le immagini interattive.

Quando crei un predefinito visualizzatore immagine interattiva personalizzato, puoi determinare l'aspetto dei punti attivi sul banner dell'immagine. Come parte della creazione del predefinito visualizzatore, puoi scegliere di utilizzare un elemento grafico a punti attivi da una galleria di immagini predefinite.

Dopo aver salvato il predefinito visualizzatore, questo viene attivato automaticamente (attivato) nella pagina dell’elenco Predefinito visualizzatore di Experience Manager Assets. Questa funzionalità indica che è visibile nel componente File multimediali interattivi e ogni volta che visualizzi una risorsa. Tuttavia, per consegnare un banner interattivo con questo predefinito visualizzatore, pubblicare anche il tuo predefinito visualizzatore. Questa regola è valida per i predefiniti visualizzatore personalizzati o predefiniti.

Per creare un predefinito visualizzatore immagini interattivo:

Carica un banner immagine uploading-an-image-banner

Se hai già caricato le immagini che desideri 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 pagina Gestione punti attivi.

Quando aggiungi punti attivi, puoi definirli come una visualizzazione a comparsa Quickview, un collegamento ipertestuale o un frammento di esperienza.

Vedi Frammenti esperienza.

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 dell'immagine interattiva, è possibile utilizzare Anteprima per visualizzare una rappresentazione dell'aspetto dell'immagine interattiva per i clienti.

Vedi (facoltativo) Anteprima immagini interattive.

Per aggiungere punti attivi a un banner immagine:

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

Puoi utilizzare Anteprima per visualizzare una rappresentazione dell’aspetto dell’immagine interattiva ai clienti. L'anteprima consente inoltre di verificare gli hotspot dell'immagine per verificarne il comportamento previsto.

Quando sei soddisfatto dell’immagine interattiva, puoi pubblicarla.
Vedi Incorporare il visualizzatore di video o immagini in una pagina Web.
Consulta Collegare gli 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 Aggiungere Dynamic Medie Assets alle pagine.

Per visualizzare in anteprima le immagini interattive:

risorse immagini interattive Publish publishing-interactive-image-assets

Per informazioni dettagliate su come pubblicare risorse immagine interattive, consulta Publish Assets.

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

Dopo aver caricato un'immagine del banner, aggiunto punti attivi e pubblicato l'immagine interattiva, puoi aggiungerla alla pagina del sito Web.

I clienti di Experience Manager Sites possono aggiungere l’immagine interattiva trascinando il componente File multimediali interattivi nella pagina. Consulta Aggiungere Dynamic Medie Assets alle pagine.

Se sei un cliente Experience Manager Assets indipendente, puoi aggiungere manualmente l’immagine interattiva al sito web come descritto in questa sezione.

Esempio

Utilizzando il sito Web demo come esempio, l'immagine dei tre singoli utenti è un tag IMG statico:

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

L'integrazione è semplice come rimuovere il tag IMG e sostituirlo con il codice da incorporare copiato da Experience Manager Assets. Il risultato mostra l'immagine interattiva acquistabile nella pagina con tre punti attivi circolari.

Per applicare un ritaglio a un'immagine interattiva acquistabile per un ambiente reattivo, includere nel percorso l'attributo di configurazione dell'immagine interattiva ZoomView.iscommand. In questo caso, viene chiamato il componente ZoomView e iscommand è il comando di server immagini "ritagliate" applicato.

Vedere l'attributo di configurazione ZoomView.iscommand.

Vedere il comando crop image serving.

Ora puoi integrare l’immagine interattiva con un Quickview esistente sul tuo sito web.

Integrare un'immagine interattiva con un Quickview esistente integrating-an-interactive-image-with-an-existing-quickview

L’ultimo passaggio di questo processo è l’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 Quickview è unica ed è necessario un approccio specifico. Di conseguenza, è utile coinvolgere 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:

Queste chiamate non rappresentano necessariamente chiamate API pubbliche indipendenti che vengono 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.

Quando l’immagine interattiva acquistabile sostituisce il passaggio 1 e parzialmente il passaggio 2, l’utente tocca un punto attivo all’interno dell’immagine acquistabile. Tale interazione con l’utente viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati dei punti attivi aggiunti in precedenza a Experience Manager Assets.

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

Il codice di incorporamento restituito da Experience Manager Assets include un gestore eventi pronto all’uso e commentato, come mostrato nel seguente snippet 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, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

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 trattate in precedenza.

Vedi Identificare le variabili hotspot.

Utilizzando i precedenti esempi di URL di Quickview, è possibile vedere come viene costruito l'URL di Quickview in ogni caso:

L’ultimo passaggio per attivare l’URL Quickview e il pannello Quickview richiede l’assistenza di un IT front-end dal tuo lavoro. Possiedono le conoscenze necessarie per sapere come attivare con precisione l’implementazione Quickview dal passaggio corretto, avendo un URL 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 Quickview era identificata come segue:

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

Per ricostruire l'URL nel gestore quickViewActivate, è possibile utilizzare i campi categoryId e SKU. Questi campi sono disponibili nell'oggetto inData 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 una semplice chiamata alla funzione loadQuickView(). Questa funzione accetta un solo argomento, ovvero l’URL dati Quickview. Di conseguenza, l'ultimo passaggio per integrare l'immagine interattiva acquistabile consiste nell'aggiungere la seguente riga di codice al gestore quickViewActivate:

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 di dimostrazione final con l'immagine interattiva completamente integrata.

Creare pop-up personalizzati utilizzando Quickview using-quickviews-to-create-custom-pop-ups

Vedere Creare finestre popup personalizzate® utilizzando Quickview.