Logotipo WebingPro.
Menu
Background Image
Voltar para a página anterior

Como criar uma Landing Page
O Guia Completo

Postado por Gabriel Felipe em 17/12/2014 às 11:18

Background Image

Olá pessoal, esse artigo vai juntar um monte de coisas isoladas que vimos em outros artigos aqui no blog em um objetivo prático: criar uma landing page. E criar do jeito certo, com testes a/b de análises de dados. O resultado final da landing page que vamos desenvolver pode ser visto no link abaixo.

Visualizar Landing Page

Caso você ainda não saiba o que é uma landing page, antes de continuar leia o artigo maravilhoso do Vinicius, lá ele explica o que é uma landing page e como você pode usar ela para aumentar suas conversões.

Gostaria de adiantar que o objetivo desse tutorial não é ser rápido, e sim completo. Quero te mostrar todas as etapas para a criação da Landing Page ideal, então caso você queira completar ele a risca, não espere fazê-lo em meia hora. Caso você esteja sem tempo para segui-lo agora, recomendo que faça uma leitura dinâmica e se gostar do que viu, volte depois com mais tempo para essa aventura.

Para organizar nosso caminho vou separar esse artigo em algumas etapas e para você já saber o que esperar vou listar elas aqui:

  1. Criação da sua Persona
  2. Criação do Wireframe (Protótipo)
  3. Criação do Layout
  4. Programação
  5. Integrando com o Mixpanel
  6. Customizar a Landing Page
  7. E Depois?

Apesar das etapas 1,2 e 3 serem fundamentais, eu não irei me aprofundar muito nelas, acredito que no geral as pessoas tenham muito mais dúvidas a respeito de como criar e analisar variações de uma landing page, portanto focarei mais nessa parte de desenvolvimento backend e análise de dados. Mas apenas para reforçar, as etapas 1,2 e 3 são fundamentais!

Pois bem, vamos logo com isso!

1 – Criação da sua Persona

Não vou tentar te convencer da importância de definirmos uma Persona ou mesmo te explicar o que ela é, pois acredito que o João já fez ambas as coisas com maestria neste artigo.

