Vídeos interativos

Você pode criar facilmente vídeos interativos que impulsionam a conversão diretamente do vídeo. O envolvimento do cliente com o vídeo ocorre em um painel ao lado do player de vídeo, onde o serviço, as informações ou as miniaturas do produto relacionados são rolados para a visualização com base no que aparece no vídeo. Os clientes podem tocar na 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 terminar, um resumo visual de todas as ofertas será exibido para direcionar uma chamada à ação. Os clientes têm outra oportunidade de tocar no item que desejam. Experiências acionáveis e específicas, como essas, aumentam o envolvimento e a conversão do cliente.

Consulte também Imagens interativas.

Vídeo interativo em ação

To see an interactive, shoppable video in action, click Live Demos, scroll to the Shoppable Media heading on the page, then click the shoppable video.

  • Durante a reprodução, à medida que os produtos são usados no vídeo, o produto idêntico aparece à direita como uma imagem em miniatura.

  • Clique na miniatura para pausar o vídeo e abrir a visualização rápida do produto. Por exemplo, clique na imagem em miniatura de KitchenAid no vídeo para exibir uma visualização de rotação de 360 graus do mixer ou amplie para ver os detalhes do mixer.

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

Observação

Se você criar um vídeo interativo para iniciar uma página da Web quando um usuário clicar em uma imagem em miniatura, alguns dispositivos impedirão a abertura da página da Web pop-up. Nesses casos, é necessário alterar a configuração do bloqueador de pop-ups no dispositivo. Por exemplo, em um Apple iPhone 6, toque em Configurações > Safari > Pop-ups de bloqueio e deslize o controle para Desativado. Agora, ao reproduzir um vídeo interativo e clicar em uma miniatura, você será solicitado a abrir o pop-up. Se você aceitar, a página da Web será aberta.

Veja como os vídeos interativos são criados

Assista a uma apresentação de 7 minutos e 30 segundos sobre como os vídeos interativos são criados .
(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 AEM Assets.)

Webinar de sucesso do cliente Adobe

O webinário "Usando vídeo interativo, compartilhamento de links e compartilhamento do YouTube no AEM Assets" ensina como usar vídeos interativos e outros recursos para associar eventos direcionados à conversão ao conteúdo de marketing de vídeo.

Start rápido: Vídeos interativos

A seguinte descrição passo a passo do fluxo de trabalho foi projetada para ajudá-lo a iniciar e executar rapidamente com vídeos interativos no Dynamic Media.

Procure o cabeçalho Exemplo em algumas das tarefas do Start rápido. Ele contém um breve tutorial baseado nesta página de demonstração inicial da Web que ainda não ** tem interatividade adicionada a ela:

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

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

Quando você terminar o tutorial na última seção Exemplo, a página da Web de demonstração final com o vídeo interativo totalmente integrado terá a seguinte aparência:

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

