Imagens interativas interactive-images

Você pode tornar as imagens estáticas ricas em experiências envolventes para os clientes, arrastando e soltando pontos de acesso que podem ser comprados em uma imagem. Os hotspots para consumidores combinam informações adicionais sobre um produto ou serviço com um recurso "Adicionar ao carrinho" ou "Comprar" direto no ponto de venda. Os clientes podem selecionar esses pontos de acesso que se vinculam diretamente ao produto ou serviço, adicioná-los a um carrinho de compras ou estar vinculados a uma página da Web. Experiências diretas como essas aumentam o envolvimento e as conversões do cliente no seu site.

Veja a seguir um banner que pode ser comprado com uma janela pop-up do Quickview. Um usuário ativa o Quickview tocando no círculo ou "ponto de acesso" no modelo.

Veja imagens interativas em ação na página da Web mostrada acima.

Veja como os banners de imagem interativos são criados watch-how-interactive-image-banners-are-created

Assista a uma apresentação sobre como os banners de imagem interativos são criados (10 minutos e 33 segundos). Você também aprenderá a visualizar, editar e fornecer banners de imagem interativos.

Início rápido: imagens interativas quick-start-interactive-images

A descrição do fluxo de trabalho passo a passo a seguir foi projetada para ajudar você a começar a trabalhar rapidamente com imagens interativas no Adobe Experience Manager Assets.

Procure o cabeçalho Exemplo em algumas tarefas do Início rápido. Ele contém um breve tutorial baseado em um exemplo de página da Web que ainda não possui Imagens Interativas adicionadas a ele.

O tutorial ajuda a ilustrar as etapas da integração de imagens interativas em seu próprio site.

Etapas de imagens interativas:

(Opcional) Identificar variáveis de ponto de acesso optional-identifying-hotspot-variables

Comece identificando as variáveis dinâmicas usadas pela sua implementação existente do Quickview, para que você possa inserir dados de ponto de acesso para criar a imagem interativa.

Ao adicionar pontos de acesso a uma imagem de banner no Experience Manager Assets, atribua uma SKU (Stock Keeping Unit, Unidade de manutenção de estoque). O SKU é um identificador exclusivo para cada produto ou serviço distinto que você oferece. E adicione quaisquer variáveis opcionais extras a cada ponto de acesso. Essas variáveis de ponto de acesso são usadas posteriormente para corresponder pontos de acesso ao conteúdo do Quickview.

É importante identificar corretamente o número e o tipo de variáveis a serem associadas aos dados do ponto de acesso. Cada ponto de acesso adicionado a uma imagem de banner deve carregar informações suficientes para identificar sem ambiguidade o produto no sistema de back-end existente.

Há diferentes maneiras de identificar um conjunto de variáveis a serem usadas para dados de pontos de acesso.

Às vezes, basta consultar especialistas de TI responsáveis pela implementação do Quickview existente. Essas pessoas provavelmente saberão qual é o conjunto mínimo de dados necessários 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 então é visitar diferentes áreas do site existente onde o recurso de Visualização rápida é implementado. Em seguida, acione o Quickview e adquira 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. Geralmente, 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 de uma determinada categoria de site. No entanto, elas só serão 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 da SKU é a única parte dos dados necessária para adicionar pontos de acesso à imagem do banner.

No entanto, em casos complexos, o URL do Quickview tem diferentes elementos variáveis, além do SKU. Por exemplo, elementos variáveis podem incluir ID de categoria, código de cor e código de tamanho. Nesses casos, cada elemento é uma variável separada na definição de dados do ponto de acesso no recurso de imagem interativa que pode ser comprada no Experience Manager Assets.

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

Exemplo

Você pode aplicar a mesma abordagem usada nos três exemplos acima para a página de demonstração.

A página da Web de demonstração tem várias miniaturas de produto, cada uma com um botão de visualização rápida chamado "Veja mais". Com a ferramenta de depuração do navegador da Web ainda ativada, selecione cada botão e anote os URLs de visualização rápida gravados. Depois de ativar todas as quatro Visualizações rápidas de produto disponíveis na página, você terá a seguinte lista de solicitações de Visualização rápida 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ê usaria categoryId e SKU para hotspots.

