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

AEM
- Instância de publicação do AEM em execução no 4503
- AEM integrado ao Adobe Target usando o Adobe Experience Platform Launch
Experience Cloud
- Acesso à Adobe Experience Cloud de suas organizações - https://<yourcompany>.experiencecloud.adobe.com
- Experience Cloud provisionado com Adobe Target

Atividades do profissional de marketing

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
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.
5. Para Visual Experience Composer para carregar, habilite Permitir carregamento de scripts não seguros no navegador e recarregue a página.
6. Observe que a página inicial do site WKND é aberta no editor do Visual Experience Composer.
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.
8. Clique em um dos contêineres de layout do cartão (Melhores assadores) e selecione Reorganizar opção.
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.
  
  Após a troca
10. Da mesma forma, reorganize as posições para os outros contêineres de cartão.
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.
```
<h1 style="text-align:center">Check Out the Hot Spots in Town</h1>
```
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.
15. Clique em Avançar.
16. Fornecer Métricas de meta para a atividade e Salvar e fechar o 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.
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.
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.

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.