[Integração]{class="badge positive"}

Personalization usando o Visual Experience Composer

[AEM Sites 6.5]{class="badge informative"}

Neste capítulo, exploraremos a criação de experiências usando o Visual Experience Composer arrastando e soltando, alternando e modificando o layout e o conteúdo de uma página da Web no Target.

Visão geral do cenário

A página inicial do site WKND exibe atividades locais ou a melhor coisa a ser feita em torno de uma cidade na forma de layouts de cartão. Como profissional de marketing, você recebeu a tarefa de modificar a página inicial, reorganizando os layouts do cartão para ver como isso afeta o engajamento do usuário e impulsiona a conversão.

Usuários envolvidos

Para este exercício, os seguintes usuários precisam estar envolvidos e, para executar algumas tarefas, você pode precisar de acesso administrativo.

  • Produtor/Editor de Conteúdo (Adobe Experience Manager)
  • Profissional de marketing (Adobe Target/Equipe de otimização)

Página inicial do site WKND

Cenário de Destino do AEM 1

Pré-requisitos

Atividades do profissional de marketing

  1. O profissional de marketing cria uma atividade de público-alvo A/B no Adobe Target.

    1. Na janela do Adobe Target, navegue até a guia Atividades.

    2. Clique no botão Criar atividade e selecione o tipo de atividade como Teste A/B

      Adobe Target - Criar Atividade

    3. Selecione o canal Web e escolha o Visual Experience Composer.

    4. Insira o URL da atividade e clique em Avançar para abrir o Visual Experience Composer.

      Adobe Target - Criar Atividade

    5. Para o Visual Experience Composer carregar, habilite o Permitir carregamento de scripts não seguros no navegador e recarregue a página.

      Atividade de Direcionamento de Experiência

    6. Observe que a página inicial do site WKND é aberta no editor do Visual Experience Composer.

      VEC

    7. A Experiência A fornece a Página Inicial WKND padrão e vamos editar o layout de conteúdo para a Experiência B.

      Experiência B

    8. Clique em um dos contêineres de layout do cartão (Melhores Roasters) e selecione a opção Reorganizar.

      Seleção de Contêiner

    9. Clique no contêiner que você deseja reorganizar e arraste-o e solte-o no local desejado. Vamos reorganizar o contêiner Melhores Roasters da primeira linha, primeira coluna, para a primeira linha, terceira coluna. Agora o contêiner Melhores assadores está ao lado do contêiner Exposições de Fotografia.

      Troca de Contêineres
      Após a troca
      Contêiner Trocado

    10. Da mesma forma, reorganize as posições para os outros contêineres de cartão.

      Contêiner Trocado

    11. Também vamos adicionar um texto de cabeçalho abaixo do componente Carrossel e acima do layout do cartão.

    12. Clique no contêiner do carrossel e selecione a opção Inserir após > HTML para adicionar HTML.

      Adicionar texto

      code language-html
      <h1 style="text-align:center">Check Out the Hot Spots in Town</h1>
      

      Adicionar texto

    13. Clique em Avançar para continuar com sua atividade.

    14. Selecione o Método de Alocação de Tráfego como manual e aloque 100% de tráfego para a Experiência B.

      Tráfego da Experiência B

    15. Clique em Avançar.

    16. Forneça as Métricas de meta para sua Atividade e Salve e Feche o Teste A/B.

      Métrica de meta de teste A/B

    17. Forneça um nome (Atualização da Página Inicial do WKND) para a Atividade e salve as alterações.

    18. Na tela Detalhes da atividade, Ative sua atividade.

      Ativar Atividade

    19. Navegue até a página inicial da WKND (http://localhost:4503/content/wknd/en.html) e observe as alterações que adicionamos à atividade Atualização de página inicial A/B de teste WKND.

      Página Inicial do WKND Atualizada

    20. Abra o console do navegador e inspecione a guia de rede para procurar a resposta do público-alvo para a atividade de Atualização de página inicial A/B de WKND.

    Atividade de Rede

Resumo

Neste capítulo, um profissional de marketing conseguiu criar uma experiência usando o Visual Experience Composer arrastando e soltando, alternando e modificando o layout e o conteúdo de uma página da Web sem alterar nenhum código para executar um teste.

recommendation-more-help
d30c09d2-e4b1-4b0b-a09a-250d84817092