Opções do Visual Experience Composer

Ao clicar em um elemento de página no Adobe Target Visual Experience Composer (VEC), um menu mostrará as opções disponíveis para esse tipo de elemento. Além disso, um caminho DOM é exibido na parte inferior da página, possibilitando uma navegação fácil pela estrutura da página.

As várias ações do Visual Experience Composer (VEC) são agrupadas nas opções de menu apropriadas para tornar seu trabalho mais rápido e eficiente:

Edit

As opções disponíveis são as seguintes:

Text/HTML edit-text-html

Altere o código HTML do elemento, como o texto para uma área de texto, botão ou link.

Além do código HTML, você pode editar e injetar JavaScript personalizado.

Várias opções de formatação de rich text estão disponíveis durante a edição de texto e HTML para atividades de A/B e Experience Targeting. Você pode escolher uma fonte, selecionar um estilo de fonte, alterar o alinhamento do texto e outras opções de formatação de texto padrão. Ao modificar o HTML, você pode alternar entre a exibição de código e a exibição de rich-editing do HTML.

As seguintes tags de HTML 5 podem ser aninhadas:

Background Color

Use o seletor de cores para selecionar ou configurar uma cor do fundo. Você pode selecionar uma amostra de cor e ajustá-la com valores de RGB ou códigos de cor hexadecimal. O x vermelho no seletor de cores torna o fundo transparente.

Observação: essa opção não está disponível para um elemento no qual uma imagem do fundo está definida.

Styles styles

Use o painel Styles para exibir ou editar o valor dos estilos existentes para o elemento selecionado. Também é possível adicionar novos estilos.

Para acessar o painel Styles, clique em um elemento de página no VEC e em Edit > Styles.

O painel Styles é exibido no lado direito do VEC. O painel contém uma lista de estilos que permite editar ou adicionar ao elemento selecionado. Um Editor de CSS em tempo real permite exibir alterações e adicionar estilos se você estiver familiarizado com o uso de Folhas de estilo em cascata (CSS) ou se receber um código do desenvolvedor.

Ao aplicar estilos diferentes, sempre é possível reverter as alterações clicando no ícone Revert, exibido no canto superior direito do painel Styles, depois de alterar qualquer seção. Clicar no ícone Revert reverte todas as alterações no painel da seção atual.

Expanda cada seção para editar ou adicionar estilos, conforme explicado abaixo. Para salvar as alterações, clique no ícone Back na parte superior do painel para retornar à exibição principal do painel e clique em Save.

Pontos azuis no painel principal e ao lado de cada opção nos vários painéis da seção indicam que você alterou os estilos correspondentes. Este indicador visual facilita a análise das alterações antes de clicar em Save.

CSS Class

Especifique a classe CSS usada para o elemento. Se mais de um elemento for selecionado, separe várias classes CSS com um espaço.

Disponível para atividades de A/B, Automated Personalization e Multivariate Test.

Link

Alterar o URL no link.

Use Editar link para atualizar o seletor para apontar para o mesmo elemento de imagem. No entanto, a vinculação com um elemento de imagem diferente não é compatível. Para vincular a um elemento de imagem diferente, exclua a ação original do editor de código e use o Visual Experience Composer para aplicar a ação no outro elemento de imagem.

Insert Before

As opções disponíveis são as seguintes:

Offer Decision

Adicione uma oferta criada em Adobe Journey Optimizer para apresentar a melhor oferta e experiência aos seus clientes usando o offer decisioning.

Observação: esta opção está disponível somente durante a edição ou criação das atividades manuais A/B Test ou Experience Targeting (XT). Essa opção não está disponível para outros tipos de atividade.

Para obter mais informações, consulte Usar decisões de oferta.

Image, HTML e Text

Inclua qualquer tipo de elemento em sua página, além de modificar o conteúdo existente. Inclua texto, código, listas, entre outros, para criar experiências completamente diferentes para testar.

Selecione um elemento da página, clique em Insert Before e escolha se você quer inserir uma imagem, HTML ou texto. O elemento inserido aparece antes do elemento selecionado.

O comportamento do elemento inserido depende da estrutura da página, do CSS e de outras opções de configuração de página. É necessário um HTML válido para fazer página aparecer corretamente. Sempre teste sua página após inserir um item para garantir que ele apareça conforme esperado.