Fluxo de trabalho de vídeo interativo:

  1. (Opcional) Identificação de variáveis do Quickview - Start identificando variáveis dinâmicas usadas pela implementação do Quickview existente. Use as variáveis para mapear miniaturas de produtos para o Quickview de produto correspondente ao criar seu vídeo interativo. Consulte (Opcional) Como identificar variáveisdo Quickview.

    Observe que esta etapa só é necessária se todas as seguintes etapas forem verdadeiras:

    • Você deseja adicionar interatividade ao vídeo, disparando para o Quickviews.
    • Sua implementação do AEM não usa uma estrutura de integração de eCommerce para inserir dados de produtos em AEM de qualquer solução de eCommerce como IBM Webphere Commerce, Elastic Path, hybris ou Intershop. Consulte Conceitos de eCommerce na AEM Assets.
  2. (Opcional) Criação de uma predefinição do visualizador de vídeo interativo - Personalize a aparência e o comportamento de vários componentes que compõem o player, como o depurador de vídeo e as miniaturas interativas.

    A criação de sua própria predefinição do visualizador de vídeo interativo não é necessária se você pretende usar as predefinições do visualizador de vídeo interativo prontas Shoppable_Video_Light ou Shoppable_Video_Dark .
    Consulte Criação de uma nova predefinição do visualizador (opcional) e considerações especiais para criar uma predefiniçãodo visualizador interativo.

  3. Carregar um vídeo e seus ativos de imagem associados - Carregue um vídeo e imagens associadas que você deseja tornar interativas.

    Consulte Carregar um vídeo e seus ativosem miniatura associados.

  4. Adicionar interatividade ao vídeo - Adicione um ou mais segmentos de tempo ao vídeo. Em seguida, associe miniaturas de imagem nesses segmentos de tempo. Atribua cada miniatura de imagem a uma ação, como um hiperlink, uma visualização rápida ou um fragmento de experiência.

    (Observe que o método baseado em URL de vinculação não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.)

    Conclua publicando os ativos de vídeo interativos. A publicação cria o código incorporado ou o URL que você eventualmente copiará e aplicará à landing page do site.Consulte Adicionar interatividade ao vídeo.

    Consulte Publicação de ativos.

  5. Adicionar um vídeo interativo ao seu site ou ao seu site na AEM

    Se você usar o AEM Sites ou AEM eCommerce, ou ambos, poderá adicionar o vídeo interativo diretamente a uma página da Web em AEM arrastando o componente de Mídia interativa para a página. See Adding Dynamic Media Assets to Pages.

    Use o código incorporado ou URL para integrar seu vídeo interativo com as experiências do site. Consulte Integrar um vídeo interativo ao seu site.

    Se você estiver usando um WCM de terceiros (Web Content Manager), é necessário integrar o novo vídeo interativo com a implementação existente do Quickview usada em seu site. Consulte Integrar um vídeo interativo a um Quickviewexistente.

(Opcional) Como identificar variáveis do Quickview

Observação

Essa tarefa só é necessária se as seguintes condições forem verdadeiras:

  • Você deseja adicionar interatividade ao vídeo, disparando para o Quickviews.
  • Sua implementação do AEM não usa uma estrutura de integração de eCommerce para inserir dados de produtos em AEM de qualquer solução de eCommerce como IBM Webphere Commerce, Elastic Path, hybris ou Intershop. Consulte Conceitos de eCommerce na AEM Assets.

Se sua implementação do AEM usar o eCommerce, você poderá pular essa tarefa e seguir para a próxima tarefa.

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

Quando você adiciona segmentos de tempo a um vídeo, atribui um SKU e quaisquer variáveis adicionais a cada miniatura que você adiciona 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 um Quickview de produto.

Às vezes, pode ser suficiente consultar especialistas de TI responsáveis pela implementação atual do Quickview. Eles provavelmente conhecem o conjunto mínimo de dados necessário para identificar o Quickview no sistema. No entanto, na maioria dos casos, é possível simplesmente analisar o comportamento existente do código front-end.

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

  • O usuário ativa um elemento da interface do usuário no site. Por exemplo, clicar em um botão Quickview .
  • O site envia uma solicitação do Ajax para o backend para carregar os dados ou o conteúdo do Quickview, se necessário.
  • Os dados do Quickview são traduzidos para o conteúdo em preparação para renderização na página da Web.
  • Por fim, o código front-end exibe visualmente esse conteúdo na tela.

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

Normalmente, não é necessário usar nenhuma ferramenta de depuração especializada. Os navegadores da Web modernos dispõem de inspetores da Web que fazem um trabalho adequado. A seguir estão alguns exemplos de navegadores da Web que incluem inspetores da Web:

  • Para ver todas as solicitações HTTP de saída no Google Chrome, use o atalho de teclado F12 (Windows) ou Command + Options + I (Mac) para abrir o painel Ferramentas do desenvolvedor e clique na guia Rede .

  • In Mozilla Firefox, you can either activate the Firebug plug-in by using keyboard shortcut F12 (Windows) or Command + Options + I (Mac) and use its Net tab, or you can use the built-in Inspector tool and its Network tab.

  • No Internet Explorer, ative a ferramenta de depuração pressionando F12.

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

Agora, encontre o URL Ajax do Quickview no registro de rede e copie o URL gravado para análise futura. Na maioria dos casos, quando você aciona o Quickview, há várias solicitações que são enviadas para o servidor. Normalmente, o URL do Ajax do Quickview é um dos primeiros na lista. Ele tem uma parte ou um caminho de sequência de query complexo, e seu tipo MIME de resposta é text/html, text/xmlou text/javascript.

