Video interattivi

Puoi creare facilmente video interattivi - noti anche come video acquistabili - che guidano la conversione direttamente dal video. Il coinvolgimento dei clienti con il video si svolge in un pannello accanto al lettore video, dove vengono visualizzate informazioni o miniature relative a servizi, prodotti in base alle funzioni presenti nel video. I clienti possono selezionare la miniatura ed essere collegati direttamente al servizio oppure aggiungere l’articolo a un carrello per un acquisto immediato, oppure essere collegati a una pagina web per ulteriori informazioni.

Al termine del video, viene visualizzato un riepilogo visivo di tutte le offerte per attivare una chiamata all’azione. I clienti hanno un'altra opportunità per selezionare l'elemento desiderato. Esperienze fruibili e specifiche, come queste, aumentano il coinvolgimento e le conversioni dei clienti.

Vedere anche Immagini interattive.

Video interattivo in azione

Per visualizzare un video interattivo e acquistabile in azione, seleziona Live Demos, scorri fino all'intestazione Shoppable Media nella pagina, quindi seleziona il video acquistabile.

  • Durante la riproduzione, quando i prodotti vengono utilizzati nel video, il prodotto identico viene visualizzato a destra come immagine in miniatura.

  • Seleziona la miniatura per mettere in pausa il video e aprire la visualizzazione rapida del prodotto. Ad esempio, selezionare l'immagine di anteprima di KitchenAid nel video per vedere una rotazione a 360 gradi del mixer, oppure ingrandirla per vedere i dettagli del mixer.

Un fotogramma da un video interattivo e acquistabileUn fotogramma video da un video interattivo acquistabile.

NOTA

Se crei un video interattivo per avviare una pagina web quando un utente seleziona un'immagine in miniatura, alcuni dispositivi impediscono l'apertura della pagina web a comparsa. In questi casi, è necessario modificare l'impostazione di blocco dei popup sul dispositivo. Ad esempio, su un Apple iPhone 6, accedi a Impostazioni > Safari > Blocca popup, quindi scorri il controllo su Disattivato. Ora, quando si riproduce un video interattivo e si seleziona una miniatura, viene richiesto se si desidera aprire il pop-up. Se si accetta, viene visualizzata la pagina web.

Guarda come vengono creati i video interattivi

Segui una procedura dettagliata su come vengono creati i video interattivi (7 minuti e 30 secondi).
Anche se la procedura dettagliata per i video è contrassegnata con il marchio Assets on Demand, i principi e i passaggi illustrati restano validi per i video interattivi in Adobe Experience Manager Assets.

Adobe webinar sul successo del cliente

Il webinar "Utilizzo di video interattivi, condivisione collegamenti e condivisione YouTube in Experience Manager Assets" illustra come utilizzare i video interattivi e altre funzioni per collegare gli eventi basati sulla conversione ai contenuti di marketing video.

Avvio rapido: Video interattivi

La seguente descrizione dettagliata del flusso di lavoro è stata progettata per aiutarti a iniziare rapidamente a usare i video interattivi in Dynamic Media.

Cerca l'intestazione Esempio all'interno di alcune delle attività di avvio rapido. Contiene una breve esercitazione basata su questa pagina web dimostrativa iniziale a cui non è ancora stata aggiunta l’interattività:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=it?lang=it

Gli esempi illustrano i passaggi necessari per integrare i video interattivi nel sito web.

Al termine dell’esercitazione nell’ultima sezione Esempio , la pagina Web demo finale con il video interattivo completamente integrato si presenta così:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=it?lang=it