Assim sendo, o melhor lugar para começarmos qualquer campanha de marketing é na Persona e caso ainda não tenha a sua, já está na hora de criar ela! Siga as dicas do João e depois volta aqui com a persona criada (:

2 – Criação do Wireframe

Assim como no caso da Persona, vou deixar o João te explicar o conceito e importância do wireframe. Afinal, eu não conseguiria passar essas informações com tanta clareza.

Agora que você já sabe o que é o wireframe e qual a sua importância, vou deixar um link com algumas dicas de ferramentas que você pode usar para criar ele.

Caso queira uma ferramenta gratuita, a minha escolha é o Balsamiq, contudo aqui na WebingPro utilizamos o Axure, por ser uma ferramenta mais completa, porém paga.

Para finalizar segue o link e a imagem do protótipo da landing page que vamos desenvolver nesse tutorial.

Prototipo Landing Page Loja Virtual

3 – Criação do Layout

Se eu já não me atrevi a falar dos itens anteriores, imagina desse! Pois bem, agora é hora de aquele protótipo ganhar o tão estimado apelo visual. Abaixo o exemplo de layout criado pelo João a partir do protótipo anterior

shot-20141204-1911-1mc9ha9

4 – Programação

O primeiro passo para programarmos nossa Landing Page é baixarmos o Magic(Se você ainda não conhece o Magic, pode conhecer ele nesses dois posts: Bem vindo ao Magic – Parte 1 e Magic Parte 2 – Seus primeiros passos). Mas não se preocupe, caso você nunca tenha usado o Magic, pode seguir tranquilamente, talvez as coisas não fiquem tão claras mas não devem te impedir de continuar.

Visando agilizar o nosso processo criei um repositório especialmente para esse tutorial com alguns recursos já inclusos, pode acessar ele nesse link: https://github.com/agenciawebingpro/magicLandingPage estando no link, a escolha é sua, clonar o repositório ou baixar o zip disponível na barra lateral direita.

Coloque o conteúdo baixado em uma pasta de sua preferência, para referência chamarei essa pasta de “tutorialLandingPage/” e a acessarei através de http://localhost/tutorialLandingPage  . Aconselho que você use o mesmo nome / caminho pois assim ficará mais fácil a compreensão dos caminhos até os arquivos que citarei.

Na primeira vez que você acessar a landing page deve ver algo parecido com o layout exibido previamente.

Você pode estar com a impressão de que eu fiz tudo para você, e já está tudo praticamente pronto. Mas isto está longe de ser verdade! Vamos agora entender o que eu já deixei pré pronto e por qual motivo eu fiz cada uma dessas coisas.

  • Configuração do escopo público: Se você leu os posts a respeito do Magic, sabe que quando o inicia pela primeira vez lhe é apresentado o Manager, um escopo de configuração. Como iremos criar uma landing page que precisará apenas de um escopo (o público) eu já deixei ele configurado e deletei o escopo padrão Manager.
  • Código Frontend: Não é o objetivo desse texto focar em programação frontend, assim sendo não vi sentido em alongar tanto o artigo me aprofundando nessa parte, portanto criei o frontend, e comentei o código para que você possa entender como ele funciona, caso tenha interesse cheque os arquivos dentro do diretório: tutorialLandingPage/scopes/public/views/default/template/ cada um deles possui comentários a respeito de sua função e funcionamento.
  • Estrutura Básica Backend: As tarefas básicas de backend eu já adiantei também, para não perdermos tempo por aqui. O que eu fiz foi basicamente criar um controller, fazer ele chamar uma view e passar vários parâmetros estáticos para essa view. Inclui também na pasta librarys a biblioteca do MixPanel para podermos fazer a integração  e deixei pronto um código para envio de e-mails.

“Ta mas o que falta?” – Você, sobre isso tudo.

Bem, algumas coisas. São elas:

  1. Entender como todo o fluxo de código funciona e qual arquivo faz o que, de forma que você possa editar esses arquivos para criar a sua própria landing page.
  2. Configurar o backend para diferentes variações dessa página usando apenas um template. De forma que você possa fazer vários testes a/b.
  3. Configurar o envio de e-mails a partir de um servidor smtp que você tenha acesso..
  4. Integrar a Landing Page com o MixPanel para poder analisar os dados.
  5. Customizar a sua Landing Page

Entendendo como as coisas funcionam:

Se você já conhece o Magic já deve saber como as coisas estão funcionando, do contrário, vou fazer uma explicação básica sobre os arquivos principais.

O arquivo que está fazendo tudo acontecer nesse caso é o Controller encontrado em tutorialLandingPage/scopes/public/controller/landing.php . O funcionamento dele ta todo explicado na forma de comentários. Mas só para repassar, o fluxo básico é esse:

  1. Você acessa o arquivo /tutorialLandingPage/index.php
  2. O index.php procura no config/routes.json por uma url igual a que você digitou (no caso vazia) e encontra uma referência de que a url vazia indica o controller landing.php do escopo public.
  3. O index.php então chama o controller landing.php
  4. O controller landing.php chama os javascripts e css’s necessários, define algumas variáveis estáticas e retorna o layout para o usuário de acordo com os comentários.

Agora que já temos uma noção melhor do que está acontecendo, fica mais fácil de entendermos como proceder.

Configurar o Backend para diferentes variações da página

Bem basicamente o que precisamos fazer é alterar aquelas variáveis estáticas do controller landing.php de forma que elas passem a ser dinâmicas. Para isso vamos usar a classe scenarios.

Vamos lá, abra o arquivo tutorialLandingPage/scopes/public/init.php que deve estar parecido com isso:

E inclua essa linha logo abaixo do <?php

Basicamente o arquivo init.php é chamado sempre q”ue alguma rota do public é chamada, é um inicializador do escopo.

Uma breve explicação sobre o arquivo scenarios.php:

“A classe scenarios tem o objetivo de distribuir dados diferentes a usuários diferentes de acordo com uma certa probabilidade. Cada conjunto de dados é considerado um cenário, e cada cenário possui obrigatóriamente um nome.
Portanto, na hora de registrar um cenário você fornece o seu nome, o conjunto de dados que ele retornará e a chance que ele tem de aparecer para o usuário.
Caso não seja fornecida a chance, as chances são distribuidas igualitariamente entre cada cenário registrado
Uma vez que um usuário tenha recebido o cenário X, ele irá continuar recebendo o cenário X pelos próximos 30 dias, a menos que forneça um parâmetro get que force o recebimento de um cenário diferente.”

 

Assim sendo, vamos usar a classe scenários para variar o array $this->data do arquivo scopes/public/controllers/landing.php, retornando diferentes dados para diferentes usuários.

Para isso, abra o arquivo scopes/public/controllers/landing.php e troque

Por:

Salve o arquivo e teste. Se você atualizar a página diversas vezes ela deve apresentar hora um conteúdo, hora outro. Acredito que o código esteja bem auto-explicativo pelos comentários, portanto minha recomendação é: leia os comentários, brinque um pouco com as variáveis, tente inserir um terceiro cenário, faça alguns testes e volte aqui em seguida.

Se você testou a página percebeu que mesmo que você já tenha visto um cenário ele apresenta outro para você. E isso não deveria acontecer, uma vez que uma versão é apresentada ao usuário ele deveria ver sempre aquela versão. Para isso basta comentar a linha:

Essa linha é útil durante o desenvolvimento, para que você possa testar seus scenários. Caso você queira acessar um cenário específico pode acessar a url: localhost/tutorialLandingPage/?scenario=[nome do seu cenário] por exemplo: http://localhost/tutorialLandingPage/?scenario=Quero Comecar

Parabéns, agora sim estamos chegando perto. Temos uma landing page, funcional que troca o conteúdo de acordo com o acesso.

Configurar o envio de e-mails

No caso da nossa landing page, uma conversão é o recebimento de um e-mail, portanto vamos configurar o envio de e-mails para que você possa testar. Para isso basta editar o arquivo tutorialLandingPage/scopes/public/controller/landing.php o método send é o responsável pelo envio do e-mail. Nele procure e troque os seguintes placeholders pelos valores reais:

  • [servidor-smtp]
  • [username]
  • [seu-email]
  • [seu-nome]
  • [email-de-quem-vai-receber]

Feito isso você pode fazer um teste e você deveria receber o e-mail e tudo deve estar ok.

4 – Integrar a Landing Page com o Mixpanel para analisar os dados

Estamos quase lá! Agora vamos integrar nossa landing page com o Mixpanel, que é uma ferramenta maravilhosa para analisar o comportamento do usuário. Eu já expliquei como ela funciona aqui no blog nesse texto.

O primeiro passo para a integração é, obviamente fazer um cadastro no Mixpanel, vai lá e faz o seu cadastro e volta aqui, é rapidinho!

Fez? Perfeito! Agora que você está logado no Mixpanel precisa criar um projeto para registrarmos as ações. Vai ali no canto superior esquerdo e clica em “My new project”, aparecerá um menu e um campo de texto, digite o nome do seu projeto (“Landing-Page” por exemplo) nesse campo e tecle enter. Agora entre no projeto clicando nele no menu, e clique em “Setup Now”.

Deve ter aparecido um código javascript para você, no final desse código tem uma linha parecida com essa:

mixpanel.init(“[seu-codigo-do-mixpanel]”);

Copie esse código.

Agora va lá no arquivo scopes/public/init.php, o inicializador, e insira antes do “?>” o seguinte trecho:

Não esqueça de colar o código do Mixpanel no lugar indicado.

Ok, agora já temos o Mixpanel iniciado, precisamos registrar as ações que acharmos mais interessantes. Para isso abra o arquivo scopes/public/controller/landing.php e cole o seguinte código logo depois de $s = $scenarios->getScenario(); :

Agora atualize a página varias vezes para gerar alguns dados e vá no Mixpanel ver os dados registrados. Estando na seção dos dados, na barra lateral esquerda clique em segmentação ai deve vir selecionado já o evento visualização, e abaixo selecione: “BY” “Cenário”. Deve mostrar quantas visualizações você teve em cada cenário.

Porém, por enquanto estamos medindo apenas as visualizações de cada landing page. Vamos medir também os envios de e-mail a partir de cada uma delas, de forma que possamos visualizar qual cenário converte mais.

Para isso, ainda no arquivo landing.php, agora no método send(), procure a linha $email->Body = $body e inclua abaixo dela o seguinte trecho:

E abaixo da linha if ($email->Send()) { insira:

E por último, um pouco mais abaixo, após o } else {, insira:

Pronto, agora teste enviar algumas vezes os formulários de contato e os dados já estarão no Mixpanel.

A príncipio está tudo ok. Mas você pode querer utilizar a biblioteca javascript do Mixpanel também, para medir algumas outras coisas como: cliques em botões, erros na validação ou qualquer outra interação do usuário. Para isso precisaremos de algumas coisas.

Primeiro vá no arquivo tutorialLandingPage/scopes/public/controller/landing.php  e antes da linha  $this->render($this->get_content()); cole:

Mas novamente, não se esqueça de trocar seu-codigo-do-mixpanel pelo seu código, é o mesmo de antes.

Agora va no arquivo tutorialLandingPage/scopes/public/views/default/template/pages/landing.tpl e inclua logo no início o seguinte trecho:

Pronto, agora você pode usar a biblioteca javascript de acordo com a documentação do Mixpanel. Eu recomendo fortemente que você analise o máximo de coisas que conseguir, você nunca sabe quando vai precisar ver quantas pessoas clicaram naquele botão ou visualizaram aquela foto.

Parabéns, você fez uma landing page integrada com mixpanel, com testes A/B funcionais. Lembre-se, a mágica desses testes está em segmentar os relatórios do Mixpanel pelo cenário, e como eu disse antes, para entender melhor os relatórios do Mixpanel você pode ver esse texto.

6 – Customizar a Landing Page.

Ok, você acabou o tutorial, mas não adianta nada você ter uma landing-page de lojas virtuais se esse não for o seu ramo. Você precisa criar a sua própria landing page, de acordo com a sua persona, wireframe e layout como vimos lá no começo. Para alterar sua landing page você vai mexer principalmente nos seguintes arquivos:

  • scopes/public/controller/landing.php – Trocar todos os conjuntos de dados, variáveis e cenários e trocar o código do Mixpanel.
  • scopes/public/views/default – Editar todos os arquivos para que o html fique de acordo com o que você espera. Não esqueça das imagens e do css.
  • config/responsive.php – Configurações do grid css, normalmente eu utilizo um grid com largura de 100% e margem de 2%, porém esse layout precisava de um grid de 940px com margem de 24px, portanto você pode alterar o grid ali caso ache necessário.
  • scopes/init.php – Trocar o código do Mixpanel

Dica para escrever os cenários:

Na hora de decidir os cenários primeiro defina quais itens você vai alterar. Depois tente utilizar alguns gatilhos mentais que irão convencer a sua Persona a tomar a atitude que você espera.

7 – E depois?

Agora que você acabou a Landing Page, a campanha pode começar. Dependendo do seu público / objetivo e serviço uma mídia será melhor ou pior. Talvez um conjunto de mídias funcionará melhor. Mas o importante é atrair o seu público até a Landing Page.

Você pode fazer isso através de facebook ads, google adwords, marketing de conteúdo, e-mail marketing ou qualquer outro tipo de campanha que julgue melhor para o seu público.

Eu espero que tenha lhe ajudado e esclarecido o passo a passo para a criação de uma campanha digital baseada numa Landing Page. Então vai lá, faça a sua landing page e se quiser posta aqui nos comentários que analisaremos para você, dando dicas e sugestões. Caso eu tenha esquecido de algo, ou você tenha ficado com alguma dúvida fique a vontade nos comentários também.

P.S.: Para baixar o código completo clique aqui.

Até a próxima!

Conheça o autor do post

Gabriel Felipe:
Notice: the_author_description está obsoleto desde a versão 2.8.0! Use the_author_meta('description') em seu lugar. in /home/webingpro/www/blog/wp-includes/functions.php on line 3831
Tenho foco em PHP, mas gosto de ficar de olho no que ta acontecendo no mercado. Já brinquei com: Python, Node.JS e Ruby on Rails. PHP ainda é minha paixão no entanto. Na formação, sou autodidata desde 2004. Aprendi o que eu sei com a internet e esse blog é uma tentativa de devolver um pouco disso. Eu gosto de opensource, e a maioria das coisas que você encontrar aqui vão estar licenciadas sobre beerware, ou licença da cerveja.