Durante esse processo, é importante visitar diferentes áreas do seu site, com diferentes categorias e tipos de produtos. O motivo é que os URLs do Quickview podem ter partes comuns para uma determinada categoria do site, mas são alterados somente 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 SKU do produto é o único dado necessário para adicionar miniaturas a um segmento de tempo no vídeo interativo no AEM.

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

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

SKU único, encontrado na string do query.

Os URLs de exibição rápida gravados incluem o seguinte:

  • 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

A única parte variável no URL é o valor do parâmetro da string de productId= query e é claramente um valor SKU. Portanto, nossas miniaturas precisam apenas de campos SKU preenchidos com valores como 866558, 1196184, 1081492, 1898294.

SKU único, encontrado no caminho do URL.

Os URLs de exibição rápida gravados incluem o seguinte:

  • https://server/product/6422350843

  • https://server/product/1607745002

  • https://server/product/0086724882

A parte variável está na última parte do caminho e se torna o valor SKU de miniaturas AEM: 6422350843, 1607745002, 0086724882.

SKU e ID da categoria na sequência do query.

Os URLs de exibição rápida gravados incluem o seguinte:

  • https://server/quickView/product/?category=1100004&prodId=305466

  • https://server/quickView/product/?category=1100004&prodId=310181

  • https://server/quickView/product/?category=1740148&prodId=308706

Nesse caso, há duas partes diferentes no URL. O SKU é armazenado no prodId parâmetro e a ID da categoria é armazenada no category= parâmetro.

Dessa forma, as definições de miniaturas são pares. Ou seja, um valor de SKU e uma variável adicional chamada categoryId. Os pares resultantes são os seguintes:

  • O SKU é 305466 e categoryId é 1100004
  • O SKU é 310181 e categoryId é 1100004
  • O SKU é 308706 e categoryId é 1740148

Exemplo

Quando a abordagem acima é aplicada ao nosso site de exemplo, temos uma página da Web com várias miniaturas de produtos, cada uma com um botão VER MAIS :

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

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

Olhando para essas chamadas de servidor, você verá que informações específicas do produto estão presentes apenas no caminho da solicitação. Você também observa que a sequência de caracteres do query não é usada de todo, e há dois tipos distintos de partes de dados envolvidas:

  • O primeiro tipo é velas, almofadas, móveis e artigos de vidro. Você pode chamar isso de "categoria do produto".
  • O segundo tipo é o código do produto, como 233916597. Você pode assumir que é "SKU de produto".

Considerando 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 carregar um vídeo e seus ativos em miniatura associados.

(Opcional) Criação de uma predefinição do visualizador de vídeo interativo

Você pode ignorar essa tarefa e continuar para a próxima se pretender usar um dos tipos predefinidos padrão e predefinidos do visualizador de vídeo interativo Shoppable_Video_dark ou Shoppable_Video_light.

Quando uma miniatura é clicada no ambiente de criação, uma pré-visualização da caixa de diálogo Quickview é exibida.

chlimage_1-127

Como opção, você pode criar sua própria predefinição personalizada do visualizador de vídeo interativo. Você pode determinar, entre outras coisas, o estilo do player de vídeo, as miniaturas interativas e a visualização da grade de miniaturas que aparece no final do vídeo.

Uma predefinição de Visualizador de vídeo interativo renderiza corretamente o vídeo e todos os segmentos de linha do tempo adicionados. Ele também usa um exemplo de exibição rápida padrão quando você clica em uma miniatura de produto no modo de Pré-visualização para que você possa testar sua interatividade antes de publicar.

After you save the viewer preset, its state is automatically set to On in the Viewer Presets page. 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.

Fazer upload de um vídeo e de seus ativos em miniatura associados

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

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

Para carregar um vídeo e seus ativos em miniatura associados:

  1. Faça upload do vídeo e dos ativos em miniatura associados para a pasta ou pastas desejadas.

    See Uploading assets.

    Consulte Fazer upload de ativos usando o agendamentode tarefas FTP.

    Agora, adicione interatividade ao seu vídeo.

Adicionar interatividade ao vídeo

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

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

Consulte Fragmentos de experiência.

Observação

O método baseado em URL de vinculação não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.

