Vídeos interativos interactive-videos

Você pode criar vídeos interativos com facilidade (também conhecidos como vídeos que podem ser comprados), que impulsionam a conversão diretamente do vídeo. O envolvimento do cliente com o vídeo ocorre em um painel ao lado do reprodutor de vídeo, onde as miniaturas de serviços, informações ou produtos relacionados são roladas para a exibição com base no que é apresentado no vídeo. Os clientes podem selecionar a miniatura e ser vinculados diretamente ao serviço, adicionar o item a um carrinho de compras para compra imediata ou ser vinculados a uma página da Web para obter mais informações.

Quando o vídeo termina, um resumo visual de todas as ofertas é exibido para orientar um plano de ação. Os clientes têm outra oportunidade de selecionar o item que desejam. Experiências acionáveis e específicas como essas aumentam os envolvimentos e as conversões do cliente.

Consulte também Imagens interativas.

Vídeo interativo em ação interactive-video-in-action

Para ver um vídeo interativo e que pode ser comprado, selecione Demonstrações ao Vivo, role até o cabeçalho Mídia que pode ser comprada da página e selecione o vídeo que pode ser comprado.

Uma captura de quadro de vídeo de um vídeo interativo que pode ser comprado.

Veja como os vídeos interativos são criados watch-how-interactive-videos-are-created

Reproduza uma apresentação sobre como os vídeos interativos são criados (7 minutos e 30 segundos).
Embora a apresentação em vídeo tenha a marca Assets on Demand, os princípios e etapas ainda se aplicam a Vídeo interativo no Adobe Experience Manager Assets.

Webinário de soluções para o cliente do Adobe adobe-customer-success-webinar

O webinário "Uso de vídeo interativo, compartilhamento de links e compartilhamento do YouTube no Experience Manager Assets" ensina como usar vídeo interativo e outros recursos para vincular eventos orientados por conversão ao conteúdo de marketing em vídeo.

Início rápido: vídeos interativos quick-start-interactive-videos

A descrição do fluxo de trabalho passo a passo a seguir foi projetada para ajudar você a começar a usar os vídeos interativos no Dynamic Media com rapidez.

Procure o cabeçalho Exemplo em algumas tarefas do Início rápido. Ele contém um breve tutorial baseado nesta página de demonstração inicial que não ainda tem interatividade adicionada:

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

Os Exemplos ajudam a ilustrar as etapas da integração de vídeos interativos em seu próprio site.

Ao concluir o tutorial na última seção de Exemplo, a página da Web de demonstração final com o vídeo interativo totalmente integrado será semelhante ao seguinte:

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

Etapas de vídeo interativo:

(Opcional) Identificar variáveis do Quickview optional-identifying-quickview-variables

Comece identificando as variáveis dinâmicas usadas pela sua implementação do Quickview existente, para que você possa mapear as miniaturas de produtos para o Quickview do produto correspondente durante o processo de criação interativo de vídeos.

Ao adicionar segmentos de tempo a um vídeo, você atribui uma SKU (Stock Keeping Unit, Unidade de manutenção de estoque) e quaisquer variáveis adicionais a cada miniatura adicionada a um segmento. Essas variáveis são usadas posteriormente para exibir o produto Quickview correto.

É importante identificar corretamente quais variáveis são necessárias para acionar exclusivamente uma Quickview do produto.

Às vezes, basta consultar especialistas de TI responsáveis pela implementação existente do Quickview. Eles provavelmente conhecerão o conjunto mínimo de dados para identificar o Quickview no sistema. No entanto, também é possível simplesmente analisar o comportamento existente do código front-end.

A maioria das implementações do Quickview usa o seguinte paradigma:

A abordagem, portanto, é visitar diferentes áreas do seu site existente, onde o Quickview é implementado, acionar o Quickview e capturar o URL do Ajax enviado pela página da Web para carregar os dados ou conteúdo do Quickview.

