Página de destino landing-pages

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 AEM. Um desenvolvedor da Web pode preparar o HTML e os ativos adicionais que podem ser importados como uma página inteira ou apenas como parte de uma página. A funcionalidade é útil para criar páginas de aterrissagem de marketing que só estão ativas por um tempo limitado e precisam ser criadas rapidamente.

Esta página descreve o seguinte:

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 Integrando páginas de aterrissagem com o Adobe Analytics.

O que são landing pages? what-are-landing-pages

As landing pages são sites de uma ou várias páginas que são o "endpoint" de um alcance de marketing - por exemplo, com email, adwords/banners, redes sociais. Uma landing page pode atender a vários propósitos, mas todos têm uma coisa em comum: o visitante deve cumprir uma tarefa e definir o sucesso de uma landing page.

O recurso Landing Pages (Páginas de destino) no AEM permite que os profissionais de marketing trabalhem com designers da Web em agências ou equipes internas de criação para criar designs de página que podem ser facilmente importados para o AEM e ainda ser editáveis pelos profissionais de marketing e publicados sob o mesmo controle que o restante dos sites alimentados pelo AEM.

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

Páginas iniciais da área de trabalho desktop-landing-pages

Uma amostra de página de aterrissagem no AEM é exibida da seguinte maneira:

Páginas de aterrissagem móveis mobile-landing-pages

Uma landing page também pode ter uma versão móvel da página. 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 landing page é o mesmo de uma landing page normal. O design da landing page tem um arquivo html adicional correspondente à landing page móvel. Esse arquivo html também deve ter uma tela div com id=cqcanvas exatamente como o html da página de aterrissagem da área de trabalho, e ele oferece suporte a todos os componentes editáveis descritos para a página de aterrissagem da área de trabalho.

A página de aterrissagem móvel é criada como uma página secundária da página de aterrissagem de desktop. Para abri-lo, navegue até a página de aterrissagem em Sites e abra a página secundária.

Componentes da landing page landing-page-components

Para fazer partes do HTML que é importado como editável no AEM, é possível mapear o conteúdo diretamente no HTML das Landing pages para os componentes do AEM. O importador de design entende os seguintes componentes por padrão:

Além disso, é possível estender isso e oferecer suporte a componentes personalizados. Esta seção descreve os componentes em detalhes.

Texto text

O componente de Texto permite inserir 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 landing page:

Título title

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:

Imagem image

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

Veja a seguir um exemplo de um componente de imagem em uma landing page:

Chamada para ação (CTA) call-to-action-cta

Um design de página de aterrissagem pode ter vários links. Alguns deles podem ser destinados a "Chamadas para ação".

O Plano de ação (CTA) é usado para fazer com que o visitante execute uma ação imediata na página de aterrissagem, como "Assinar agora", "Exibir este vídeo", "Somente tempo limitado" e assim por diante.

Ambos os componentes do CTA têm opções semelhantes. O Link Click Through tem opções adicionais de rich text. Os componentes são descritos em detalhes nos parágrafos a seguir.

Link de Click Through click-through-link

Esse componente CTA pode ser usado para adicionar um link de texto na landing page. Esse link pode ser clicado para levar o usuário ao URL de destino especificado nas propriedades do componente. Ele faz parte do grupo "Plano de ação".

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

URL de destino Insira o URI que você deseja que os usuários visitem se clicarem no texto.

Opções de Renderização Descreve as opções de renderização. Você pode selecionar entre as seguintes opções:

CSS Na guia Estilo, digite um caminho para a folha de estilos CSS.

ID Na guia Estilo, insira uma ID para o componente para identificá-lo exclusivamente.

Veja a seguir um exemplo de um link click-through:

Vincular ao gráfico graphical-link

Esse componente CTA pode ser usado para adicionar qualquer imagem gráfica com link na página de destino. A imagem pode ser um botão simples ou qualquer imagem gráfica como plano de fundo. Quando a imagem é clicada, o usuário é levado para o URL de destino especificado nas propriedades do componente. Ela faz parte do grupo Chamada para Ação.

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