As opções Desfazer e Refazer , perto do canto superior direito da página, são suportadas durante a sessão de criação/edição atual.

Após salvar o vídeo interativo, ele será aberto imediatamente na Pré-visualização. A partir daí, você pode selecionar uma predefinição do visualizador de vídeo interativo e reproduzir o vídeo para ver uma representação aproximada de como ele aparecerá para os clientes.

Para adicionar interatividade ao vídeo:

  1. Na visualização Ativos, navegue até o vídeo que você carregou e deseje tornar interativo.

  2. Faça uma das seguintes opções:

    • Hover on the image, then tap Select (checkmark icon). Na barra de ferramentas, toque em Editar.
    • Passe o mouse sobre a imagem e toque em Mais ações (ícone de três pontos) > Editar.
    • Toque na imagem para abri-la na página Visualização Detalhe. Na barra de ferramentas, toque em Editar.
  3. Na página Criar vídeo interativo, execute um dos procedimentos a seguir:

    • Toque no botão Reproduzir para começar a reproduzir o vídeo. Quando um produto, serviço ou detalhe específico que você deseja destacar entrar na visualização, toque em Adicionar segmento na barra de ferramentas. Repita até chegar ao fim do vídeo.

      Para cada segmento de tempo adicionado, é possível atribuir uma ou mais imagens em miniatura a ele e, em seguida, vincular essas miniaturas às páginas de produto do Quickview para que os clientes comprem ou às páginas da Web para obter mais informações.

    • Toque no botão Reproduzir para começar a reproduzir o vídeo. Quando um produto, serviço ou detalhe específico que você deseja destacar entrar na visualização, toque em Pausar. Toque em Adicionar segmento.

      Continue reproduzindo e pausando o vídeo em pontos na linha do tempo em que deseja adicionar um segmento até atingir o fim do vídeo.

  4. (Opcional) Arraste a barra no controle deslizante Escala da linha do tempo para a esquerda para aumentar ou diminuir o zoom e para direita para diminuir o zoom, controlando assim quantos detalhes você vê dos segmentos adicionados.

    chlimage_1-128

    Dependendo da duração do vídeo, a Duração do segmento assumirá os seguintes valores como padrão:

    Se a duração do vídeo for... O padrão da configuração Duração do segmento é...
    3 minutos ou mais 60 segundos
    2 a 3 minutos 30 segundos
    1-2 minutos 20 seconds
    30 a 60 segundos 10 segundos
    30 segundos ou menos 5 segundos

    A linha do tempo do vídeo usa tantas propriedades de tela quanto o que está disponível para ele. Dessa forma, ao redimensionar o navegador, os segmentos adicionados mantêm sua largura correta.

    Para ilustrar, as três capturas de tela a seguir estão usando o mesmo vídeo. Observe que a largura de cada segmento muda dependendo da configuração Escala da Linha do tempo.

    chlimage_1-129

    Captura de tela A

    Captura de tela A acima mostra a visualização padrão de um vídeo de 29 segundos do produto. A Escala da Linha do tempo é definida como padrão de 5 segundos.

    chlimage_1-130

    Captura de tela B

    Na captura de tela B acima, o controle deslizante Escala da Linha do tempo foi arrastado do padrão de 5 segundos para 3 segundos. Observe que os carimbos de data e hora individuais da Escala de linha do tempo agora estão definidos em intervalos de 3 segundos.

    chlimage_1-131

    Captura de tela C

    Na captura de tela C acima, a configuração Escala da Linha do tempo foi movida para 8 segundos. Observe como os segmentos que contêm miniaturas de produtos foram reduzidos. Reduzir dessa forma é útil se você tiver um vídeo longo e quiser ver uma visão geral de mais segmentos que normalmente se ajustariam à largura da página.

  5. (Opcional) Execute um dos procedimentos a seguir:

    • Para ajustar a hora e a hora de término do start de um segmento.

      Selecione um segmento e arraste a oval azul à esquerda ou à direita para ajustar a hora de start ou de término, respectivamente. O quadro de vídeo exibido é movido para a hora apropriada no vídeo, com base em seus ajustes. O movimento do segmento da linha do tempo é restrito com base em qualquer segmento adjacente na linha do tempo. O tempo mínimo de segmento permitido é de um segundo.

      Use os seguintes atalhos de navegação para verificar e ajustar rapidamente seus segmentos de vídeo:

      • Toque na oval azul à esquerda para buscar o vídeo diretamente para o início desse segmento.
      • Toque na oval azul à direita para buscar o vídeo diretamente ao final desse segmento.
      • Toque no segmento inteiro para retornar a reprodução do vídeo ao start desse segmento

    chlimage_1-132

    Reposicionamento do final de um segmento de linha do tempo

    • Para excluir um segmento

      Selecione o último segmento que está na linha do tempo e, na barra de ferramentas, toque em Excluir segmento. Se dois ou mais segmentos forem selecionados, o recurso Excluir segmento será desativado.

      Você só pode excluir o último segmento. Por exemplo, se você deseja excluir todos os segmentos na linha do tempo, sempre selecione o último e, em seguida, toque em Excluir segmento.

  6. Selecione um segmento de tempo ao qual você deseja associar uma ou mais imagens em miniatura.

  7. À direita do vídeo, toque na guia Conteúdo .

  8. Na guia Conteúdo , toque em Selecionar ativos e, em seguida, navegue e selecione todos os ativos de imagem que deseja usar com o vídeo. Os ativos selecionados são adicionados ao painel Seletor de ativos na guia Conteúdo .

  9. No seletor de ativos abaixo da guia Conteúdo, execute um dos procedimentos a seguir:

    Para associar uma miniatura ao segmento de linha do tempo selecionado

    Toque na imagem no painel seletor de ativos à direita.

    Você pode adicionar quantas miniaturas desejar a um segmento de linha do tempo. Para cada imagem selecionada, uma marca de seleção aparece sobre a imagem no seletor de ativos.

    Para remover uma miniatura do segmento de linha do tempo selecionado

    Siga um destes procedimentos:

    • No painel seletor de ativos, toque em uma imagem com uma marca de seleção para desmarcá-la. O ativo de imagem é removido do segmento de linha do tempo.
    • No segmento de linha do tempo selecionado, toque em uma imagem e, em seguida, na barra de ferramentas, toque em Excluir produto.

    Seletor de ativos

    Tocar em uma imagem no painel seletor de ativos a adiciona ao segmento de linha do tempo selecionado.

  10. Selecione uma única imagem em miniatura em um dos segmentos da linha do tempo e toque na guia Ações .

  11. Siga um destes procedimentos:

    <
    Para associar a imagem em miniatura selecionada a uma exibição Rápida

    Em Tipo de ação, toque em Quickview.

    Se você for um cliente AEM Sites e Ecommerce:

    • Observe que o campo de texto Valor SKU é pré-preenchido com o SKU do produto selecionado (Stock Keeping Unit), que é um identificador exclusivo para cada produto ou serviço distinto que você está oferecendo. Isso é preenchido automaticamente quando a imagem é associada a um produto no AEM Commerce.
    • Se o SKU pré-preenchido estiver incorreto, toque ou clique no ícone Seletor de produto (lupa) para abrir a página Selecionar produto. Toque ou clique no produto que deseja usar e, em seguida, toque na marca de seleção no canto superior direito da página para retornar ao Editor de vídeo interativo.

    Se você não for um cliente AEM Sites ou Ecommerce

    • Consulte Identificação de variáveisde pontos de conexão. Será necessário definir essas variáveis.
    • Por padrão, esse campo SKU usa o nome de arquivo do ativo de imagem sem a extensão. Se você seguir uma convenção de nomenclatura padrão para seus arquivos com base no SKU, isso geralmente não requer edições adicionais.
    • Caso contrário, edite o valor padrão e insira o valor SKU correto. No campo de texto Valor SKU, digite o SKU do produto (Stock Keeping Unit), que é um identificador exclusivo para cada produto ou serviço distinto que você oferta. O valor SKU inserido preenche automaticamente a parte variável do modelo do Quickview, de modo que o sistema saiba associar a imagem tocada a uma exibição rápida do SKU.

    (Opcional) Se houver outras variáveis na exibição Rápida que você precisa usar para identificar ainda mais um produto, toque em Adicionar variávelgenérica. No campo de texto, especifique uma variável adicional. Por exemplo, category=Womens é uma variável adicionada.

    Para associar a imagem em miniatura selecionada a um hiperlink

    Em Tipo de ação, toque em Hiperlinke execute um dos procedimentos a seguir:

    • Se você for um cliente da AEM Sites, toque no ícone Seletor de site (pasta) para navegar até uma página da Web. Observe que o método baseado em URL de vinculação não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.
    • Se você for um cliente independente do Dynamic Media, no campo de texto HREF, especifique o caminho do URL completo para uma página da Web vinculada.

    Certifique-se de especificar se deseja abrir o link em uma nova guia do navegador ou na guia atual.

    Para associar a imagem em miniatura selecionada a um fragmento de experiência

    Em Tipo de ação, toque em Fragmento deexperiência e faça o seguinte:

    • Se você for um cliente da AEM Sites, toque ou clique no ícone Pesquisar (lupa) para abrir a página Fragmento de experiência. Toque ou clique no Fragmento de experiência que deseja usar e, em seguida, toque em Selecionar no canto superior direito da página para retornar ao painel Ações na página anterior.
      Consulte Fragmentos de experiência.
    • Especifique a largura e a altura do Fragmento de experiência como ele será exibido no vídeo.
    Observação: Observe que as ferramentas de compartilhamento de mídia social em Vídeo interativo não são suportadas quando você incorpora o visualizador em um Fragmento de experiência. Para contornar isso, você pode usar ou criar predefinições do visualizador que não tenham ferramentas de compartilhamento de mídia social. Essas predefinições do visualizador permitem que você as incorpore com êxito aos Fragmentos de experiência.

    Para editar uma ação já atribuída a uma imagem em miniatura Em um segmento de linha do tempo, toque em uma imagem em miniatura que tenha um link de cadeia à direita de seu rótulo de texto. O link de cadeia indica que uma ação foi atribuída a ela. Toque na guia Ações para fazer as alterações.
    Alteração do rótulo de texto de uma imagem em miniatura

    Por padrão, o rótulo do texto usa o campo de Title metadados da imagem em miniatura. Se não Title estiver presente, o nome de arquivo da imagem em miniatura será usado, mas sem a extensão.

    Para alterar o rótulo de texto de uma imagem em miniatura, na guia Ações, logo abaixo do ativo de imagem exibido, insira o texto desejado. Veja a ilustração abaixo.

    Observe que o novo rótulo de texto é usado somente pelo próprio player de vídeo e o texto em miniatura exibido no segmento de linha do tempo. A alteração de rótulo não afeta o campo de metadados de Título da imagem em miniatura nem seu nome de arquivo.

    Para reverter uma alteração que você fez Próximo ao canto superior direito da página, toque em Desfazer ou Refazer.

    experiencefragment_interativevideos

    Um novo rótulo de texto é adicionado à imagem em miniatura.

  12. Faça uma das seguintes opções:

    • Repita as etapas de 6 a 11 para adicionar mais imagens em miniatura a segmentos de linha do tempo em seu vídeo.
    • Continue com a etapa opcional 13.
  13. (Opcional) Execute um dos procedimentos a seguir:

    • Mesclar segmento - é possível combinar dois segmentos adjacentes (com ou sem miniaturas de produtos atribuídas a eles) em um segmento.

      Na linha do tempo, toque em dois ou mais segmentos contíguos que deseja mesclar em um. Observe que não há alças de arrastar ovais azuis nos dois segmentos selecionados na figura abaixo.

      Toque em Unir segmento na barra de ferramentas.
      chlimage_1-134

    Mesclando dois segmentos selecionados de cinco segundos em um segmento de dez segundos.

    • Dividir segmento - é possível dividir um único segmento em dois segmentos igualmente cronometrados. Se houver miniaturas de produtos já atribuídas ao segmento, as miniaturas serão combinadas ao segmento esquerdo.

      Na linha do tempo, toque em um segmento que deseja dividir ao meio e, em seguida, toque em Dividir segmento na barra de ferramentas.

      Selecionar dois ou mais segmentos desativa o recurso Dividir segmento .
      chlimage_1-133

    Dividindo um segmento selecionado de dez segundos em dois segmentos de cinco segundos cada.

  14. Perto do canto superior direito da página Criar vídeo interativo, o nome da predefinição do visualizador atualmente selecionado usada com o vídeo é exibido. Toque no nome para selecionar uma predefinição de visualizador diferente.

    Por exemplo, a predefinição do Shoppable_Video_light visualizador permite reproduzir o vídeo com uma área de exibição branca adjacente ao vídeo. A área de exibição é onde as imagens em miniatura clicáveis são exibidas durante a reprodução. A predefinição do Shoppable_Video_dark visualizador permite reproduzir o vídeo com uma área de exibição preta adjacente ao vídeo.

    Se você tiver criado sua própria predefinição do visualizador de vídeo interativo, também a visualizará na lista de predefinições que podem ser escolhidas.

    Quando terminar, toque em Salvar.

    Observação

    Ao salvar o vídeo interativo, um arquivo associado é automaticamente salvo com ele. .vtt O arquivo .vtt é salvo na pasta _VTT localizada na raiz do Assets. O arquivo e a pasta são necessários para que o vídeo interativo seja reproduzido corretamente no site. Sendo assim, não mova, edite ou exclua a pasta _VTT ou seu conteúdo.

  15. Publique o vídeo interativo. A publicação cria o código incorporado ou o URL que você eventualmente copiará e colará nas experiências do site.

    Se você adicionou interatividade com o Quickviews, use apenas o código incorporado; se você adicionou interatividade com páginas da Web hipervinculadas, também é possível usar o URL publicado. Entretanto, observe que o método de vinculação baseado em URL não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.

    Consulte Publicar ativos.

    Observação

    Para publicar um vídeo que pode ser comprado com o Quickviews, certifique-se de publicar cada um dos ativos de imagem relacionados do vídeo da sua área de comércio, separadamente.

    Depois de adicionar segmentos de linha do tempo e publicar o vídeo interativo, você estará pronto para adicioná-lo à landing page do site existente. Consulte Integrar um vídeo interativo ao seu site.