Normalmente, não há necessidade de usar ferramentas de depuração especializadas. Navegadores da Web modernos possuem inspetores da Web que fazem um trabalho adequado. A seguir estão alguns exemplos de navegadores da Web que incluem inspetores da Web:

Quando o monitoramento de rede estiver ativado no navegador, acione o Quickview na página.

Agora, localize o URL do Ajax Quickview no log de rede e copie o URL gravado para análise futura. Normalmente, quando você aciona a Visualização rápida, várias solicitações são enviadas para o servidor. Normalmente, o URL do Ajax Quickview é um dos primeiros na lista. Ele tem uma parte ou um caminho de cadeia de caracteres de consulta complexo e seu tipo MIME de resposta é text/html, text/xml ou text/javascript.

Durante esse processo, é importante visitar diferentes áreas do site, com diferentes categorias e tipos de produtos. O motivo é que os URLs do Quickview podem ter partes comuns para uma determinada categoria de site, mas só podem ser alteradas se você visitar uma área diferente do site.

No caso mais simples, a única parte variável no URL do Quickview é o SKU do produto. Nesse caso, o valor do SKU do produto é o único dado necessário para adicionar miniaturas a um segmento de tempo no vídeo interativo no Experience Manager.

No entanto, em casos complexos, o URL do Quickview tem vários elementos diferentes, além do SKU do produto, como ID de categoria, código de cor e código de tamanho. Nesses casos, cada elemento se torna uma variável separada na definição de dados em miniatura no Experience Manager.

Considere os seguintes exemplos de URLs do Quickview e as variáveis de miniatura resultantes:

Exemplo

Quando a abordagem acima é aplicada ao site Exemplo, você tem uma página da Web com várias miniaturas de produtos, cada uma com um botão "VEJA MAIS":

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

Depois de ativar todas as exibições rápidas de produtos disponíveis na página, você obtém a seguinte lista de solicitações do QuickView feitas no back-end:

Observando as chamadas do servidor, você pode ver que as informações específicas do produto estão presentes somente no caminho da solicitação. Você também percebe que a sequência de consulta não é usada e que há dois tipos distintos de dados envolvidos:

Dadas essas informações, todo o URL do Quickview tem o seguinte padrão:

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

Com base nessa análise, você conclui que pode usar as duas variáveis a seguir para as miniaturas: categoryId e SKU.

Agora você está pronto para fazer upload de um vídeo e de seus ativos em miniatura associados.

(Opcional) Criar uma predefinição do visualizador de vídeo interativo optional-creating-an-interactive-video-viewer-preset

Ignore essa tarefa e vá para a próxima se quiser usar qualquer um dos tipos de predefinição padrão do visualizador de Vídeo Interativo pronto para uso Shoppable_Video_dark ou Shoppable_Video_light.

Quando uma miniatura é selecionada no ambiente de criação, é exibida uma pré-visualização da caixa de diálogo Visualização rápida.

Opcionalmente, é possível criar sua própria predefinição personalizada do visualizador de Vídeo interativo. É possível determinar, entre outras coisas, o estilo do reprodutor de vídeo, as miniaturas interativas e a exibição da grade de miniaturas que aparece no final do vídeo.

Uma predefinição do visualizador de Vídeo interativo renderiza corretamente o vídeo e todos os segmentos de linha do tempo adicionados. Ela também usa um exemplo de Quickview padrão ao selecionar uma miniatura de produto no modo de Visualização, para que você possa testar a interatividade antes de publicar.

Após salvar a predefinição do visualizador, seu estado é automaticamente definido como Ativado na página Predefinições do visualizador. Esse estado significa que está visível no componente do Dynamic Media e sempre que você visualiza um vídeo com ele. Certifique-se de publicar manualmente a nova predefinição do visualizador.

Consulte Criar uma Nova Predefinição do Visualizador para criar sua própria predefinição do visualizador de Vídeo Interativo.

