Você está visualizando o conteúdo de ajuda da versão:

O recurso de páginas de aterrissagem permite a importação rápida e fácil de um design e conteúdo diretamente em uma página do AEM. Um desenvolvedor da web pode preparar o HTML e ativos adicionais que podem ser importados como uma página inteira ou apenas como parte de uma página. Essa funcionalidade é útil para criar páginas de aterrissagem de marketing que ficam ativas apenas por um tempo limitado e precisam ser criadas rapidamente.

Esta página descreve o seguinte:

  • o aspecto de páginas de aterrissagem no AEM, incluindo os componentes disponíveis
  • como criar uma página de aterrissagem e importar um pacote de design
  • como trabalhar com páginas de aterrissagem no AEM
  • como configurar páginas de aterrissagem para dispositivos móveis

A preparação do pacote de design para importação é abordada em Extensão e configuração do Importador de design. A integração com o Adobe Analytics é abordada em Integração de páginas de aterrissagem com o Adobe Analytics.

O que são páginas de aterrissagem?

Páginas de aterrissagem são sites de uma ou várias páginas que são o “ponto final” de uma campanha de marketing, por exemplo, com emails, adwords/banners, redes sociais. Uma página de aterrissagem pode servir a vários propósitos, mas todos têm uma coisa em comum: o visitante deve realizar uma tarefa, e é isso que define o sucesso de uma página de aterrissagem.

O recurso Páginas de aterrissagem no AEM permite que profissionais de marketing trabalhem com designers da web em agências ou equipes de criação internas para criar designs de página que podem ser facilmente importados para o AEM e ainda editados pelos profissionais de marketing e publicados de acordo com as mesmas diretrizes que o restante dos sites desenvolvidos com o AEM.

No AEM, você cria páginas de aterrissagem realizando as seguintes etapas:

  1. Crie uma página no AEM que contenha a tela de páginas de aterrissagem. O AEM acompanha uma amostra chamada Página do importador.
  2. Prepare o HTML e os ativos.
  3. Comprima os recursos em um arquivo zip, referido aqui como Pacote de design.
  4. Importe o pacote de design na página do importador.
  5. Modifique e publique a página.

Páginas de aterrissagem para desktop

Uma página de aterrissagem de amostra no AEM tem a seguinte aparência:

chlimage_1

Páginas de aterrissagem para dispositivos móveis

Uma página de aterrissagem também pode ter uma versão móvel. Para ter uma versão móvel separada da página de aterrissagem, o design de importação deve ter dois arquivos html: index.htm(l) e mobile.index.htm(l).

O procedimento de importação da página de aterrissagem é o mesmo que o de uma página de aterrissagem normal. O design da página de aterrissagem tem um arquivo html adicional correspondente à página de aterrissagem para dispositivos móveis. Esse arquivo html também deve ter um div de tela com id=cqcanvas, assim como o html da página de aterrissagem para desktop, e oferece suporte a todos os componentes editáveis descritos para a página de entrada para desktop.  

A página de aterrissagem para dispositivos móveis é criada como uma página filho da página de aterrissagem para desktop. Para abri-la, navegue até a página de aterrissagem em Sites e abra a página filho.

chlimage_1

Observação:

A página de aterrissagem para dispositivos móveis será excluída/desativada junto com a página de aterrissagem para desktop se esta última for excluída ou desativada.

Componentes de páginas de aterrissagem

Para que partes do HTML importado sejam editáveis no AEM, você pode mapear o conteúdo no HTML de páginas de aterrissagem diretamente para componentes do AEM. O importador de design compreende os seguintes componentes por padrão:

  • Texto, para qualquer texto
  • Título, para conteúdo em tags H1-6
  • Imagem, para imagens que devem ser criadas em formatos intercambiáveis
  • Frases de chamariz:
    • Link de clickthrough
    • Link gráfico
  • Formulário de lead para CTA, para capturar informações de usuários
  • Sistema de parágrafos (Parsys), para permitir que qualquer componente seja adicionado ou que o componente acima seja convertido

Além disso, é possível estender esse sistema e oferecer suporte a componentes personalizados. Esta seção descreve os componentes detalhadamente.

Texto