Agora você está pronto para fazer upload de um banner de imagem e adicionar hotspots a ele usando o recurso de imagem interativa que pode ser comprada no Experience Manager Assets.

(Opcional) Criar uma predefinição interativa do visualizador de imagens optional-creating-an-interactive-image-viewer-preset

Você pode optar por usar a predefinição padrão do visualizador de Imagem interativa, pronta para uso, chamada Shoppable_Banner, que vem com o Experience Manager Assets. Ou você pode criar sua própria predefinição de visualizador personalizado para usar com imagens interativas.

Ao criar uma predefinição personalizada do visualizador de imagem interativa, você pode determinar a aparência dos pontos de acesso no banner da imagem. Como parte da criação da predefinição do visualizador, você pode optar por usar um gráfico de ponto de acesso de uma galeria de imagens predefinidas.

Depois de salvar a predefinição do visualizador, ela é ativada automaticamente (ativada) na página Lista de predefinições do visualizador no Experience Manager Assets. Essa funcionalidade significa que ela fica visível no componente de Mídia interativa e sempre que você visualiza um ativo. No entanto, para entregar um banner interativo com esta predefinição do visualizador, publicar sua predefinição do visualizador também. Essa regra é verdadeira para predefinições do visualizador personalizadas ou predefinidas.

Para criar uma predefinição do visualizador de Imagem Interativa:

Carregar um banner de imagem uploading-an-image-banner

Se você já carregou as imagens que deseja usar, avance para a próxima etapa, Adicionando hotspots a um banner de imagem.

Para carregar um banner de imagem:

Adicionar pontos de acesso a um banner de imagem adding-hotspots-to-an-image-banner

Você pode adicionar pontos de acesso a um banner de imagem usando o editor na página Gerenciamento de pontos de acesso.

Ao adicionar pontos de acesso, você pode defini-los como uma exibição pop-up do Quickview, como um hiperlink 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.

Ao terminar de criar a imagem interativa, você pode usar a Visualização para ver uma representação de como a imagem interativa aparece para os clientes.

Consulte (Opcional) Visualizar imagens interativas.

Para adicionar hotspots a um banner de imagem:

(Opcional) Visualizar imagens interativas optional-previewing-interactive-images

Você pode usar a Visualização para ver uma representação de como a imagem interativa aparece para os clientes. A Pré-visualização também permite que você teste os pontos de acesso da imagem para garantir que eles se comportem conforme esperado.

Quando estiver satisfeito com a imagem interativa, você poderá publicá-la.
Consulte Incorporar o Visualizador de Vídeo ou Imagem a uma Página da Web.
Consulte Vincular URLs ao aplicativo Web. 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 Experience Manager Sites.
Consulte Adicionar o Dynamic Media Assets às páginas.

Para visualizar imagens interativas:

ativos de imagem interativos do Publish publishing-interactive-image-assets

Consulte Publish Assets para obter detalhes sobre como publicar ativos de imagem interativos.

Integre uma imagem interativa ao seu site integrating-an-interactive-image-with-your-website

Após carregar uma imagem de banner, adicionar pontos de acesso a ela e publicar a imagem interativa, você estará pronto para adicioná-la à página do site.

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

Se você for um cliente independente do Experience Manager Assets, poderá adicionar manualmente a imagem interativa ao seu site, conforme descrito nesta seção.

Exemplo

Usando o site de demonstração como exemplo, observe que a imagem dos três indivíduos é uma tag IMG estática:

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

A integração é tão simples quanto remover a tag IMG e substituí-la pelo código incorporado copiado do Experience Manager Assets. Você pode ver que o resultado mostra a imagem interativa que pode ser comprada na página com três pontos de acesso circulares.

Para aplicar um "recorte" a uma imagem interativa que pode ser comprada para um ambiente responsivo, inclua o atributo de configuração Imagem interativa ZoomView.iscommand no caminho. Nesse caso, o componente ZoomView é chamado e iscommand é o comando de veiculação de imagens de "recorte" que você aplica.

