Opções do Visual Experience Composer
A versão Adobe Target Standard/Premium 25.2.1 (17 de fevereiro de 2015) introduz um Visual Experience Composer (VEC) atualizado. Este artigo explica a interface do usuário atualizada e suas opções.
O VEC é exibido ao criar ou editar uma atividade existente.
Visão geral da interface do VEC
As seções a seguir explicam as opções disponíveis no VEC atualizado para uma atividade A/B Test. As opções variam, dependendo do tipo de atividade.
Painel Experiences
O painel Experiences é exibido no painel esquerdo do VEC.
Você pode exibir, criar, renomear ou remover experiências usando o painel Experiences.
As seguintes opções estão disponíveis no painel Experiences:
- Exibir uma experiência: para exibir uma experiência, clique na experiência desejada para exibi-la na tela Design.
- Adicionar uma experiência: clique no ícone Add (
- Renomear uma experiência: clique no ícone Rename (
- Duplique, exclua ou redirecione uma experiência: clique no ícone More Actions (
Configurações/configurações de atividade
Clique no ícone Configure (
As opções disponíveis são as seguintes:
- Properties: Atribua propriedades à atividade ou remova propriedades da atividade. Properties é um recurso (Target Premium). Para obter mais informações, consulte Permissões de usuário do Enterprise.
- Page Delivery: Incluir a mesma experiência em páginas semelhantes do site. Use um modelo de página para fornecer estrutura às suas páginas, ou, se as páginas contiverem elementos semelhantes, para testar variações em elementos de página estruturadas de forma semelhante ou em todo o domínio. Para obter mais informações, consulte Incluir a mesma experiência em páginas semelhantes.
- Site Preferences: configure as preferências do site para especificar como o Target gera seletores de CSS. Para obter mais informações, consulte Seletores de CSS em Configurar o Visual Experience Composer.
- Adicionar mais páginas: adicione mais páginas à atividade para criar uma atividade multipáginas que permita criar uma história em várias páginas, com um design específico para cada página. Para obter mais informações, consulte Atividade multipáginas.
- Público-alvo: use um único público para a atividade.
- Vários públicos-alvo: atribua vários públicos-alvo à atividade. Clique no ícone Adicionar públicos-alvo (
Modos Design/Browse
Use os botões Design/Browse exibidos na parte superior da tela de design para alternar entre o modo de design e o modo de navegação.
Use o modo Browse para navegar em seu site e escolher o modo de exibição ou a página que deseja atualizar. Volte para o modo Design para adicionar ou editar suas alterações.
Undo/Redo
Você pode desfazer as alterações feitas ao clicar no ícone Undo (
Para refazer uma ação, expanda o grupo de botões Desfazer/Redo e escolha Redo.
Painel Components
Você pode adicionar vários componentes à sua página da Web e editá-los conforme necessário, usando o novo painel Components.
Para adicionar um novo componente a uma experiência:
-
Clique no componente desejado que deseja adicionar para realçá-lo.
Os componentes disponíveis são agrupados em contêineres lógicos:
-
Basic
- Divider
- HTML
- Image
-
Text
- Heading
- Paragraph
- Link
-
Dynamic
-
-
Arraste o componente sobre um elemento de página existente na tela Design.
-
Escolha inserir o componente antes de depois de depois do elemento selecionado.
Em comparação com a versão anterior do VEC, não é possível substituir um elemento selecionado por um componente.
Painel Modifications
Para abrir o painel Modifications, clique no ícone Show Modifications (
O painel Modifications mostra todas as alterações feitas em sua página no Visual Experience Composer (VEC) e permite que você faça alterações adicionais (como Seletor de CSS, Mbox e Código personalizado).
Clique no ícone More Options (
Clique no ícone More Options (
Tela Design
A tela Design permite selecionar janelas de visualização, inclusive ajustar à tela, Desktop, Tablet, Mobile Landscape e Mobile Portrait. Por padrão, a tela se ajusta à página junto com os visores definidos na seção Administração.
Também é possível aumentar ou diminuir o zoom clicando no ícone apropriado (
Ao clicar em um elemento de página na tela Design, 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:
Painel Properties
O painel Properties permite alterar as propriedades dos elementos selecionados na página, sejam eles elementos do HTML ou objetos específicos do Target, como recomendações ou ofertas.
Clique nos ícones na parte superior do painel para editar o código HTML ou excluir, duplicar ou ocultar elementos. As alterações aparecem no painel Modifications.
O painel Properties pode ser recolhido no painel direito. Clique no ícone Show/Hide Properties (
Editar elementos usando a tela Design design
As seções a seguir mostram como editar imagens e texto na tela Design. A tela Design, juntamente com os painéis Componentes, Modificações e Propriedades fornecem ferramentas poderosas para permitir que você crie experiências facilmente para suas atividades.
Opções de imagem
Se você clicar em uma imagem em uma atividade A/B Test, o VEC será semelhante à seguinte ilustração:
Selecione componentes do quadro Components no lado esquerdo para inserir os seguintes elementos:
- Básico (divisor, HTML, imagem).
- Texto (cabeçalho, parágrafo, link).
- Dinâmico (Recomendação, Fragmento de experiência, oferta do HTML).
O menu na parte superior da imagem permite fazer o seguinte:
- Inserir um link (
- Altere a imagem (
- Adicionar personalização (
- Excluir a imagem (
O painel Properties no lado direito permite configurar ainda mais as propriedades da imagem.
Os ícones na parte superior do quadro permitem fazer o seguinte:
- Edite o HTML (
- Duplique a imagem (
- Excluir a imagem (
- Ocultar a imagem (
As opções no quadro direito permitem que você faça o seguinte:
- Edite a classe CSS.
- Configure as propriedades da imagem (fonte, título, texto alternativo).
- Edite o URL do link.
- Configure o tamanho da imagem (altura e largura). Clique em Show Advanced Options para configurar o tamanho mínimo e máximo, a largura, a altura, o estouro e o ajuste do objeto da imagem.
- Configure a posição da imagem na página (absoluta, fixa, relativa, estática ou fixa).
- Configure o espaçamento do elemento, incluindo a margem e o preenchimento.
- Configure os efeitos do elemento (opacidade). Clique em Show Advanced Options para configurar os valores de sépia, escala de cinza, contraste, brilho e desfoque da imagem. Também é possível inverter ou girar a imagem.
- Configure os estilos em linha da imagem.
Opções de texto
Se você clicar em texto em uma atividade A/B Test, o VEC será semelhante à seguinte ilustração:
Selecione componentes do quadro Components no lado esquerdo para inserir os seguintes elementos:
- Básico (divisor, HTML, imagem).
- Texto (cabeçalho, parágrafo, link).
- Dinâmico (Recomendação, Fragmento de experiência, oferta do HTML).
Clique no ícone Show Modifications (
O menu na parte superior do elemento de texto permite fazer o seguinte:
- Configurar as propriedades do texto (nível do cabeçalho, parágrafo, citação em bloco ou monoespaço)
- Selecione a cor do texto (
- Configure os atributos do texto (negrito, itálico, sublinhado ou tachado) (
- Configure o alinhamento do texto (esquerda, centro, direita, justificado) (
- Inserir um link (
- Substitua o conteúdo por uma oferta do HTML, Fragmento de experiência ou Recomendação.
- Edite o HTML (
- Adicionar personalização (
- Excluir a imagem (
O painel Properties no lado direito permite configurar ainda mais as propriedades do texto.
Os ícones na parte superior do quadro permitem fazer o seguinte:
- Edite o HTML (
- Duplique o texto (
- Exclua o texto (
- Ocultar o texto (
As opções no quadro direito permitem que você faça o seguinte:
- Edite a classe CSS.
- Configurar a cor de fundo e a imagem do texto.
- Configure a tipografia do texto (estilo do cabeçalho, tamanho da fonte, espessura da fonte, altura da linha, alinhamento, cor do texto, estilo do texto (negrito, itálico, sublinhado ou tachado)).
- Configure listas, incluindo com marcadores, numeradas ou A,B,C.
- Escolha a cor da borda.
- Configure o tamanho da caixa de texto (altura e largura). Clique em Show Advanced Options para configurar o tamanho mínimo e máximo, a largura, a altura, o estouro e o ajuste do objeto da caixa de texto.
- Configure a posição da caixa de texto na página (absoluta, fixa, relativa, estática ou fixa) e defina o número de pixels entre a parte superior, direita, inferior e esquerda.
- Configure o espaçamento do elemento, incluindo a margem e o preenchimento.
- Configure os efeitos do elemento (opacidade). Clique em Show Advanced Options para configurar os valores de sépia, escala de cinza, contraste, brilho e desfoque da imagem. Também é possível inverter ou girar o texto.
- Configure os estilos em linha.
Editar HTML
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 visualização de código e a visualização de edição avançada do HTML.
As seguintes tags de HTML 5 podem ser aninhadas:
<a><h1-h6>, <p>, <ul>, <ol>, <menu>, <div>, <figure>, <figcaption><ins><h1-h6>, <p>, <ul>, <ol>, <menu><del><ul>, <ol>, <menu>, <h1-h6>, <p><label><p>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.
Se você não vir o caminho DOM, clique no ícone Show DOM (
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.
É 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.