O componente deTexto permite que você insira um bloco de texto usando um editor WYSIWYG. Consulte Componente de texto para obter mais informações.

Veja a seguir um exemplo de um componente de texto em uma página de aterrissagem:

chlimage_1

Título

O componente de título permite exibir um título e configurar o tamanho (h1-6). Consulte Componente de título para obter mais informações.

Veja a seguir um exemplo de um componente de título em uma página de aterrissagem:

chlimage_1

Imagem

O componente de imagem exibe uma imagem que você pode arrastar e soltar no Localizador de conteúdo ou clicar para fazer upload. Consulte Componente de imagem para obter mais informações.

Veja a seguir um exemplo de um componente de imagem em uma página de aterrissagem:

chlimage_1

Frases de chamariz (CTA)

O design de uma página de aterrissagem pode ter vários links; alguns deles podem ser usados como “Frases de chamariz”.

A Frase de chamariz (CTA) é usada para fazer com que o visitante tome medidas imediatas na página de aterrissagem, como “Inscreva-se agora”, “Assista a este vídeo”, “Somente por tempo limitado” e assim por diante. 

  • Link de clickthrough - permite adicionar um link de texto que, quando clicado, direciona o visitante a um URL.
  • Link gráfico - permite adicionar uma imagem que, quando clicada, leva o visitante para um URL de destino.

Ambos os componentes de CTA têm opções semelhantes. O Link de clickthrough tem opções adicionais de Rich Text. Os componentes estão descritos em detalhes nos parágrafos a seguir. 

Link de clickthrough

Este componente de CTA pode ser usado para adicionar um link de texto na página de aterrissagem. Esse link pode ser clicado para direcionar o usuário ao URL especificado nas propriedades do componente. Ele faz parte do grupo “Frases de chamariz”.

chlimage_1

Etiqueta

O texto que os usuários veem. É possível modificar a formatação com o editor de rich text.

URL de direcionamento

Insira o URI que você deseja que os usuários acessem se clicarem no texto.

Opções de renderização

Descreve opções de renderização. Você pode selecionar:

  • Carregar página em uma nova janela de navegador
  • Carregar página na janela atual
  • Carregar página no quadro pai
  • Cancelar todos os quadros e carregar a página na janela inteira do navegador

CSS

Na guia Estilo, insira um caminho para sua folha de estilos CSS.

ID

Na guia Estilo, insira uma ID para que o componente identifique-o exclusivamente.

Veja a seguir um exemplo de um link de clickthrough:

chlimage_1

Link gráfico

Esse componente de CTA pode ser usado para adicionar qualquer imagem gráfica com um link à página de aterrissagem. A imagem pode ser um simples botão ou qualquer imagem gráfica como fundo. Quando a imagem é clicada, o usuário é levado para o URL de direcionamento especificado nas propriedades do componente. Faz parte do grupo Frases de chamariz.

chlimage_1

Imagem

Arraste ou adicione uma imagem em que os usuários clicam para acessar o URL direcionado.

Título

Na guia Avançado, insira um título para a imagem.

Texto alternativo

Na guia Avançado, insira o texto alternativo caso os gráficos estejam desativados.

Descrição

Na guia Avançado, insira uma descrição para a imagem.

Tamanho

Na guia Avançado, insira a largura e a altura da imagem

URL de direcionamento

Insira o URI que você deseja que os usuários acessem se clicarem na imagem.

Opções de renderização

Descreve opções de renderização. Você pode selecionar:

  • Carregar página em uma nova janela de navegador
  • Carregar página na janela atual
  • Carregar página no quadro pai
  • Cancelar todos os quadros e carregar a página na janela inteira do navegador

CSS

Na guia Estilo, insira um caminho para sua folha de estilos CSS.

ID

Na guia Estilo, insira uma ID para que o componente identifique-o exclusivamente.

Veja a seguir um exemplo de link gráfico:

chlimage_1

Formulário de lead para Frases de chamariz (CTA)

Um formulário de lead é um formulário usado para coletar informações de perfil de um visitante/lead. Essas informações podem ser armazenadas e usadas posteriormente como base para realizar um marketing eficiente. Em geral, elas incluem o título, o nome, o email, a data de nascimento, o endereço e os interesses dos usuários, entre outras opções. Faz parte do grupo Formulário de lead para CTA.