Passaggi video interattivi:

  1. (Facoltativo) Identifica le variabili Quickview - Inizia identificando le variabili dinamiche utilizzate dall'implementazione esistente di Quickview. Puoi utilizzare le variabili per mappare le miniature dei prodotti sulla visualizzazione rapida del prodotto corrispondente al momento della creazione del video interattivo. Consulta (Facoltativo) Identificare le variabili Quickview.
    Questo passaggio è necessario solo se sono soddisfatte tutte le seguenti condizioni: ・ Per aggiungere interattività al video, attivare Quickview.
    ・ La tua implementazione di Experience Manager non utilizza un framework di integrazione eCommerce per estrarre i dati dei prodotti in Experience Manager da qualsiasi soluzione eCommerce come IBM® WebSphere® Commerce, Elastic Path, Hybris o Intershop. Consulta Concetti di eCommerce in Experience Manager Assets.

  2. (Facoltativo) Crea un predefinito per visualizzatori video interattivi: personalizza l’aspetto e il comportamento dei vari componenti che compongono il lettore, come lo scorrimento video e le miniature interattive.
    La creazione di un proprio predefinito per visualizzatori video interattivi non è necessaria se invece desideri utilizzare i predefiniti per visualizzatori video interattivi Shoppable_Video_Light o Shoppable_Video_Dark.
    Consulta Creare un predefinito visualizzatore (facoltativo) e Considerazioni speciali per la creazione di un predefinito visualizzatore interattivo.

  3. Carica un video e le relative risorse di immagine associate - Carica un video e le immagini associate che desideri rendere interattive.
    Consulta Caricare un video e le relative risorse miniature associate.

  4. Aggiungi l’interattività al video : aggiungi uno o più segmenti di tempo al video. Quindi, associa le miniature delle immagini all’interno di tali segmenti di tempo. Assegna a ciascuna miniatura immagine un’azione come un collegamento ipertestuale, una visualizzazione rapida o un frammento esperienza.
    Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine di Experience Manager Sites.
    Per terminare, pubblica le risorse video interattive. La pubblicazione crea il codice di incorporamento o l’URL da copiare e applicare alla pagina di destinazione del sito web. Consulta Aggiungi interattività al video.
    Consulta Pubblicare risorse.

  5. Aggiungi un video interattivo al tuo sito web o al tuo sito web in Experience Manager : se utilizzi Experience Manager Sites o eCommerce o entrambi, puoi aggiungere il video interattivo a una pagina web. Trascina il componente File multimediali interattivi sulla pagina nell’Experience Manager. Consulta Aggiungere risorse Dynamic Media alle pagine.
    Utilizza il codice di incorporamento o l’URL per integrare il video interattivo con le esperienze del sito web. Consulta Integrare un video interattivo con il sito web.
    Se utilizzi un WCM di terze parti (Web Content Manager), devi integrare il nuovo video interattivo con l’implementazione Quickview esistente utilizzata sul sito web. Consulta Integrare un video interattivo con un Quickview esistente.
    Aggiungere risorse Dynamic Media alle pagine

(Facoltativo) Identifica le variabili Quickview

NOTA

Questa attività è necessaria solo se sono soddisfatte le seguenti condizioni:

  • Per aggiungere interattività al video, attiva Quickview.
  • La tua implementazione di Experience Manager non utilizza un framework di integrazione eCommerce per estrarre i dati dei prodotti in Experience Manager da qualsiasi soluzione eCommerce come IBM® WebSphere® Commerce, Elastic Path, Hybris o Intershop. Consulta Concetti di eCommerce in Experience Manager Assets.

Se l’implementazione di Experience Manager utilizza eCommerce, puoi saltare questa attività e passare all’attività successiva.

Per iniziare, identifica le variabili dinamiche utilizzate dall’implementazione di Quickview esistente in modo da poter mappare le miniature dei prodotti sul prodotto corrispondente Quickview durante il processo di creazione di video interattivo.

Quando aggiungi segmenti di tempo a un video, assegni un SKU (Stock Keeping Unit) e qualsiasi variabile aggiuntiva a ogni miniatura che aggiungi a un segmento. Tali variabili vengono utilizzate in seguito per visualizzare il prodotto Quickview corretto.

È importante identificare correttamente le variabili necessarie per attivare in modo univoco una visualizzazione rapida del prodotto.

A volte è sufficiente consultare gli specialisti IT responsabili dell'implementazione di Quickview esistente. È probabile che conoscano il set minimo di dati per identificare Quickview nel sistema. Tuttavia, è anche possibile analizzare semplicemente 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 pulsante "Quickview".
  • Il sito web invia una richiesta Ajax al backend per caricare i dati o il contenuto della visualizzazione rapida, 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, quindi, consiste nel visitare diverse aree del sito web esistente in cui è implementata Quickview, attivare la Quickview e acquisire l’URL Ajax inviato dalla pagina web per caricare i dati o il contenuto della Quickview.

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, premi F12 (Windows) o Comando+Opzioni+I (Mac) per aprire il pannello Strumenti per sviluppatori, quindi seleziona la scheda Rete .

  • In Firefox, è possibile attivare il plug-in Firebug premendo F12 (Windows) o Comando+Opzione+I (Mac) e utilizzando la relativa scheda [Net] oppure è possibile utilizzare lo strumento integrato Inspector e la relativa scheda Rete.

  • In Internet Explorer, attivare lo strumento di debug premendo F12.

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. Di solito, 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 complesso della stringa di query 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 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 del prodotto è l’unico elemento dati necessario per aggiungere miniature a un segmento di tempo nel video interattivo di Experience Manager.

Tuttavia, in casi complessi, l’URL Quickview presenta diversi elementi diversi oltre all’SKU del prodotto, come ID categoria, codice colore e codice dimensione. In tali casi, ogni elemento di questo tipo diventa una variabile separata nella definizione dei dati delle miniature di Experience Manager.

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

SKU singolo, trovato nella stringa query.

Gli URL registrati di Quickview 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 del parametro della stringa di query productId= ed è chiaramente un valore SKU. Pertanto, le miniature devono essere compilate solo con campi SKU contenenti 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 miniature di Experience Manager: 6422350843, 1607745002, 0086724882.