Publicar ativos de vídeo interativo

Consulte Publicação de ativos para obter detalhes sobre como publicar ativos de vídeo interativos.

Integração de um vídeo interativo com seu site

Depois de fazer upload de um vídeo, adicionar segmentos de linha do tempo a ele e publicar o vídeo interativo, você estará pronto para adicioná-lo ao site existente.

Se você for um cliente da AEM Sites, poderá adicionar o vídeo interativo arrastando o componente de Mídia interativa para sua página. See Adding Dynamic Media Assets to Pages.

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

Para integrar um vídeo interativo ao seu site:

  1. Copie o código incorporado ou URL do vídeo interativo publicado.

    See Embedding the Video or Image Viewer on a Web Page.

    Se você adicionou interatividade com o Quickviews, use apenas o código incorporado; se você adicionou interatividade com páginas da Web hipervinculadas, também é possível usar o URL publicado. Entretanto, observe que o método de vinculação baseado em URL não é possível se o conteúdo interativo tiver links com URLs relativos, principalmente links para páginas do AEM Sites.

  2. No código da página da Web do público alvo, identifique onde o vídeo estático está localizado.

  3. Remova o vídeo estático e substitua o código pelo código incorporado ou URL que você copiou do AEM Assets, como está.

    O código incorporado copiado é definido para um ambiente responsivo, de modo que ele se ajuste automaticamente à área ocupada anteriormente pelo vídeo estático.