Um exemplo de formulário de lead para CTA pode ser:

chlimage_1

Formulários de lead para CTA são construídos a partir de vários componentes diferentes:

  • Formulário de lead
    O componente de formulário de lead define o início e o fim de um novo formulário de lead em uma página. Outros componentes podem ser colocados entre esses elementos, como ID do email, Nome e assim por diante. 
  • Elementos e campos do formulário
    Os campos e elementos do formulário podem incluir caixas de texto, botões de opção, imagens e outros itens. O usuário geralmente completa uma ação em um campo de formulário, como digitar um texto. Consulte os elementos de formulário individuais para obter mais informações.
  • Componentes de perfil
    Os componentes de perfil são relacionados aos perfis de visitantes usados para a colaboração social e outras áreas onde é necessária a personalização do visitante. 

O exemplo anterior mostra um exemplo de formulário, que consiste no componente Formulário de lead (início e fim), com os campos Nome e ID do email usados para entrada e um campo Enviar

No sidekick, os seguintes componentes estão disponíveis para o Formulário de lead para CTA:

chlimage_1

Configurações comuns a vários componentes de formulário de lead

Embora cada um dos componentes do formulário de lead tenha uma finalidade diferente, muitos são compostos de opções e parâmetros semelhantes.

Ao configurar qualquer um dos componentes do formulário, as seguintes guias estarão disponíveis na caixa de diálogo:

  • Título e texto
    Aqui, é necessário especificar informações básicas, como o título do componente e qualquer texto que o acompanhe. Se for o caso, também é possível definir outras informações importantes, como se o campo é de seleção múltipla e se os itens estão disponíveis para seleção.
  • Valores iniciais
    Permite especificar um valor padrão.
  • Restrições
    Aqui, é possível especificar se um campo é obrigatório e se as restrições de local estão no campo (por exemplo, deve ser numérico e assim por diante).
  • Estilo
    Indica o tamanho e estilo dos campos.

Observação:

Os campos que você vê variam de acordo com o componente individual.

Nem todas as opções estão disponíveis para todos os componentes do formulário de lead. Consulte Formulários para obter mais informações sobre essas configurações comuns.

Componentes do formulário de lead

A seção a seguir descreve os componentes disponíveis para formulários de lead para Frases de chamariz.

Sobre

Permite aos usuários adicionarem informações em uma seção Sobre.

chlimage_1

Campo de endereço

Permite que os usuários insiram informações de endereço. Ao configurar esse componente, você deve inserir o Nome do elemento na caixa de diálogo. O Nome do elemento é o nome do elemento do formulário. Indica onde os dados são armazenados no repositório.

chlimage_1

Data de nascimento

Os usuários podem inserir informações sobre data de nascimento.

chlimage_1

Id de email

Permite que os usuários insiram um endereço de email (identificação).

chlimage_1

Nome

Fornece um campo para os usuários inserirem seus nomes.

chlimage_1

Sexo

Os usuários podem selecionar o gênero em uma lista suspensa.

chlimage_1

Sobrenome

Os usuários podem inserir informações de sobrenome.

chlimage_1

Formulário de lead

Adicione esse componente para acrescentar um formulário de lead à sua página de aterrissagem. Um formulário de lead contém automaticamente um campo Início do formulário de lead e Final do formulário de lead. No meio, você adiciona os componentes de Formulário de lead descritos nesta seção.

chlimage_1

O componente Formulário de lead define o início e o final de um formulário usando os elementos Início do formulário e Fim do formulário. São sempre pareados para garantir que o formulário esteja definido corretamente.

Depois de adicionar o formulário de lead, você pode configurar o início do formulário ou o final do formulário clicando em Editar na barra correspondente.

Início do formulário de lead

Duas guias estão disponíveis para configuração Formulário e Avançado:

chlimage_1

Página de agradecimento

A página a ser referenciada para agradecer aos visitantes por suas informações. Caso deixado em branco, o formulário será exibido novamente após o envio.

Iniciar fluxo de trabalho

Determina qual fluxo de trabalho é acionado depois que um formulário de lead é enviado.

chlimage_1

Opções de publicação