Carregar um vídeo e seus ativos em miniatura associados uploading-a-video-and-its-associated-thumbnail-assets

Se você já carregou os ativos de vídeo e miniatura, prossiga para Adicionar interatividade ao vídeo.

Se você carregou os vídeos ou imagens errados, ou se deseja excluir os vídeos ou imagens carregados de que não precisa mais, consulte Excluir ativos.

Para fazer upload de um vídeo e de seus ativos em miniatura associados:

Adicionar interatividade ao vídeo adding-interactivity-to-your-video

Adicione segmentos de linha do tempo a um vídeo usando o editor visual no local na página Criar vídeo interativo.

Depois de adicionar segmentos de linha do tempo, você adiciona imagens em miniatura em cada segmento. Para cada miniatura adicionada, aplique uma ação a ela. Por exemplo, você pode aplicar uma Visualização rápida à miniatura, atribuir um hiperlink a ela ou um Fragmento de experiência.

Consulte Fragmentos de experiência.

As opções Desfazer e Refazer, próximas ao canto superior direito da página, são compatíveis durante a sessão de criação/edição atual.

Depois de salvar o vídeo interativo, ele é aberto imediatamente na Pré-visualização. Ali, é possível selecionar uma predefinição do visualizador de Vídeo interativo e reproduzir o vídeo para ver uma representação aproximada de como ele aparece para os clientes.

Para adicionar interatividade ao seu vídeo:

ativos de vídeo interativos do Publish publishing-interactive-video-assets

Consulte ativos do Publish para obter detalhes sobre como publicar ativos de vídeo interativos.

Integre um vídeo interativo ao seu site integrating-an-interactive-video-with-your-website

Após carregar um vídeo, adicionar segmentos de linha do tempo a ele e publicar o vídeo interativo, você está pronto para adicioná-lo ao seu site existente.

Se você for um cliente do Experience Manager Sites, poderá adicionar o vídeo interativo arrastando o componente de Mídia interativa para sua página. Consulte Adicionar ativos do Dynamic Media a páginas.

Se você for um cliente independente do Experience Manager Assets, poderá adicionar manualmente o vídeo interativo ao seu site, conforme descrito nesta seção.

Exemplo

Usando o site de demonstração como exemplo:

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

Observe que o código incorporado é padrão:

<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>

A integração é tão simples quanto remover o código de inserção do vídeo e substituí-lo pelo código de inserção interativo do vídeo do Experience Manager. Você pode ver os resultados no URL a seguir. Embora ele mostre um Vídeo interativo presente na página, ainda não está integrado à exibição rápida existente:

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

Integrar um vídeo interativo a uma visualização rápida existente integrating-an-interactive-video-with-an-existing-quickview

A última etapa desse processo é integrar seu vídeo interativo a uma implementação do Quickview existente usada em seu site. Não há solução para a integração que funcione para todos os casos. Cada implementação do Quickview é exclusiva. Dessa forma, é necessária uma abordagem específica que envolva a assistência de um profissional de TI de front-end.

A implementação existente do Quickview normalmente representa uma cadeia de ações inter-relacionadas que ocorrem na página da Web na seguinte ordem:

Essas chamadas não representam chamadas de API públicas independentes que podem ser chamadas pela lógica da página da Web de uma etapa arbitrária. Em vez disso, é uma chamada encadeada em que cada próxima etapa é ocultada na última fase (retorno de chamada) da etapa anterior.

Ao mesmo tempo em que o vídeo interativo substitui a etapa 1 e parcialmente a etapa 2, quando um usuário seleciona em uma miniatura dentro do vídeo interativo, essa interação do usuário é tratada pelo visualizador. O visualizador retorna um evento à página da Web que contém todos os dados de miniatura adicionados anteriormente ao Experience Manager.

Nesse manipulador de eventos, o código de front-end faz o seguinte:

Além disso, o visualizador de Vídeo interativo suporta o modo de operação de tela cheia. O usuário final aciona a Visualização rápida selecionando uma miniatura sem sair da tela cheia. Para obter essa funcionalidade, altere o código de front-end para que a caixa de diálogo modal do Quickview seja anexada ao contêiner do visualizador. Não adicione o CORPO do documento ou algum outro elemento de página da Web que não esteja disponível quando o visualizador estiver no modo de tela cheia. O código que executa esse trabalho deve ouvir um ou mais retornos de chamada do visualizador que são enviados após o visualizador ser carregado na página.

O código incorporado retornado pelo Experience Manager já tem um manipulador de eventos pronto para uso em vigor. Ele é comentado como visto no seguinte trecho de código destacado:

<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
    //See 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>

Portanto, é necessário apenas remover o comentário do trecho de código destacado acima e substituir o corpo dos manipuladores fictícios pelo código específico da página da Web.

Há dois manipuladores de retorno de chamada padrão presentes no código incorporado padrão: quickViewActivate e initComplete. O manipulador quickViewActivate é acionado quando uma miniatura é selecionada no visualizador. Use-o para integrar o visualizador à lógica de ativação do Quickview. O manipulador initComplete é acionado apenas uma vez quando o visualizador é carregado na página. Esse manipulador é usado para ajustar a localização da caixa de diálogo de Visualização rápida no DOM da página da Web.

O processo de construção do URL do Quickview é oposto ao processo de identificação das variáveis de miniatura abordadas anteriormente neste tópico. Usando os exemplos de URL do Quickview identificados anteriormente, você pode ver como o URL do Quickview é construído em cada caso:

A última etapa para acionar o URL do Quickview e ativar o painel do Quickview provavelmente requer a assistência de um profissional de TI de front-end do seu departamento de TI. Eles têm o conhecimento para saber melhor como acionar com precisão a implementação do Quickview a partir da etapa adequada, tendo um URL do Quickview pronto para uso.

Você pode ver como essas etapas são aplicadas ao site de demonstração para integrar completamente um vídeo interativo ao código do Quickview. Anteriormente neste tópico, a estrutura do URL do Quickview foi identificada como a seguinte:

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

É fácil reconstruir essa URL dentro do manipulador quickViewActivate usando os campos categoryId e sku disponíveis no objeto inData passado para o manipulador por meio do código do visualizador, como no seguinte:

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

O site de demonstração está acionando a caixa de diálogo Quickview usando uma simples chamada de função loadQuickView(). Essa função aceita apenas um argumento, que é o URL de dados do Quickview. Assim, a última etapa para integrar o vídeo interativo é adicionar a seguinte linha de código ao manipulador quickViewActivate:

loadQuickView(quickViewUrl);

Por fim, verifique se a caixa de diálogo Quickview está anexada ao elemento de contêiner do visualizador. O código incorporado fornece exemplos de etapas para obter essa funcionalidade. Para obter uma referência para o elemento de contêiner do visualizador, você pode usar as seguintes linhas de código:

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

Onde inner_container é uma referência a um elemento DIV gerenciado pelo visualizador. Você deseja que a caixa de diálogo seja filha desse DIV.

As etapas para localizar realmente o elemento de caixa de diálogo modal e anexá-lo ao contêiner acima fazem distinção entre maiúsculas e minúsculas. Novamente, você pode buscar a ajuda de seu desenvolvedor de front-end familiarizado com a implementação do Quickview necessária.

Se você usa o site de exemplo, a caixa de diálogo modal do Quickview é implementada como um DIV com a ID modal do quickview anexada diretamente ao documento BODY. Portanto, o código para mover essa caixa de diálogo para o contêiner do visualizador é tão simples quanto o seguinte:

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

O código-fonte completo é o seguinte:

<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>

O site final de demonstração com vídeo interativo totalmente integrado é semelhante ao seguinte:

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

Criar pop-ups personalizados usando o Quickview using-quickviews-to-create-custom-pop-ups

Consulte Criar pop-ups personalizados usando o Quickview.