Observação

Como esse ponto, se você adicionou interatividade somente com páginas da Web hipervinculadas, você está pronto.
No entanto, se você adicionou qualquer interatividade para acionar uma exibição Rápida, as miniaturas adjacentes ao vídeo interativo são apenas para fins de exibição; eles ainda não estão integrados às suas exibições rápidas existentes. Nesse caso, agora é necessário integrar o vídeo interativo com as exibições rápidas existentes em seu site.

Exemplo

Como usar o site de demonstração como exemplo:

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

Observe que é o código de incorporação de vídeo 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 incorporado de vídeo e substituí-lo pelo código incorporado de vídeo interativo do AEM. Você pode ver o resultado no seguinte URL. Embora ele mostre um vídeo interativo presente na página, ele ainda não está integrado às exibições rápidas existentes:

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

Integração de um vídeo interativo com um Quickview existente

Observação

Esta tarefa só se aplica se você for um cliente independente da AEM Assets.

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

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

  1. Um usuário aciona um elemento na interface do usuário do seu site.
  2. O código front-end obtém um URL de exibição rápida com base no elemento da interface do usuário que foi acionado na etapa 1.
  3. O código de front-end envia uma solicitação AJAX usando o URL obtido na etapa 2.
  4. A lógica de backend retorna os dados ou o conteúdo correspondentes do Quickview de volta ao código de front-end.
  5. O código front-end carrega os dados ou o conteúdo do Quickview.
  6. Como opção, o código front-end converte os dados carregados do Quickview em uma representação HTML.
  7. O código front-end exibe uma caixa de diálogo modal ou um painel e renderiza o conteúdo HTML na tela do usuário final.