As opções de publicação disponíveis são as seguintes:

  • Criar lead
  • Serviço de email: criar assinante e adicionar à lista - Use essa opção se estiver trabalhando com um provedor de serviços de email, como o ExactTarget.
  • Serviço de email: enviar email de resposta automática - Use essa opção se estiver trabalhando com um provedor de serviços de email, como o ExactTarget.
  • Serviço de email: cancelar inscrição do usuário da lista - Use essa opção se estiver usando um provedor de serviços de email, como o ExactTarget.
  • Cancelar inscrição do usuário

Formulário Identificador

O identificador de formulário identifica exclusivamente o formulário de lead. Use o identificador de formulário caso tenha vários formulários em uma única página; verifique se eles têm identificadores diferentes.

Carregar caminho

É o caminho para as propriedades do nó usadas para carregar valores predefinidos nos campos do formulário de lead.

Isso é um campo opcional que especifica o caminho para um nó no repositório. Quando este nó tem propriedades que correspondem aos nomes do campo, os campos apropriados no formulário são pré-carregados com o valor dessas propriedades. Caso não exista nenhuma correspondência, o campo vai conter o valor padrão.

Validação do cliente

Indica se a validação do cliente é necessária para esse formulário (a validação do servidor sempre ocorre). Isso pode ser obtido em conjunto com o componente Captcha de formulários.

Tipo de recurso de validação

Define o tipo de recurso de validação de formulário se você quiser validar todo o formulário de lead (em vez de campos individuais).

Caso esteja validando o formulário completo, inclua também um dos itens a seguir:

  • Um script para a validação do cliente:
    /apps/<myApp>/form/<myValidation>/formclientvalidation.jsp
  • Um script para a validação no lado do servidor:
    /apps/<myApp>/form/<myValidation>/formservervalidation.jsp

Configurações de ação

Dependendo da seleção em Opções de publicação, as Configurações de ação são alteradas. Por exemplo, quando você seleciona Criar lead, é possível configurar a lista à qual o lead é adicionado.

chlimage_1
  • Mostrar botão enviar
    Indica se um botão Enviar deve ser exibido ou não.
  • Nome do botão enviar
    Um identificador se você estiver usando vários botões Enviar em um formulário.
  • Título do botão enviar
    O nome que aparece no botão, como Enviar.
  • Mostrar botão redefinir
    Marque a caixa de seleção para tornar o botão Redefinir visível.
  • Título do botão redefinir
    O nome que aparece no botão Redefinir.
  • Descrição
    As informações que aparecem abaixo do botão.

Criação de uma página de aterrissagem

Ao criar uma página de aterrissagem, você precisa realizar três etapas:

  1. Criar uma página do importador.
  2. Preparar o HTML para importação.
  3. Importar o pacote de design.

Criação de uma página do importador

Antes de importar o design da Página de aterrissagem, você precisa criar uma página de importador, por exemplo, em uma campanha. O modelo Páginas do importador permite que você importe sua página de aterrissagem HTML completa. A página contém uma caixa suspensa em que o pacote de design da página de aterrissagem pode ser importado com o uso da técnica de arrastar e soltar.

Observação:

Por padrão, uma Página do importador só pode ser criada em campanhas, mas você também pode sobrepor esse modelo para criar uma página de aterrissagem em /content/mysite.

Para criar uma nova página de aterrissagem:

  1. Navegue até Sites > Campanhas e selecione sua campanha.

  2. Clique em Criar > Página.

  3. Selecione o modelo Página do importador e clique em Avançar. Adicione um título e, opcionalmente, um nome e tags e clique em Criar.

    chlimage_1

    Sua nova página de importador é exibida.

Preparação do HTML para importação

Antes de importar o pacote de design, o HTML precisa ser preparado. Consulte Extensão e configuração da importação do design para obter mais informações.

Importação do pacote de design

Depois que uma página de importador é criada, você pode importar um pacote de design para ela. Detalhes sobre como criar o pacote de design e sua estrutura recomendada são explicados em Extensão e configuração da importação do design.

Supondo que você tenha o pacote de design pronto, as etapas a seguir descrevem como importá-lo para uma página de importador.

