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 toccare 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à di toccare l’elemento desiderato. Esperienze specifiche e fruibili, come queste, aumentano il coinvolgimento e la conversione dei clienti.

Vedere anche Immagini interattive.

Video interattivo in azione

Per visualizzare un video interattivo e acquistabile in azione, fai clic su Live Demos, scorri fino all'intestazione Shoppable Media nella pagina, quindi fai clic sul video acquistabile.

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

  • Fai clic sulla miniatura per mettere in pausa il video e aprire la visualizzazione rapida del prodotto. Ad esempio, fai clic sull'immagine della miniatura di KitchenAid nel video per visualizzare una visualizzazione a 360 gradi del mixer, oppure ingrandisci 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 fa clic su un'immagine in miniatura, alcuni dispositivi bloccheranno 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, tocca Impostazioni > Safari > Blocca popup, quindi sposta il controllo su Disattivato. Ora, quando si riproduce un video interattivo e si fa clic su 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 la procedura dettagliata della durata di 7 minuti e 30, durante la quale avviene la creazione dei video interattivi .
Anche se la procedura dettagliata per i video è contrassegnata con la dicitura Assets on Demand, i principi e i passaggi illustrati restano validi per i video interattivi di AEM Assets.

Adobe webinar sul successo del cliente

Il webinar "Utilizzo di video interattivi, condivisione collegamenti e condivisione YouTube in AEM 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://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

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://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html

Passaggi video interattivi:

  1. (Facoltativo) Identificazione delle 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) Identificazione delle variabili Quickview.
    Tieni presente che questo passaggio è necessario solo se sono soddisfatte tutte le seguenti condizioni: ・ Per aggiungere interattività al video, attiva le visualizzazioni rapide.
    ・ La tua implementazione di AEM utilizza not un framework di integrazione eCommerce per estrarre i dati dei prodotti in AEM da qualsiasi soluzione eCommerce come IBM Websphere Commerce, Elastic Path, hybris o Intershop. Vedi Concetti di eCommerce in AEM Assets.

  2. (Facoltativo) Creazione di un predefinito visualizzatore video interattivo: personalizza l’aspetto e il comportamento di 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 Creazione di un nuovo predefinito visualizzatore (facoltativo) e Considerazioni speciali per la creazione di un predefinito visualizzatore interattivo.

  3. Caricamento di un video e delle relative risorse di immagine associate - Caricamento di un video e delle immagini associate da rendere interattive.
    Consulta Caricamento di un video e delle relative miniature associate.

  4. Aggiunta di 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 AEM Sites.
    Per terminare, pubblica le risorse video interattive. La pubblicazione crea il codice di incorporamento o l’URL che verrà successivamente copiato e applicato alla pagina di destinazione del sito web.Consulta Aggiunta di interattività al video.
    Consulta Pubblicazione di risorse.

  5. Aggiunta di un video interattivo al sito web o al sito web in
    AEMIse utilizzi AEM Sites, eCommerce AEM o entrambi, puoi aggiungere il video interattivo direttamente a una pagina web in AEM trascinando il componente File multimediali interattivi sulla pagina. Consulta Aggiunta di 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 Integrazione di 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 Integrazione di un video interattivo con una visualizzazione rapida esistente.
    Aggiunta di Risorse multimediali dinamiche alle pagine

(Facoltativo) Identificazione delle variabili Quickview

NOTA

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

  • Per aggiungere interattività al video, attiva le Quickview.
  • La tua implementazione di AEM non utilizza un framework di integrazione eCommerce per estrarre i dati dei prodotti in AEM da qualsiasi soluzione eCommerce come IBM Websphere Commerce, Elastic Path, hybris o Intershop. Vedi Concetti di eCommerce in AEM Assets.

Se l’implementazione di AEM 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 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 può essere sufficiente consultare gli specialisti IT responsabili dell'implementazione di Quickview esistente. È probabile che conoscano 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’utente attiva un elemento dell’interfaccia utente sul sito web. Ad esempio, facendo clic su 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 fai clic sulla 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. 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 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 in AEM.

Tuttavia, in casi complessi, l’URL Quickview presenta diversi elementi diversi rispetto allo SKU del prodotto, come ID categoria, codice colore e così via. In tali casi, ogni elemento di questo tipo diventa una variabile separata nella definizione dei dati di miniatura in AEM.

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 da campi SKU 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 miniature AEM: 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 nostro sito web Example, abbiamo una pagina web con una serie di miniature di prodotto, ognuna con un pulsante "SEE MORE":

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