Essas chamadas podem não representar 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 na qual cada próxima etapa está oculta na última fase (retorno de chamada) da etapa anterior.

Ao mesmo tempo que o vídeo interativo está substituindo a etapa 1 e parcialmente a etapa 2, quando um usuário clica em uma miniatura dentro do vídeo interativo, essa interação do usuário é feita pelo visualizador. O visualizador retorna um evento para a página da Web que contém todos os dados em miniatura adicionados anteriormente ao AEM.

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

  • Escuta um evento emitido pelo vídeo interativo.
  • Constrói um URL de exibição rápida com base nos dados em miniatura.
  • Aciona o processo de carregamento do Quickview do backend e renderização na tela para exibição.

Além disso, o visualizador de vídeo interativo oferece suporte ao modo de operação de tela cheia. O usuário final aciona as exibições rápidas clicando em 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 container do visualizador. Não adicione o BODY do documento ou algum outro elemento da página da Web que não esteja disponível quando o visualizador estiver no modo de tela cheia. O código que executa este trabalho precisa ouvir mais um retorno de chamada do visualizador enviado depois que o visualizador carrega na página.

O código incorporado retornado pelo AEM já possui um manipulador de eventos pronto para uso. Ele é comentado como visto no trecho de código destacado a seguir:

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

Portanto, é necessário remover as barras de comentário do trecho de código destacado acima e substituir o corpo dos manipuladores de simulação por um código específico para a página da Web em particular.