SKU e ID categoria nella stringa query.

Gli URL registrati di Quickview 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 viene memorizzato nel parametro prodId e l’ID categoria nel parametro category= .

Di conseguenza, le definizioni delle miniature sono coppie. In altre parole, 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

Esempio

Quando l'approccio di cui sopra viene applicato al sito web Example, hai una pagina web con diverse miniature di prodotto, ognuna con un pulsante "SEE MORE":

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=it?lang=it

Dopo aver attivato tutti i prodotti Quickview disponibili sulla pagina, ottieni il seguente elenco di richieste Quickview effettuate al backend:

  • datafeed/candles-233396346.json
  • datafeed/candles-233978050.json
  • datafeed/candles-234024346.json
  • datafeed/candles-234024356.json
  • datafeed/candles-234024359.json
  • datafeed/cushions-233939848.json
  • datafeed/cushions-234019477.json
  • datafeed/cushions-234019483.json
  • datafeed/furniture-231747479.json
  • datafeed/furniture-232625621.json
  • datafeed/furniture-232625626.json
  • datafeed/furniture-233939810.json
  • datafeed/furniture-233939825.json
  • datafeed/furniture-233939828.json
  • datafeed/furniture-233939853.json
  • datafeed/furniture-233940334.json
  • datafeed/glassware-000064007.json
  • datafeed/glassware-230722193.json
  • datafeed/glassware-233916550.json
  • datafeed/glassware-233916597.json

Osservando le 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 coinvolti due tipi distinti di elementi di dati:

  • Il primo tipo è candele, cuscini, mobili e oggetti di vetro. Puoi chiamare questa "categoria di prodotto".
  • Il secondo tipo è il codice del prodotto, ad esempio 233916597. Si può presumere che sia "SKU prodotto".

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

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

In base a tale analisi, si conclude che per le miniature è possibile utilizzare le due variabili seguenti: categoryId e SKU.

Ora puoi caricare un video e le relative risorse di miniatura associate.

(Facoltativo) Crea un predefinito visualizzatore video interattivo.

Puoi saltare questa attività e passare all’attività successiva se intendi utilizzare uno dei tipi predefiniti predefiniti per visualizzatori video interattivi Shoppable_Video_dark o Shoppable_Video_light predefiniti.

Quando nell’ambiente di authoring viene selezionata una miniatura, viene visualizzata un’anteprima della finestra di dialogo Quickview.

chlimage_1-21

Facoltativamente, puoi creare il tuo predefinito visualizzatore video interattivo personalizzato. È possibile determinare, tra l’altro, lo stile del lettore video, le miniature interattive e la vista a griglia delle miniature visualizzata alla fine del video.

Un predefinito per visualizzatori video interattivi esegue correttamente il rendering del video e di tutti i segmenti della timeline aggiunti. Utilizza anche un esempio di Quickview predefinito quando selezioni una miniatura di prodotto in modalità Anteprima in modo da poterne testare l’interattività prima della pubblicazione.

Dopo aver salvato il predefinito visualizzatore, il relativo stato viene impostato automaticamente su On nella pagina Predefiniti visualizzatore . Lo stato indica che è visibile nel componente Dynamic Media e ogni volta che lo si utilizza per visualizzare l’anteprima di un video. Accertati anche di pubblicare manualmente il nuovo predefinito visualizzatore.

Consulta Creare un nuovo predefinito visualizzatore per creare un proprio predefinito visualizzatore video interattivo.

Caricare un video e le relative risorse di miniatura associate

Se hai già caricato il video e le risorse miniature, procedi a Aggiungi l'interattività al video.

Se hai caricato i video o le immagini errati o desideri eliminare i video o le immagini caricati di cui non hai più bisogno, consulta Elimina risorse.

Per caricare un video e le relative risorse di miniatura associate:

  1. Carica il video e le relative miniature nella cartella o nelle cartelle desiderate.

    Consulta Caricare risorse.
    Consulta Caricare risorse utilizzando la pianificazione dei processi FTP.

    Aggiungi ora l’interattività al video.

Aggiungi interattività al video

Puoi aggiungere segmenti della timeline a un video utilizzando l’editor visivo nella posizione nella pagina Crea video interattivo.

Dopo aver aggiunto i segmenti della timeline, aggiungi immagini in miniatura all’interno di ciascun segmento. Per ogni miniatura aggiunta, applichi un’azione ad essa. Ad esempio, puoi applicare una visualizzazione rapida alla miniatura, oppure assegnare un collegamento ipertestuale ad essa o un frammento esperienza.

Consulta Frammenti esperienza.

NOTA

Gli strumenti di condivisione social media in Video interattivo non sono supportati quando si incorpora 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.

NOTA

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

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

