v7 v8

Criar uma landing page

Sobre a criação de landing pages

Este caso de uso mostra o uso do Editor digital para criar uma Landing page no console do Adobe Campaign.

Antes de começar a configurar a Landing page no Adobe Campaign, verifique se você tem um ou mais templates para representar a(s) página(s) HTML.

O principal objetivo desse caso de uso é fazer com que os campos de formulário da Landing page correspondam aos campos internos no Adobe Campaign usando as funções no DCE.

Criação da landing page

Para criar um novo aplicativo web tipo landing page, siga estas etapas:

  1. Vá para a guia Campaigns, clique no link Web application e clique no botão Create.

  2. Selecione o modelo New landing page, insira um rótulo e clique em Save.

  3. Clique na guia Edit.

  4. Exclua a atividade Final.

  5. Adicione uma atividade Page após a atividade Storage.

  6. Edite a atividade Page 2 e desmarque a opção Activate outbound transitions na guia Properties.

  7. Salve as alterações.

Você obterá a seguinte sequência:

OBSERVAÇÃO

Para obter mais informações sobre criação de aplicação web, consulte esta seção.

Etapa 1 — seleção e carregamento de modelos

Nesta seção, vamos examinar como importar conteúdo HTML para cada página da aplicação Web.

Um template deve conter:

  • um arquivo HTML (obrigatório)
  • um ou mais arquivos CSS (opcional)
  • uma ou mais imagens (opcional)

Para carregar o template na primeira página, siga as etapas abaixo:

  1. Abra a primeira atividade Page da aplicação web.

  2. Selecione From a file para buscar seu modelo de conteúdo.

  3. Selecione o arquivo HTML a ser usado.

  4. Clique em Abrir para iniciar a importação.

    Durante o carregamento, a lista de arquivos compartilhados é exibida. O sistema de importação verifica se todos os arquivos vinculados ao HTML selecionado estão no lugar (CSS, imagens, etc.).

    Clique no botão Close após a conclusão da importação.

    ATENÇÃO

    Aguarde até obter a seguinte mensagem antes de fechar: The external resources have been successfully published.

  5. Clique na guia Properties.

  6. Digite um rótulo para cada página (por exemplo: "Page 1= Collect", "Page 2=Thank you").

Aplique essas etapas para cada página inserida na aplicação web.

ATENÇÃO

O DCE executa o código JavaScript para a página HTML carregada. Erros JavaScript no template HTML que podem aparecer na interface do Adobe Campaign. Esses erros não estão relacionados ao editor. Para garantir que não haja erros nos arquivos importados, recomenda-se testar em um navegador antes de importar os arquivos para o DCE.

Etapa 2 - Configuração do conteúdo

Nesta seção, vamos ajustar o conteúdo importado e vincular os campos do banco de dados ao formulário da página da Web. A aplicação web criada anteriormente é:

Modificação de conteúdo

Vamos começar alterando as cores da página. Para fazer isso:

  1. Abra a página Collection.

  2. Clique no plano de fundo.

  3. Clique em Cor do plano de fundo no lado direito.

  4. Selecione uma nova cor de plano de fundo.

  5. Clique em OK para confirmar a alteração.

  6. Aplique esses mesmos processos para alterar a cor do botão

Vinculação de campos de formulário

Vamos vincular os campos na página aos campos no banco de dados, para salvar as informações fornecidas.

  1. Selecione um campo de formulário.

  2. Editar a seção Field no lado direito do editor.

  3. Selecione o campo de banco de dados que deseja vincular ao campo selecionado.

  4. Repita esse processo para cada campo na página.

Você pode tornar um campo obrigatório: por exemplo, clique no campo Email e habilite a opção Mandatory.

Criação de um link para a próxima página

Esta etapa é obrigatória porque permitirá que o aplicativo Web determine a sequência das próximas etapas: salvar os dados coletados no banco de dados e exibir a próxima página (página Obrigado).

  1. Selecione o botão Send it! da página Collection.

  2. Clique no menu suspenso Action.

  3. Selecione a ação Next page.

Inserção de um campo de personalização

Esta etapa permite personalizar a página de agradecimento. Para fazer isso:

  1. Abra a página Thank you.

  2. Coloque o cursor em uma área de texto, onde você deseja inserir o nome do recipient.

  3. Selecione Personalization field no menu Insert da barra de ferramentas.

  4. Selecione o nome.

O campo de personalização tem um plano de fundo amarelo no editor.

Etapa 3 - Publicação de conteúdo

O conteúdo é publicado pelo painel do aplicativo web. Clique no botão Publish para executá-lo.

Durante a publicação, é exibido um log. O sistema de publicação analisa todo o conteúdo encontrado na aplicação Web

OBSERVAÇÃO

No log de publicação, os avisos e erros são classificados por atividade.

Agora o formulário está disponível: sua URL está acessível no painel do aplicativo e pode ser enviada para os recipients.

Nesta página