Dopo aver attivato tutte le Quickview del prodotto 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 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 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) Creazione di un predefinito visualizzatore video interattivo

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

Quando si fa clic su una miniatura nell’ambiente di authoring, 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 fai clic su una miniatura di prodotto in modalità Anteprima per verificarne l’interattività prima della pubblicazione.

Dopo aver salvato il predefinito visualizzatore, lo stato relativo 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 Creazione di un nuovo predefinito visualizzatore per creare un proprio predefinito visualizzatore video interattivo.

Caricamento delle risorse video e delle miniature associate

Se hai già caricato il video e le risorse miniature, procedi a Aggiunta di 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 Eliminazione delle 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 Caricamento delle risorse.
    Consulta Caricamento delle risorse tramite la pianificazione dei processi FTP.

    Aggiungi ora l’interattività al video.

Aggiunta di 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 incorpori il visualizzatore in un Frammento esperienza. Per ovviare a 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.

NOTA

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.

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 apparirà 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 tocca Seleziona (icona a forma di segno di spunta). Sulla barra degli strumenti, tocca Modifica.

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

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

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

    • Toccare il pulsante Play per iniziare a riprodurre il video. Quando un particolare prodotto, servizio o dettaglio da evidenziare viene visualizzato, tocca 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, puoi assegnare una o più immagini in miniatura e quindi collegare tali miniature alle pagine di prodotto Quickview da acquistare per i clienti o alle pagine web per ulteriori informazioni.

    • Toccare il pulsante Play per iniziare a riprodurre il video. Quando un particolare prodotto, servizio o dettaglio da evidenziare viene visualizzato, toccare Pausa. Tocca 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) La barra sul Cursore scala timeline può essere trascinata a sinistra per ingrandire o a destra per ridurre, permettendoti così di controllare il livello di dettagli che vengono visualizzati nei 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 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:

      • Tocca l’ovale blu iniziale per cercare il video direttamente all’inizio di quel segmento.
      • Tocca l’ovale blu finale per cercare il video direttamente alla fine di quel segmento.
      • Tocca l’intero segmento per restituire la riproduzione video all’inizio del segmento

    chlimage_1-26

    Riposizionamento della fine di un segmento della timeline

    • Eliminazione di un segmento

      Seleziona l’ultimo segmento nella timeline, quindi tocca Elimina segmento nella barra degli strumenti. 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 sulla timeline, devi sempre selezionare l’ultimo segmento, quindi toccare Elimina segmento.

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

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

  8. Nella scheda Contenuto, tocca 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

    Tocca 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, tocca un’immagine con un segno di spunta per deselezionarla. La risorsa immagine viene rimossa dal segmento della timeline.
    • Nel segmento della timeline selezionato, tocca un’immagine, quindi sulla barra degli strumenti, tocca Elimina prodotto.

    Selettore risorse

    Toccando 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 tocca la scheda Azioni .

  11. Effettua una delle operazioni seguenti:

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

    In Tipo azione, tocca Quickview.

    Se sei un cliente AEM 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. Viene compilato automaticamente quando l’immagine è associata a un prodotto in AEM Commerce.
    • Se lo SKU prepopolato non è corretto, tocca o fai clic sull’icona Selettore prodotto (lente di ingrandimento) per aprire la pagina Seleziona prodotto . Tocca o fai clic sul prodotto che desideri utilizzare, quindi tocca il segno di spunta nell’angolo in alto a destra della pagina per tornare all’Editor video interattivo.

    Se sei non un cliente AEM Sites o Ecommerce

    • Consulta Identificazione delle variabili dei punti attivi. Sarà necessario definire queste variabili.
    • 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 non sono necessarie modifiche aggiuntive.
    • 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 mappata a una particolare visualizzazione rapida SKU.

    (Facoltativo) Se all'interno di Quickview sono presenti altre variabili che è necessario utilizzare per identificare ulteriormente un prodotto, toccare 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, tocca Collegamento ipertestuale, quindi effettua una delle seguenti operazioni:

    • Se sei un cliente AEM Sites, tocca 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 AEM 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, tocca Frammento esperienza, quindi procedi come segue:

    • Se sei un cliente AEM Sites, tocca o fai clic sull’icona Ricerca (lente di ingrandimento) per aprire la pagina Frammento esperienza . Tocca o fai clic sul frammento esperienza da utilizzare, quindi tocca Seleziona nell’angolo in alto a destra della pagina per tornare al pannello Azioni della pagina precedente.
      Consulta Frammenti esperienza.
    • Specifica la larghezza e l’altezza del frammento esperienza così come apparirà sul video.
    Nota: Gli strumenti di condivisione social media in Video interattivo non sono supportati quando incorpori il visualizzatore in un Frammento esperienza. Per ovviare a 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.

    Per modificare un’azione già assegnata a un’immagine miniatura All’interno di un segmento della timeline, tocca un’immagine in miniatura con un collegamento a catena a destra dell’etichetta di testo. Il collegamento a catena indica che è stata assegnata un’azione. Tocca 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 l'illustrazione qui sotto.

    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 apportata Vicino all’angolo superiore destro della pagina, tocca 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, tocca due o più segmenti contigui da unire in uno. Nell’illustrazione seguente non sono presenti maniglie di trascinamento ovali blu sui due segmenti selezionati.

      Tocca 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, tocca un segmento da dividere a metà, quindi tocca 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. Tocca il nome per selezionare un altro predefinito per visualizzatori.

    Ad esempio, il predefinito per visualizzatori Shoppable_Video_light consente di riprodurre il video con un’area di visualizzazione bianca adiacente al video. L'area di visualizzazione è quella in cui vengono visualizzate le miniature cliccabili 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, lo vedrai anche nell’elenco dei predefiniti tra cui puoi scegliere.

    Al termine, tocca Salva.

    NOTA

    Quando salvi il video interattivo, con esso viene salvato automaticamente un file associato .vtt. Il file .vttviene salvato nella cartella principale _VTT di Assets. 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 collegamenti alle pagine AEM Sites.

    Consulta Pubblicazione di risorse.

    NOTA

    Per pubblicare un video acquistabile con Quickview, accertati anche di pubblicare separatamente dall’area di e-commerce ciascuna delle risorse immagine correlate al video.

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