Dopo aver salvato il video interattivo, il video viene immediatamente aperto in Anteprima. Da qui, puoi selezionare un predefinito visualizzatore video interattivo e riprodurre il video per vedere una rappresentazione approssimativa di come appare ai clienti.

Per aggiungere interattività al video:

  1. Nella vista Risorse, individua il video caricato e vuoi renderlo interattivo.

  2. Effettua una delle operazioni seguenti:

    • Passa il puntatore sull'immagine, quindi seleziona Seleziona (icona a forma di segno di spunta). Sulla barra degli strumenti, seleziona Modifica.

    • Passa il puntatore sull'immagine, quindi seleziona Altre azioni (icona a tre punti) > Modifica.

    • Seleziona l’immagine per aprirla nella pagina Vista dettagli . Sulla barra degli strumenti, seleziona Modifica.

  3. Nella pagina Crea video interattivo, effettua una delle seguenti operazioni:

    • Per iniziare la riproduzione del video, selezionare il pulsante Play. Quando un prodotto, un servizio o un dettaglio particolare da evidenziare viene visualizzato, seleziona Aggiungi segmento sulla barra degli strumenti. Ripetere l'operazione fino a quando non si raggiunge la fine del video.

      Per ogni segmento di tempo aggiunto, assegna una o più immagini in miniatura e quindi collega tali miniature alle pagine di prodotto Quickview da acquistare o alle pagine web per ulteriori informazioni.

    • Per iniziare la riproduzione del video, selezionare il pulsante Play. Quando viene visualizzato un particolare prodotto, servizio o dettaglio da evidenziare, selezionare Pausa. Seleziona Aggiungi segmento.

      Continua a riprodurre e mettere in pausa il video nei punti della timeline in cui desideri aggiungere un segmento fino alla fine del video.

  4. (Facoltativo) Trascina la barra sul Cursore scala timeline a sinistra per ingrandire o a destra per ridurre, in modo da controllare quanti dettagli vengono visualizzati sui segmenti aggiunti.

    chlimage_1-22

    A seconda della lunghezza del video, l’impostazione predefinita della Durata del segmento è la seguente:

    Se la lunghezza del video è... Per impostazione predefinita, l’impostazione Durata segmento è impostata su...
    3 minuti o più 60 secondi
    2-3 minuti 30 secondi
    1-2 minuti 20 secondi
    30-60 secondi 10 secondi
    30 secondi o meno 5 secondi

    La timeline del video utilizza la stessa quantità di spazio disponibile sullo schermo. Di conseguenza, quando ridimensiona il browser, i segmenti aggiunti mantengono la larghezza corretta.

    Ad esempio, le tre schermate seguenti stanno utilizzando lo stesso video. La larghezza di ciascun segmento varia a seconda dell’impostazione Scala timeline.

    chlimage_1-23

    Schermata A

    La schermata A precedente mostra la visualizzazione predefinita di un video prodotto di 29 secondi. La scala timeline è impostata sul valore predefinito di 5 secondi.

    chlimage_1-130

    Schermata B

    Nella schermata B precedente, il cursore Scala timeline è stato trascinato dal valore predefinito di 5 secondi a 3 secondi. I singoli timestamp della scala timeline sono ora tutti impostati a intervalli di 3 secondi.

    chlimage_1-25

    Schermata C

    Nella schermata C precedente, l'impostazione Scala timeline è stata spostata a 8 secondi. I segmenti che contengono miniature di prodotto si sono ridotti. Questa funzione è utile se si dispone di un video lungo e si desidera visualizzare una panoramica di più segmenti che normalmente si adattano alla larghezza della pagina.

  5. (Facoltativo) Effettua una delle seguenti operazioni:

    • Per regolare l’ora di inizio e di fine di un segmento.

      Seleziona un segmento, quindi trascina l’ovale blu iniziale o finale per regolare rispettivamente l’ora di inizio e di fine. Il fotogramma video visualizzato si sposta al tempo appropriato nel video, in base alle tue regolazioni. Lo spostamento del segmento della timeline è limitato in base a eventuali segmenti adiacenti nella timeline. Il tempo minimo consentito per i segmenti è di un secondo.

      Utilizza le seguenti scelte rapide per la navigazione per controllare e ottimizzare rapidamente i segmenti video:

      • Per cercare il video direttamente all’inizio di quel segmento, selezionate l’ovale blu iniziale.
      • Per cercare il video direttamente alla fine di quel segmento, seleziona l’ovale blu finale.
      • Per ripristinare la riproduzione video all’inizio di quel segmento, seleziona l’intero segmento.

    chlimage_1-26

    Riposizionamento della fine di un segmento della timeline

    • Eliminazione di un segmento

      Seleziona l’ultimo segmento nella timeline, quindi nella barra degli strumenti seleziona Elimina segmento. Se sono selezionati due o più segmenti, la funzione Elimina segmento è disabilitata.

      Puoi eliminare solo l’ultimo segmento. Ad esempio, se desideri eliminare tutti i segmenti dalla timeline, devi sempre selezionare l’ultimo, quindi selezionare Elimina segmento.

  6. Seleziona un segmento di tempo a cui associare una o più immagini in miniatura.

  7. A destra del video, seleziona la scheda Contenuto .

  8. Nella scheda Contenuto , seleziona Seleziona risorse, quindi sfoglia e seleziona tutte le risorse di immagine che desideri utilizzare con il video. Le risorse selezionate vengono aggiunte al pannello Selettore risorse della scheda Contenuto .

  9. Nel selettore delle risorse sotto la scheda Contenuto, effettua una delle seguenti operazioni:

    Per associare una miniatura al segmento della timeline selezionato

    Seleziona l’immagine nel pannello del selettore risorse a destra.

    Puoi aggiungere tutte le miniature desiderate in un segmento della timeline. Per ogni immagine selezionata, un segno di spunta compare sull’immagine nel selettore delle risorse.

    Rimozione di una miniatura dal segmento della timeline selezionato

    Effettua una delle operazioni seguenti:

    • Nel pannello del selettore delle risorse, seleziona un’immagine con un segno di spunta per deselezionarla. La risorsa immagine viene rimossa dal segmento della timeline.
    • Nel segmento della timeline selezionato, seleziona un’immagine, quindi nella barra degli strumenti seleziona Elimina prodotto.

    Selettore risorse

    Quando si seleziona un’immagine nel pannello del selettore delle risorse, questa viene aggiunta al segmento della timeline selezionato.

  10. Seleziona una singola miniatura all’interno di uno dei segmenti della timeline, quindi seleziona la scheda Azioni .

  11. Effettua una delle operazioni seguenti:

    <>
    Per associare l’immagine di miniatura selezionata a una visualizzazione rapida

    In Tipo azione, seleziona Quickview.

    Se sei un cliente Experience Manager Sites ed e-commerce:

    • Il campo di testo Valore SKU è precompilato con lo SKU (Stock Keeping Unit) del prodotto selezionato, che è un identificatore univoco per ogni prodotto o servizio distinto offerto. Questo valore viene popolato automaticamente quando l’immagine è associata a un prodotto in Experience Manager Commerce.
    • Se lo SKU prepopolato non è corretto, seleziona l’icona Selettore prodotto (lente di ingrandimento) per aprire la pagina Seleziona prodotto . Seleziona il prodotto da utilizzare, quindi fai clic sul segno di spunta nell’angolo superiore destro della pagina per tornare all’Editor video interattivo.

    Se sei non un cliente Experience Manager Sites o Ecommerce

    • Consulta Identificazione delle variabili dei punti attivi. Le variabili devono essere definite.
    • Per impostazione predefinita, questo campo SKU utilizza il nome file della risorsa immagine senza estensione. Se segui una convenzione di denominazione standard per i file basati su SKU, in genere questo nome file non richiede alcuna modifica aggiuntiva.
    • In caso contrario, modifica il valore predefinito e inserisci il valore SKU corretto. 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 Quickview in modo che il sistema sappia associare l'immagine selezionata a una particolare visualizzazione rapida SKU.

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

    Per associare l’immagine di miniatura selezionata a un collegamento ipertestuale

    In Tipo azione, selezionare Collegamento ipertestuale, quindi effettuare una delle seguenti operazioni:

    • Se sei un cliente di Experience Manager Sites, seleziona l’icona Selettore sito (cartella) per passare a una pagina web. Il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine di Experience Manager Sites.
    • Se si è un cliente Dynamic Media 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 o nella scheda corrente.

    Per associare l’immagine in miniatura selezionata a un frammento esperienza

    In Tipo azione, seleziona Frammento esperienza, quindi procedi come segue:

    • Se sei un cliente di Experience Manager Sites, seleziona l’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza . Seleziona il frammento esperienza da utilizzare, quindi seleziona Seleziona nell’angolo in alto a destra della pagina, in modo da poter tornare al pannello Azioni della pagina precedente.
      Consulta Frammenti esperienza.
    • Specifica la larghezza e l’altezza del frammento esperienza come desideri che appaia sul video.
    Nota: Gli strumenti di condivisione social media in Video interattivo non sono supportati quando si incorpora 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.

    Per modificare un’azione già assegnata a un’immagine miniatura All’interno di un segmento della timeline, seleziona una miniatura con un collegamento a catena a destra dell’etichetta di testo. Il collegamento a catena indica che è stata assegnata un’azione. Seleziona la scheda Azioni per apportare le modifiche desiderate.
    Per modificare l’etichetta di testo di un’immagine miniatura

    Per impostazione predefinita, l’etichetta di testo utilizza il campo di metadati Title dell’immagine miniatura. Se Title non è presente, viene utilizzato il nome del file dell'immagine miniatura, ma senza l'estensione.

    Per modificare l’etichetta di testo di un’immagine miniatura, nella scheda Azioni , direttamente sotto la risorsa immagine visualizzata, immetti il testo desiderato. Vedi la schermata sottostante.

    La nuova etichetta di testo viene utilizzata solo dal lettore video stesso e il testo in miniatura visualizzato nel segmento della timeline. La modifica dell’etichetta non influisce sul campo dei metadati Titolo dell’immagine miniatura né sul relativo nome file.

    Per ripristinare una modifica: Nell’angolo in alto a destra della pagina, seleziona Annulla o Ripristina.

    experiencefragment_interactivevideos

    All’immagine miniatura viene aggiunta una nuova etichetta di testo.

  12. Effettua una delle operazioni seguenti:

    • Ripeti i passaggi 6-11 per aggiungere altre immagini in miniatura ai segmenti della timeline nel video.
    • Procedi al passaggio facoltativo 13.
  13. (Facoltativo) Effettua una delle seguenti operazioni:

    • Segmento di unione : puoi combinare due segmenti adiacenti (con o senza le miniature di prodotto ad essi assegnate) in un unico segmento.

      Nella timeline, seleziona due o più segmenti contigui da unire in uno. Non ci sono maniglie di trascinamento ovali blu sui due segmenti selezionati nella schermata sottostante.

      Seleziona Unisci segmento sulla barra degli strumenti.
      chlimage_1-134

    Unione di due segmenti selezionati di cinque secondi in un segmento di dieci secondi.

    • Segmento diviso : puoi dividere un singolo segmento in due segmenti con tempo uguale. Se al segmento sono già assegnate miniature di prodotto, queste vengono combinate nel segmento a sinistra.

      Nella timeline, seleziona un segmento da dividere in due, quindi seleziona Dividi segmento nella barra degli strumenti.

      Selezionando due o più segmenti, disattiva la funzione Segmento diviso .
      chlimage_1-135

    Suddivisione di un segmento selezionato di dieci secondi in due segmenti di cinque secondi ciascuno.

  14. Nell’angolo in alto a destra della pagina Crea video interattivo viene visualizzato il nome del predefinito visualizzatore attualmente selezionato utilizzato con il video. Seleziona il nome se desideri selezionare un predefinito visualizzatore diverso.

    Ad esempio, il predefinito per visualizzatori Shoppable_Video_light consente di riprodurre il video con un’area di visualizzazione bianca accanto al video. L'area di visualizzazione è quella in cui vengono visualizzate le miniature selezionabili durante la riproduzione. Il predefinito per visualizzatori Shoppable_Video_dark consente di riprodurre il video con un’area di visualizzazione nera accanto al video.

    Se hai creato il tuo predefinito per visualizzatori video interattivi, puoi visualizzarlo nell’elenco dei predefiniti tra i quali puoi scegliere.

    Al termine, seleziona Salva.

    NOTA

    Quando salvi il video interattivo, con esso viene salvato automaticamente un file associato .vtt. Il file .vtt viene salvato nella cartella _VTT nella directory principale di Risorse. Il file e la cartella sono necessari affinché il video interattivo possa essere riprodotto correttamente sul sito web. Non spostare, modificare o eliminare la cartella _VTT o il relativo contenuto.

  15. Pubblica il video interattivo. La pubblicazione crea il codice di incorporamento o l’URL da copiare e incollare nelle esperienze del sito web.

    Se hai aggiunto interattività con Quickview, utilizza solo il codice di incorporamento; se hai aggiunto l’interattività con le pagine web con collegamenti ipertestuali, puoi anche utilizzare l’URL pubblicato. Tuttavia, il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine di Experience Manager Sites.

    Consulta Pubblicare risorse.

    NOTA

    Per pubblicare un video acquistabile con Quickview, accertati anche di pubblicare separatamente ciascuna risorsa immagine correlata al video dalla tua area di e-commerce.

    Dopo aver aggiunto i segmenti della timeline e pubblicato il video interattivo, puoi aggiungerlo alla pagina di destinazione del sito web esistente. Consulta Integrare un video interattivo con il sito web.