Recommendations dá suporte a Insert Before o conteúdo das marcas DIV, SECTION e ARTICLE.

Observação: para Inserir uma imagem, o Adobe Scene7 Publishing System deve estar habilitado para que você tenha acesso à biblioteca de imagens.

Recomendação

Inclua recomendações nas atividades de teste A/B (incluindo as atividades Autoalocação e Direcionamento automático) e Direcionamento de experiência (XT). Para obter mais informações, consulte Recommendations como uma oferta.

Experience Fragment

Insira fragmentos de experiência criados em Adobe Experience Manager (AEM) nas atividades Target para auxiliar na otimização ou na personalização. Para obter mais informações, consulte Fragmentos de experiência do AEM.

Insert After

As opções disponíveis são as seguintes:

Offer Decision

Adicione uma oferta criada em Adobe Journey Optimizer para apresentar a melhor oferta e experiência aos seus clientes usando o offer decisioning.

Observação: esta opção está disponível somente durante a edição ou criação das atividades manuais A/B Test ou Experience Targeting (XT). Essa opção não está disponível para outros tipos de atividade.

Para obter mais informações, consulte Usar decisões de oferta.

Image, HTML e Text

Inclua qualquer tipo de elemento em sua página, além de modificar o conteúdo existente. Inclua texto, código, listas, entre outros, para criar experiências completamente diferentes para testar.

Selecione um elemento da página, clique em Insert After e escolha se você quer inserir uma imagem, HTML ou texto. O elemento inserido aparece após o elemento selecionado.

O comportamento do elemento inserido depende da estrutura da página, do CSS e de outras opções de configuração de página. É necessário um HTML válido para fazer página aparecer corretamente. Sempre teste sua página após inserir um item para garantir que ele apareça conforme esperado.

Recommendations dá suporte a Insert After o conteúdo das marcas DIV, SECTION e ARTICLE.

Observação: para Inserir uma imagem, o Adobe Scene7 Publishing System deve estar habilitado para que você tenha acesso à biblioteca de imagens.

Recomendação

Inclua recomendações nas atividades de teste A/B (incluindo as atividades Autoalocação e Direcionamento automático) e Direcionamento de experiência (XT). Para obter mais informações, consulte Recommendations como uma oferta.

Experience Fragment

Insira fragmentos de experiência criados em Adobe Experience Manager (AEM) nas atividades Target para auxiliar na otimização ou na personalização. Para obter mais informações, consulte Fragmentos de experiência do AEM.

Replace Content

As opções disponíveis são as seguintes:

Offer Decision

Adicione uma oferta criada em Adobe Journey Optimizer para apresentar a melhor oferta e experiência aos seus clientes usando o offer decisioning.

Observação: esta opção está disponível somente durante a edição ou criação das atividades manuais A/B Test ou Experience Targeting (XT). Essa opção não está disponível para outros tipos de atividade.

Para obter mais informações, consulte Usar decisões de oferta.

Image

Selecione uma imagem diferente da Biblioteca de conteúdo. As imagens disponíveis para troca incluem aquelas carregadas na pasta de ativos da Experience Cloud ou na Biblioteca de conteúdo do Target.

Durante a criação da atividade inicial, o URL exibido não é o URL usado para a entrega. Após a sincronização da atividade, esse URL é atualizado para um URL de produto do Scene7.

Por exemplo, o URL inicial pode se parecer com o seguinte exemplo:

https://test.marketing.adobe.com/content/dam/mac/scholasticinc/Aug_MBM.jpeg?ch_ck=1470774943867

Após a sincronização da atividade, o URL de entrega pode ser parecido com o seguinte exemplo:

http://s7d2.scene7.com/is/image/TargetTest/Aug_MBM?tm=1470768352933&fit=constrain&hei=173&wid=300

O Recommendations suporta a opção "Substituir por" nas tags DIV, SECTION e ARTICLE.

Observação: a troca de imagens exige uma conta do sistema de publicação do Adobe Scene7.

HTML Offer

Selecione uma oferta diferente de Content Library.

Observação: ofertas de HTML são armazenadas em servidores do Target.

Uma oferta de HTML pode ter até 256 KB.

Recomendação

Inclua recomendações nas atividades de teste A/B (incluindo as atividades Autoalocação e Direcionamento automático) e Direcionamento de experiência (XT). Para obter mais informações, consulte Recommendations como uma oferta.