Pubblicazione delle risorse video interattive

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

Integrazione di 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 AEM Sites, puoi aggiungere il video interattivo trascinando il componente File multimediali interattivi nella pagina. Consulta Aggiunta di risorse Dynamic Media alle pagine.

Se sei un cliente AEM 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 Incorporamento del 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 collegamenti alle pagine AEM 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 AEM Assets, così come è.
    Il codice da incorporare copiato è impostato per un ambiente reattivo, pertanto deve adattarsi 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 adiacenti al video interattivo sono solo a scopo di visualizzazione; non sono ancora integrati con le visualizzazioni rapide esistenti. In questo caso, è ora necessario integrare il video interattivo con le Quickview esistenti sul sito web.

Esempio

Utilizzo del sito web demo come esempio:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-0.html

Nota che si tratta di codice di incorporamento video 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 AEM. Puoi vedere il risultato al seguente URL. Mentre mostra un video interattivo presente sulla pagina, non è ancora integrato con le Quickview esistenti:

https://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-1.html

Integrazione di un video interattivo con una visualizzazione rapida esistente

NOTA

Questa attività si applica solo se sei un cliente AEM 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 molto probabilmente implichi l'assistenza di un personale 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 potrebbero non rappresentare chiamate API pubbliche indipendenti che possono essere richiamate dalla logica della pagina web da un passaggio arbitrario. Si tratta invece di una chiamata concatenata in cui ogni passaggio successivo viene nascosto nell’ultima fase (callback) del passaggio precedente.

Contemporaneamente alla sostituzione del passaggio 1 e in parte del passaggio 2, quando un utente fa clic su una miniatura all’interno del video interattivo, l’interazione dell’utente viene gestita dal visualizzatore. Il visualizzatore restituisce un evento alla pagina web che contiene tutti i dati delle miniature precedentemente aggiunti a AEM.

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 le visualizzazioni rapide facendo clic su 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 un altro callback del visualizzatore che viene inviato dopo il caricamento del visualizzatore sulla pagina.

Il codice di incorporamento restituito da AEM 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 si fa clic su una miniatura 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 i nostri 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 passaggio necessario 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 alcuni 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.

Nel caso del 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://marketing.adobe.com/resources/help/en_US/dm/shoppable-video/john-lewis/landing-3.html

Utilizzo delle visualizzazioni rapide per creare finestre a comparsa personalizzate

Consulta Utilizzo di Quickview per creare pop-up personalizzati.

In questa pagina

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now