Pubblicare risorse video interattive

Per informazioni dettagliate su come pubblicare le risorse video interattive, consulta Pubblicare risorse .

Integrare un video interattivo con il sito web

Dopo aver caricato un video, aggiunto dei segmenti della timeline e pubblicato il video interattivo, puoi aggiungerlo al sito web esistente.

Se sei un cliente di Experience Manager Sites, puoi aggiungere il video interattivo trascinando il componente File multimediali interattivi nella pagina. Consulta Aggiungere risorse Dynamic Media alle pagine.

Se sei un cliente di Experience Manager Assets autonomo, puoi aggiungere manualmente il video interattivo al tuo sito web come descritto in questa sezione.

  1. Copia il codice di incorporamento o l’URL del video interattivo pubblicato.
    Consulta Incorporare il visualizzatore di video o immagini in una pagina Web.
    Se hai aggiunto interattività con Quickview, utilizza solo il codice di incorporamento; se hai aggiunto l’interattività con le pagine web con collegamenti ipertestuali, puoi anche utilizzare l’URL pubblicato. Tuttavia, il metodo di collegamento basato su URL non è possibile se il contenuto interattivo include collegamenti con URL relativi, in particolare con le pagine di Experience Manager Sites.

  2. Nel codice della pagina web del target, identifica dove si trova il video statico.

  3. Rimuovi il video statico e sostituisci il codice con il codice di incorporamento o l’URL copiato da Experience Manager Assets, così come è.
    Il codice da incorporare copiato è impostato per un ambiente reattivo in modo che si adatti automaticamente all’area precedentemente occupata dal video statico.

