Integração

Personalização usando o Visual Experience Composer

AEM Sites 6.5

Neste capítulo, exploraremos a criação de experiências usando 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 de conteúdo/Editor de conteúdo (Adobe Experience Manager)
  • Profissional de marketing (Adobe Target/Equipe de otimização)

Página inicial do site WKND

Cenário 1 do AEM Target

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é Atividades guia.

    2. Clique em Criar atividade e selecione o tipo de atividade como Teste A/B

      Adobe Target - Criar atividade

    3. Selecione o Web e escolha a variável Visual Experience Composer.

    4. Insira o URL da atividade e clique em Próxima para abrir o Visual Experience Composer.

      Adobe Target - Criar atividade

    5. Para Visual Experience Composer para carregar, habilite 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. Experiência A fornece a página inicial padrão do WKND e vamos editar o layout de conteúdo para Experiência B.

      Experiência B

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

      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 as Melhores assadores contêiner da 1ª linha, 1ª coluna, para a 1ª linha, 3ª coluna. Agora a variável Melhores assadores o container está ao lado de Exposições de fotografia recipiente.

      Troca de contêiner
      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 Inserir após > HTML opção 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 Próxima para continuar com sua atividade.

    14. Selecione o Método de alocação de tráfego como manual e atribuir 100% de tráfego para Experiência B.

      Tráfego da experiência B

    15. Clique em Avançar.

    16. Fornecer Métricas de meta para a atividade e Salvar e fechar 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 sua Atividade e salve as alterações.

    18. Na tela Detalhes da atividade, verifique se Ativar 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