Experience Fragment

Insira fragmentos de experiência criados em Adobe Experience Manager (AEM) nas atividades Target para auxiliar na otimização ou na personalização. Para obter mais informações, consulte Fragmentos de experiência do AEM.

Layout

As opções disponíveis são as seguintes:

Rearrange

Arraste o elemento para outro local no mesmo elemento pai ou DIV. Outros elementos trocam de local para abrir espaço para o elemento reorganizado.

Observação: o rastreamento de cliques não funciona em itens reorganizados.

Atualmente, determinadas ações do VEC, como Rearrange e Move, presumem que os elementos irmãos dos elementos pais de origem e destino estão completamente carregados. Se o carregamento lento ocorrer nos elementos DOM principais (origem ou destino), essas ações do VEC podem causar comportamento inconsistente. Estamos trabalhando em uma abordagem mais confiável para fazer com que as ações do VEC funcionem em elementos DOM carregados lentamente. Como solução temporária, você pode usar Custom Code nesses cenários para renderizar suas experiências.

Resize

Redimensionar um elemento na página. Quando você seleciona Resize, aparece uma alça no canto inferior direito do elemento que permite arrastar esse canto para redimensionar. Segure a tecla Shift para manter a mesma proporção.

Observação: elementos em linha não podem ser redimensionados.

Move move

Mover elementos na página. Diferentemente da opção Rearrange, Move não desloca outros elementos para abrir espaço para o elemento que está sendo movido. Use as teclas de seta para ajustar o movimento. (Aprimoramento planejado: suporte para garantir que os elementos movidos não estejam ocultos atrás de outros elementos.)

Em determinadas situações, como quando uma restrição CSS requer que um elemento permaneça dentro do elemento pai, você não pode mover o elemento para fora dele. Um elemento não pode ser movido para fora de um container que tenha a seguinte propriedade CSS: overflow: hidden.

Consulte Rearrange acima para obter mais informações sobre comportamento inconsistente com as ações Move e Rearrange devido ao carregamento lento de elementos DOM.

Hide

Ocultar o elemento. O espaço em branco permanece, mas o conteúdo é removido.

Remove

Remova o elemento. O espaço em branco atrás da imagem é removido e o espaço onde o elemento estava é recolhido.

Observação: os itens de uma mbox "clássica" (uma mbox criada em uma campanha do Target Classic) não podem ser removidos usando esta opção.

Expand Section

Selecione o elemento pai, além do elemento selecionado originalmente. Ao selecionar qualquer elemento pai, todos os filhos desse elemento serão selecionados automaticamente. Você pode expandir a seleção várias vezes.

Navigate to Link

Abra o destino do link.

Undo/Redo

Desfaça as alterações feitas em suas atividades durante uma sessão de alteração. Você também pode refazer alterações que foram desfeitas anteriormente.

Considerações considerations

Suporte a elemento personalizado custom

O VEC oferece suporte a Componentes da Web para permitir que você crie e teste experiências e ofertas personalizadas em elementos personalizados e em elementos dentro de elementos personalizados. Essa funcionalidade está disponível no VEC para todos os tipos de atividade Target.

A maioria das ações do VEC é compatível com eventos personalizados e dentro de eventos personalizados, com as seguintes exceções:

As seguintes ações não estão disponíveis em elementos personalizados:

A seguinte ação não está disponível dentro de elementos personalizados:

Navegar pelos elementos usando o caminho DOM dom-path

Ao clicar em um elemento na página, o menu de opções de VEC é exibido. Além disso, ao clicar em um elemento, o caminho DOM correspondente é exibido na parte inferior da página.

Você pode usar o caminho DOM para ver rapidamente as informações sobre o elemento selecionado (tipo, ID e classe) e mover para cima ou para baixo o caminho DOM para selecionar o elemento desejado.

Quando você passa o mouse sobre o caminho DOM, uma caixa azul destaca o elemento correspondente no VEC. Quando você clica no elemento, uma caixa laranja destaca o elemento e o menu de opções do VEC é exibido, conforme explicado acima.

É possível navegar com facilidade em qualquer elemento pai, irmão ou filho do VEC usando o caminho DOM.

O recurso de caminho DOM também está disponível ao configurar o rastreamento de cliques.