NOTA

A questo punto, se hai aggiunto l’interattività solo con pagine web collegate ipertestuale, puoi farlo.

Tuttavia, se hai aggiunto interattività per attivare una visualizzazione rapida, le miniature accanto al video interattivo sono solo a scopo di visualizzazione; non sono ancora integrati con la visualizzazione rapida esistente. In questo caso, ora devi integrare il video interattivo con la visualizzazione rapida esistente sul sito web.

Esempio

Utilizzo del sito web demo come esempio:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-0.html?lang=it?lang=it

Il codice di incorporamento è standard:

<style type="text/css">
 #s7video_div.s7videoviewer{
   width:100%;
   height:auto;
 }
</style>

<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/VideoViewer.js"></script>
<div id="s7video_div"></div>
<script type="text/javascript">
 var s7videoviewer = new s7viewers.VideoViewer({
  "containerId" : "s7video_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Video",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "posterimage": "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 }).init();
</script>

L'integrazione è semplice come rimuovere il codice di incorporamento video e sostituirlo con il codice di incorporamento video interattivo da Experience Manager. Puoi vedere il risultato al seguente URL. Mentre mostra un video interattivo presente sulla pagina, non è ancora integrato con la visualizzazione rapida esistente:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-1.html?lang=it?lang=it

Integrare un video interattivo con una Quickview esistente

NOTA

Questa attività si applica solo se sei un cliente di Experience Manager Assets autonomo.

L’ultimo passaggio di questo processo consiste nell’integrare il video interattivo con un’implementazione Quickview esistente utilizzata sul sito web. Non esiste una soluzione all’integrazione che funzioni per tutti i casi. Ogni implementazione di Quickview è univoca. Di conseguenza, è necessario un approccio specifico che implichi 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:

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

Queste chiamate non rappresentano chiamate API pubbliche indipendenti che possono essere 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 un utente seleziona una miniatura all’interno del video interattivo, il visualizzatore gestisce l’interazione dell’utente sostituendo il passaggio 1 e in parte il passaggio 2. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati delle miniature precedentemente aggiunti all’Experience Manager.

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

  • Ascolta un evento emesso dal video interattivo.
  • Crea un URL Quickview basato sui dati delle miniature.
  • Attiva il processo di caricamento della visualizzazione rapida dal back-end e di rendering sullo schermo per la visualizzazione.

Inoltre, il visualizzatore video interattivo supporta la modalità di funzionamento a schermo intero. L’utente finale attiva la visualizzazione rapida selezionando una miniatura senza uscire dalla schermata completa. Per ottenere questa funzionalità, devi modificare il codice front-end in modo che la finestra di dialogo modale Quickview sia collegata al contenitore del visualizzatore. Non aggiungere il BODY del documento o altri elementi di pagina web non disponibili quando il visualizzatore è in modalità a schermo intero. Il codice che esegue questo lavoro deve ascoltare uno o più callback del visualizzatore inviati dopo il visualizzatore che viene caricato sulla pagina.

Il codice di incorporamento restituito da Experience Manager dispone già di un gestore eventi ready-to-use. Viene commentato come visto nel seguente frammento di codice evidenziato:

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "config2": "/etc/dam/presets/analytics",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 /* // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
    //To pass other parameter from the hotspot, you 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
    },
"initComplete":function() {
    //--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
    var popup = document.getElementById('quickview_div'); // get custom quickview container
    popup.parentNode.removeChild(popup); // remove it from current DOM
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(popup); //Attach custom quickview container to viewer
    }
   });
 */
 s7interactivevideoviewer.init();
</script>

Pertanto, è solo necessario rimuovere il commento dallo snippet di codice evidenziato sopra e sostituire il corpo dei gestori fittizi con codice specifico per la particolare pagina web.

Nel codice di incorporamento standard sono presenti due gestori di callback predefiniti: quickViewActivate e initComplete. Il gestore quickViewActivate viene attivato quando una miniatura viene selezionata nel visualizzatore. Utilizzalo per integrare il visualizzatore con la logica di attivazione Quickview. Il gestore initComplete viene attivato solo una volta quando il visualizzatore viene caricato nella pagina. Questo gestore viene utilizzato per regolare la posizione della finestra di dialogo Quickview nel DOM della pagina Web.

Il processo di costruzione dell’URL di visualizzazione rapida è opposto al processo di identificazione delle variabili di miniatura descritte in precedenza in questo argomento. Utilizzando gli esempi di URL Quickview precedentemente identificati, puoi vedere come viene costruito l’URL Quickview in ogni caso:

SKU singolo, trovato nella stringa query

s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
SKU singolo, trovato nel percorso URL s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

SKU e ID categoria nella stringa query

s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/quickView/product/?category=" + inData.categoryId + "&prodId=" + inData.sku; }, });

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 dimostrativo per integrare completamente un video interattivo con il codice Quickview. In precedenza, in questo argomento, la struttura dell’URL di visualizzazione rapida era identificata come segue:

/datafeed/$CategoryId$-$SKU$.json

È facile ricostruire questo URL all'interno del gestore quickViewActivate utilizzando i campi categoryId e sku disponibili nell'oggetto inData passato al gestore tramite il codice del visualizzatore come illustrato di seguito:

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 di funzione loadQuickView(). Questa funzione accetta un solo argomento, ovvero l’URL dei dati Quickview. Quindi l'ultimo passo per integrare il video interattivo è quello di aggiungere la seguente riga di codice al gestore quickViewActivate:

loadQuickView(quickViewUrl);

Infine, accertati che la finestra di dialogo Quickview sia associata all’elemento contenitore del visualizzatore. Il codice di incorporamento predefinito fornisce passaggi di esempio per ottenere questa funzionalità. Per ottenere un riferimento all’elemento contenitore del visualizzatore, puoi utilizzare le seguenti righe di codice:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);

Dove inner_container è un riferimento a un elemento DIV gestito dal visualizzatore. La finestra di dialogo deve essere un elemento secondario di tale elemento DIV.

I passaggi per individuare effettivamente l’elemento della finestra di dialogo modale e allegarlo al contenitore di cui sopra sono specifici per casi specifici. Anche in questo caso, puoi chiedere aiuto allo sviluppatore front-end che abbia familiarità con l’implementazione Quickview necessaria.

Se utilizzi il sito web di esempio, la finestra di dialogo modale Quickview viene implementata come DIV con l’ID quickview-modale allegato direttamente al documento BODY. Pertanto, il codice per spostare tale finestra di dialogo nel contenitore del visualizzatore è altrettanto semplice:

var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
var inner_container = document.getElementById(sdkContainerId);
inner_container.appendChild(document.getElementById("quickview-modal"));

Il codice sorgente completo è il seguente:

<style type="text/css">
 #s7interactivevideo_div.s7interactivevideoviewer{
   width:100%;
   height:auto;
 }