URL de destino Insira o URI que você deseja que os usuários visitem se clicarem na imagem.

Opções de Renderização Descreve as opções de renderização. Você pode selecionar entre as seguintes opções:

CSS Na guia Estilo, digite um caminho para a folha de estilos CSS.

ID Na guia Estilo, insira uma ID para o componente para identificá-lo exclusivamente.

Veja a seguir um exemplo de link gráfico:

Formulário de plano de ação (CTA) call-to-action-cta-lead-form

Um formulário de cliente potencial é um formulário usado para coletar informações de perfil de um visitante/cliente potencial. Essas informações podem ser armazenadas e usadas posteriormente para fazer um marketing eficaz com base nas informações. Essas informações geralmente incluem título, nome, email, data de nascimento, endereço, interesse e assim por diante. É parte do grupo Formulário de cliente potencial CTA.

Um exemplo de formulário de lead CTA tem esta aparência:

Os formulários de clientes em potencial do CTA são criados a partir de vários componentes diferentes:

O exemplo anterior mostra um formulário; ele é composto do componente Formulário de cliente em potencial (início e fim), com os campos Nome e Id de email usados para entrada e um campo Enviar

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

Configurações comuns a muitos componentes de formulário de cliente potencial settings-common-to-many-lead-form-components

Embora cada um dos componentes do formulário de cliente potencial 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 estão disponíveis na caixa de diálogo:

Componentes de formulário de cliente potencial lead-form-components

A seção a seguir descreve os componentes disponíveis para formulários de cliente em potencial de Chamada para Ação.

Sobre Permite que os usuários adicionem Informações sobre.

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 de formulário. Isso indica onde os dados são armazenados no repositório.

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

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

Nome Fornece um campo para que os usuários digitem seu nome.

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

Sobrenome Os usuários podem inserir informações sobre o Sobrenome.

Formulário de cliente potencial Adicione este componente para adicionar um formulário de cliente potencial à sua página de aterrissagem. Um formulário de cliente potencial contém automaticamente o Início do Formulário de Cliente Potencial e o Fim do Formulário de Cliente Potencial. Entre eles, adicione os componentes de Formulário de cliente potencial descritos nesta seção.

O componente de Formulário de cliente potencial define o início e o fim de um formulário usando os elementos Início do Formulário e Fim do Formulário. Eles são sempre emparelhados para garantir que o formulário seja definido corretamente.

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

Início do formulário de clientes em potencial

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

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

Iniciar Fluxo de Trabalho Determina qual fluxo de trabalho será acionado depois que um formulário de cliente potencial for enviado.

Opções do Post As seguintes opções de postagem estão disponíveis:

Identificador de formulário O identificador de formulário identifica exclusivamente o formulário de cliente potencial. Use o identificador de formulário se você tiver 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 de formulário de cliente potencial.

Este é um campo opcional que especifica o caminho para um nó no repositório. Quando esse nó tem propriedades que correspondem aos nomes dos campos, os campos apropriados no formulário são pré-carregados com o valor dessas propriedades. Se não houver correspondência, o campo conterá o valor padrão.

Validação do Cliente Indica se a validação do cliente é necessária para este formulário (a validação do servidor sempre ocorre). Isso pode ser feito em conjunto com o componente Captcha do Forms.

Tipo de Recurso de Validação Define o tipo de recurso de validação de formulário se desejar validar todo o formulário de cliente potencial (em vez de campos individuais).

Se você estiver validando o formulário completo, inclua também um dos seguintes:

Configuração da ação Dependendo da seleção nas Opções do Post, a Configuração da ação será alterada. Por exemplo, ao selecionar Criar cliente em potencial, você pode configurar a qual lista o cliente em potencial será adicionado.

Criação de uma landing page creating-a-landing-page

Ao criar uma landing page, você precisa executar três etapas:

Uso do importador de design use-of-the-design-importer

Como a importação de páginas envolve a preparação de HTML, a verificação e o teste das páginas, a importação de páginas de aterrissagem deve ser considerada uma tarefa de administrador. Como administrador, os usuários que executam a importação precisam de permissões de leitura, gravação, criação e exclusão no /apps. Se o usuário não tiver essas permissões, a importação falhará.