Consulte o atributo de configuração ZoomView.iscommand.

Consulte o comando de veiculação de imagens crop.

Agora você está pronto para integrar a imagem interativa a uma visualização rápida existente no seu site.

Integrar uma imagem interativa a uma visualização rápida existente integrating-an-interactive-image-with-an-existing-quickview

A última etapa deste processo é integrar a imagem interativa a uma implementação existente do Quickview em seu site. Não há solução para a integração que funcione para todos os casos. Cada implementação do Quickview é única e é necessária uma abordagem específica. Dessa forma, envolver a assistência de um profissional de TI de front-end é útil.

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 necessariamente chamadas de API públicas independentes 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.

Quando a imagem interativa que pode ser comprada estiver substituindo a etapa 1 e parcialmente a etapa 2, um usuário toca em um ponto de acesso dentro da imagem que pode ser comprada. 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 ponto de acesso adicionados anteriormente ao Experience Manager Assets.

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

O código incorporado retornado pelo Experience Manager Assets tem um manipulador de eventos pronto para uso que é comentado, como visto no seguinte trecho de código destacado:

        var s7interactiveimageviewer = new s7viewers.InteractiveImage({
            "containerId" : "s7interactiveimage_div",
            "params" : {
                "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
                "contenturl" : "https://aodmarketingna.assetsadobe.com/",
                "config" : "/etc/dam/presets/viewer/Shoppable_Media",
                "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
        })
        /* // Example of interactive image event for Quickview.
             s7interactiveimageviewer.setHandlers({
                "quickViewActivate": function(inData) {
                    var sku=inData.sku; //SKU for product ID
                    //To pass other parameter from the hotspot, add custom parameter during the hotspot setup as parameterName=value
                    loadQuickView(sku); //Replace this call with your Quickview plugin
                    //See your Quickviewer plugin for the Quickview call
                 },
             });
        */
        s7interactiveimageviewer.init();

Portanto, é necessário apenas remover o comentário do código e substituir o corpo do manipulador fictício pelo código específico da página da Web.

O processo de construção do URL do Quickview é oposto ao processo usado para identificar as variáveis de ponto de acesso abordadas anteriormente.

Consulte Identificar variáveis de ponto de acesso.

Usando os exemplos de URL do Quickview anterior, você pode ver nos exemplos a seguir, 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 requer a assistência de um profissional de TI de front-end do seu trabalho. 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 totalmente uma imagem interativa que pode ser comprada com o código do Quickview. Anteriormente, a estrutura do URL do Quickview era identificada como a seguinte:

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

Para reconstruir esta URL dentro do manipulador quickViewActivate, você pode usar os campos categoryId e SKU. Estes campos estão disponíveis no objeto inData passado para o manipulador pelo código do visualizador:

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 a imagem interativa que pode ser comprada é adicionar a seguinte linha de código ao manipulador quickViewActivate:

loadQuickView(quickViewUrl);

Este é o código-fonte completo:

 var s7interactiveimageviewer = new s7viewers.InteractiveImage({
  "containerId" : "s7interactiveimage_div",
  "params" : {
   "serverurl" : "https://aodmarketingna.assetsadobe.com/is/image",
   "contenturl" : "https://aodmarketingna.assetsadobe.com/",
   "config" : "/etc/dam/presets/viewer/Shoppable_Media",
   "asset" : "/content/dam/mac/aodmarketingna/shoppable-banner/shoppable-banner.jpg" }
 })
   s7interactiveimageviewer.setHandlers({
   "quickViewActivate": function(inData) {
     var sku=inData.sku;
     var categoryId=inData.categoryId;
    var quickViewUrl = "datafeed/" + categoryId + "-" + sku + ".json";
    loadQuickView(quickViewUrl);
    },
   });
 s7interactiveimageviewer.init();

O site final de demonstração com a imagem interativa totalmente integrada.

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

Consulte Criar Windows® pop-up personalizado usando o Quickview.