</style>
<script type="text/javascript" src="https://demos-pub.assetsadobe.com/etc/dam/viewers/s7viewers/html5/js/InteractiveVideoViewer.js"></script>

<div id="s7interactivevideo_div"></div>
<script type="text/javascript">
 var s7interactivevideoviewer = new s7viewers.InteractiveVideoViewer({
  "containerId" : "s7interactivevideo_div",
  "params" : {
   "serverurl" : "https://adobedemo62-h.assetsadobe.com/is/image",
   "contenturl" : "https://demos-pub.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Video_light",
   "videoserverurl": "https://gateway-na.assetsadobe.com/DMGateway/public/demoCo",
   "interactivedata": "content/dam/_VTT/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4.svideo.vtt",
   "VideoPlayer.contenturl": "https://adobedemo62-h.assetsadobe.com/is/content",
   "asset" : "/content/dam/marketing/shoppable-video/john-lewis/shoppable-video-john-lewis-2014.mp4" }
 })
 // Example of interactive video event for quickview.
   s7interactivevideoviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku; //SKU for product ID
     var categoryId=inData.categoryId; //categoryId
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   "initComplete":function() {
    //--- Attach quickview popup to viewer container so popup will work in fullscreen mode ---
    var sdkContainerId = s7interactivevideoviewer.getComponent("container").getInnerContainerId(); // get viewer container component
    var inner_container = document.getElementById(sdkContainerId);
    inner_container.appendChild(document.getElementById("quickview-modal"));
    }
   });
 s7interactivevideoviewer.init();
</script>

Il sito web demo finale con il video interattivo completamente integrato si presenta così:

https://experienceleague.adobe.com/tools/dynamic-media-demo/shoppable-video/john-lewis/landing-3.html?lang=it?lang=it

Creare pop-up personalizzati utilizzando Quickview

Consulta Creare pop-up personalizzati utilizzando Quickview.

In questa pagina