A Adobe recomenda usar o importador de design em uma instância de preparo. Em uma instância de preparo, a importação pode ser testada e validada por um desenvolvedor que é responsável pela implantação do código na instância de produção.

Criação de uma página do importador creating-an-importer-page

Antes de importar o design da Landing page, é necessário criar uma página de importador, por exemplo, em uma campanha. O template Importer Page permite importar a página de aterrissagem de HTML completo. A página contém uma caixa suspensa na qual o pacote de design da landing page pode ser importado usando a função de arrastar e soltar.

Para criar uma landing page:

Preparação do HTML para importação preparing-the-html-for-import

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

Importação do pacote de design importing-the-design-package

Após a criação de uma página de importador, é possível importar um pacote de design para ela. Detalhes sobre a criação do pacote de design e sua estrutura recomendada são explicados em Extensão e Configuração da Importação de Design.

Supondo que o pacote de design esteja pronto, as etapas a seguir descrevem como importar o pacote de design para uma página do importador.

Trabalho com landing pages working-with-landing-pages

O design e os ativos de uma página de aterrissagem geralmente são criados por um designer, possivelmente em uma agência, em ferramentas para as quais estão acostumados, como Adobe Photoshop ou Adobe Dreamweaver. Quando o design é concluído, o designer envia um arquivo zip com todos os ativos para o marketing. O contato em marketing é responsável por soltar 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 que ela for importada, editando ou excluindo o conteúdo e configurando os componentes de chamada para ação. Por último, o profissional de marketing desejará visualizar a landing page e, em seguida, ativar a campanha para garantir que ela seja publicada.

Esta seção descreve como fazer o seguinte:

Quando você importa o pacote de design, o Limpar Design e o Download do Zip Importado estão disponíveis no menu de configurações da página:

Download do pacote de design importado downloading-the-imported-design-package

Baixar o arquivo zip permite registrar qual zip foi importado com uma página de aterrissagem específica. As alterações feitas em uma página não são adicionadas ao zip.

Para baixar o pacote de design importado, clique em Baixar Zip na barra de ferramentas da Página de Aterrissagem.

Exibição de informações de importação viewing-import-information

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

Caso o pacote de design importado tenha alguns problemas, por exemplo, se ele se referir a imagens/scripts que não existem no pacote e assim por diante, o importador de design exibirá esses problemas no formato de uma lista. Para exibir a lista de problemas, na interface clássica, clique no link issues na barra de ferramentas da landing page. Na imagem a seguir, clicar no link Problemas abrirá a janela Importar Problemas.

Redefinição de uma landing page resetting-a-landing-page

Caso deseje reimportar o pacote de design da página de aterrissagem depois de fazer algumas alterações, é possível "limpar" a página de aterrissagem clicando em Limpar na parte superior da página de aterrissagem, na interface clássica, ou clicar em Limpar, no menu de configurações, na interface otimizada para toque. Essa ação exclui a landing page importada e cria uma página do importador em branco.

Ao limpar a landing page, você pode remover as alterações de conteúdo. Se você clicar em Não, as alterações de conteúdo serão preservadas, ou seja, a estrutura em jcr:content/importer será preservada e somente o componente de página do importador e os recursos em etc/design serão removidos. Ao passo que, se você clicar em Sim, o jcr:content/importer também será removido.

Modificação e adição de componentes em uma página de aterrissagem modifying-and-adding-components-on-a-landing-page

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

Para adicionar componentes na página de aterrissagem, arraste e solte componentes na página de aterrissagem — do sidekick na interface de usuário clássica ou do painel Componentes na interface de usuário otimizada para toque — e edite conforme apropriado.

Exclusão de uma landing page deleting-a-landing-page

Excluir uma landing page é como excluir uma página AEM normal.

A única exceção é que, ao excluir uma landing page da área de trabalho, ela também exclui a landing page móvel correspondente (se presente), mas não vice-versa.

Publicação de uma landing page publishing-a-landing-page

Você pode publicar a landing page e todas as suas dependências da mesma forma que publica uma página normal.