Para importar o pacote de design:

  1. Abra a página do importador que você criou anteriormente

    chlimage_1
  2. Arraste e solte o pacote de design na caixa suspensa. Sua página de aterrissagem é exibida no lugar da página do importador. Sua página foi importada com sucesso.

    chlimage_1

Observação:

Se você tiver problemas para importar o pacote de design, consulte Solução de problemas.

Trabalhar com páginas de aterrissagem

O design e os ativos de uma página de aterrissagem geralmente são criados por um designer, possivelmente em uma agência, usando ferramentas com as quais ele já está acostumado, como o Adobe Photoshop ou o Adobe Dreamweaver. Quando o design é concluído, o designer envia um arquivo zip com todos os ativos para o setor de marketing. O contato no setor de marketing é então responsável por colocar o arquivo zip no AEM e publicar o conteúdo.

Além disso, o designer pode precisar fazer modificações na página de aterrissagem depois da importação, editando ou excluindo conteúdo e configurando os componentes das frases de chamariz. Por fim, o profissional de marketing deseja visualizar a página de aterrissagem e depois ativar a campanha para garantir que essa página de aterrissagem seja publicada.

Esta seção descreve como fazer o seguinte:

Na interface, as opções Limpar design e Fazer o download do zip importado estão disponíveis no menu de configurações:

chlimage_1

Download do pacote de design importado

Baixar o arquivo zip permite registrar qual arquivo foi importado com uma determinada página de aterrissagem. Observe que as alterações feitas em uma página não são adicionadas ao zip.

Para baixar o pacote de design importado, selecione Baixar zip importado no menu de configurações.

Visualização de informações de importação

A qualquer momento, você pode visualizar informações sobre a última importação, clicando no ponto de exclamação azul na parte superior da página de aterrissagem da interface do usuário clássica.

chlimage_1

Caso o pacote de design importado tenha alguns problemas, por exemplo, se ele fizer referência a imagens/scripts que não existem no pacote, e assim por diante, o importador do design exibirá esses problemas em formato de lista. Para ver a lista de problemas, na interface do usuário clássica, clique no link de problemas na barra de ferramentas da página de aterrissagem. Na imagem a seguir, clicar no link Problemas abre a janela Importar problemas.

chlimage_1

Redefinição de uma página de aterrissagem

Caso você queira reimportar o pacote de design da página de aterrissagem depois de fazer algumas alterações, clique em Limpar no menu de configurações.Essa ação exclui a página de aterrissagem importada e cria uma página de importador em branco.

Ao limpar a página de aterrissagem, é possível remover as alterações de conteúdo. Se você clicar em Não, as alterações de conteúdo serão preservadas, isto é, a estrutura em jcr:content/importer será preservada, e somente o componente da página do importador e os recursos em etc/design serão removidos. Por outro lado, se você clicar em Sim, jcr:content/importer também será removido.

Observação:

Se você decidir remover as alterações de conteúdo, todas as alterações feitas na página de aterrissagem importada, bem como todas as propriedades da página, serão perdidas quando você clicar em Limpar.  

Modificar e adicionar componentes a uma página de aterrissagem

Para modificar componentes na página de aterrissagem, clique duas vezes neles para abri-los e editá-los como você faria com qualquer outro componente.

Para adicionar componentes à página de aterrissagem, arraste-os e solte-os na página de aterrissagem do painel Componentes e edite conforme apropriado.

Observação:

Se um componente na página de aterrissagem não puder ser editado, você precisará reimportar o arquivo zip depois de modificar o arquivo HTML. Isso significa que, durante a importação, as partes não editáveis não foram convertidas em componentes do AEM.

Exclusão de uma página de aterrissagem

A exclusão de uma página de aterrissagem é feita da mesma forma que a exclusão de uma página normal do AEM. 

A única exceção é que, ao excluir uma página de aterrissagem para desktops, a página de aterrissagem móvel correspondente (quando presente) também é excluída, mas não vice-versa.

Publicação de uma página de aterrissagem

Você pode publicar a página de aterrissagem e todas as suas dependências como publicaria uma página normal. 

Observação:

Ao publicar a página de aterrissagem para desktops, a versão móvel correspondente (se houver) também será publicada. Porém, a publicação de uma página de aterrissagem móvel não publica a versão para desktop. 

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online