Opções do Visual Experience Composer
A versão Adobe Target Standard/Premium 25.2.1 (17 de fevereiro de 2015) apresenta o 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 de Teste A/B. As opções variam, dependendo do tipo de atividade.
Painel Experiências
O painel Experiências é exibido no painel esquerdo do VEC.
Você pode exibir, criar, renomear ou remover experiências usando o painel Experiências.
As seguintes opções estão disponíveis no painel Experiências:
- 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 Adicionar (
- Renomear uma experiência: clique no ícone Renomear (
- Duplicar, excluir ou redirecionar uma experiência: clique no ícone Mais Ações (
Configurações/configurações de atividade settings
Clique no ícone Configurar (
As opções disponíveis são as seguintes:
- Propriedades: atribuir propriedades à atividade ou remover propriedades da atividade. Propriedades é um recurso (Target Premium). Para obter mais informações, consulte Permissões de usuário do Enterprise.
- Entrega de página: 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.
- Preferências do Site: 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 (
Design/Procurar modos
Use os botões Design/Procurar exibidos na parte superior da tela de design para alternar entre o modo de design e de navegação.
Use o modo Procurar para navegar no site e escolher o modo de exibição ou a página que deseja atualizar. Retorne ao modo Design para adicionar ou editar suas alterações.
Desfazer/Refazer
Você pode desfazer as alterações feitas ao clicar no ícone Desfazer (
Para refazer uma ação, expanda o grupo de botões Desfazer/Refazer e escolha Refazer.
Painel Componentes
Você pode adicionar vários componentes à sua página da Web e editá-los conforme necessário usando o painel novos Componentes.
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:
-
Básico
- Divisor
- HTML
- Imagem
-
Texto
- Cabeçalho
- Parágrafo
- Link
-
Dinâmico
-
-
Arraste o componente sobre um elemento de página existente na tela Design.
-
Escolha substituir o elemento selecionado ou inserir o componente antes ou depois do elemento selecionado.
Painel Modificações
Para abrir o painel Modificações, clique no ícone Mostrar modificações (
O painel Modificações 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 Mais Opções (
Clique no ícone Mais Opções (
Tela Design
A tela Design permite selecionar janelas de visualização, inclusive ajustar à tela, Área de Trabalho, Tablet, Paisagem Móvel e Retrato Móvel. 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 de desenho 1}, 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 Propriedades
O painel Propriedades 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 Modificações.
O painel Propriedades pode ser recolhido no painel direito para que você possa ocultar a tela de design e aumentá-la. Clique no ícone Mostrar/Ocultar Propriedades (
Editar elementos usando a tela Design design
As seções a seguir mostram como editar imagens e texto na tela Design. A tela Design, junto 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 de Teste A/B, o VEC será semelhante à seguinte ilustração:
Selecione componentes do quadro Componentes 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 Propriedades 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 Mostrar Opções Avançadas 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 Mostrar opções avançadas 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 no texto em uma atividade de Teste A/B, o VEC será semelhante à seguinte ilustração:
Selecione componentes do quadro Componentes 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 Mostrar modificações (
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 Propriedades, 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 Mostrar Opções Avançadas 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 Mostrar opções avançadas 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 Direcionamento de experiência. 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 Mostrar 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.
Mais informações sobre a interface atualizada
-
Notas de versão do Target Standard/Premium 25.2.1 (17 de fevereiro de 2025): fornece um resumo das principais alterações na interface do usuário do Target para Atividades, Recomendações e o Visual Experience Composer (VEC).
-
Notas de versão do Target Standard/Premium 25.1.1 (9 de janeiro de 2025): fornece um resumo das principais alterações na interface do usuário do Target para a Biblioteca de Ofertas.
-
Compreender a Target Interface: fornece uma breve visão geral para ajudá-lo a se familiarizar com o Target e fornece links para informações mais detalhadas e instruções passo a passo.
-
Alterações do Visual Experience Composer: a versão Adobe Target Standard/Premium 25.2.1 (17 de fevereiro de 2015) apresenta um Visual Experience Composer (VEC) atualizado. Este artigo explica as diferenças entre as versões herdadas e atualizadas do VEC.
-
Opções do Visual Experience Composer: este artigo explica a interface do usuário do VEC atualizada e suas opções.
-
Target Perguntas frequentes sobre atualização da interface do usuário: estas perguntas frequentes abordam perguntas comuns sobre a nova interface do usuário do Target e do Visual Experience Composer (VEC), incluindo alterações de navegação, locais de recursos e a desativação da opção de versão temporária da interface do usuário. Seja você um profissional de marketing, desenvolvedor ou administrador, essas Perguntas frequentes ajudarão a fazer a transição descomplicada e a aproveitar ao máximo a interface atualizada.