Há dois manipuladores de retorno de chamada padrão presentes no código incorporado padrão: quickViewActivate e initComplete. O quickViewActivate manipulador dispara quando uma miniatura é clicada no visualizador. Use-o para integrar o visualizador à lógica de ativação do Quickview. O initComplete manipulador dispara apenas uma vez quando o visualizador é carregado na página. Esse manipulador é usado para ajustar o local da caixa de diálogo do Quickview 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 nossos exemplos de URL do Quickview identificados anteriormente, você pode ver como o URL do Quickview é construído em cada caso:

SKU único, encontrado na string do query

s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/json?productId=" + inData.sku + "&source=100"; }, });
SKU único, encontrado no caminho do URL s7interactivevideoviewer.setHandlers({ "quickViewActivate": function(inData) { var quickViewUrl = "https://server/product/" + inData.sku; }, });

SKU e ID de categoria na sequência de query

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

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

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

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

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

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 do Quickview usando uma chamada de loadQuickView() função simples. Essa função utiliza apenas um argumento, que é o URL de dados do Quickview. Assim, a última etapa necessária para integrar o vídeo interativo é adicionar a seguinte linha de código ao quickViewActivate manipulador:

loadQuickView(quickViewUrl);

Por fim, verifique se a caixa de diálogo do Quickview está anexada ao elemento de container do visualizador. O código incorporado padrão fornece etapas de amostra para obter essa funcionalidade. Para obter uma referência ao elemento de container 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 DIV elemento gerenciado pelo visualizador. Você quer que a caixa de diálogo seja filha disso DIV.

As etapas para localizar o elemento da caixa de diálogo modal e anexá-lo ao container acima são específicas para 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.

No caso do site de amostra, a caixa de diálogo modal do Quickview é implementada como uma DIV com a ID modal quickview anexada diretamente ao documento BODY. Portanto, o código para mover essa caixa de diálogo para o container 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 de demonstração final com o vídeo interativo totalmente integrado tem a seguinte aparência:

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

Uso do Quickviews para criar pop-ups personalizados

See Using Quickviews to create custom pop-ups.

Nesta página