Como criar uma Landing Page especial para a Black Friday

R$ 871.986.167. Esse foi o número que a Black Friday movimentou em compras, só em 2014 no Brasil. Foram 80 milhões de acessos simultâneos no país no dia do evento que, a título de comparação, movimentou mais de 50 bilhões de dólares nos Estados Unidos no ano passado.

Mas por que Black Friday?

O nome se originou na Filadélfia e era usado por policiais para descrever o intenso tráfego de pessoas nas lojas e veículos nas ruas no dia seguinte ao Dia de Ação de Graças, quando as pessoas começavam oficialmente suas compras de Natal.

A Black Friday (algo como “sexta-feira negra”) é a sexta-feira seguinte ao Dia de Ação de Graças nos Estados Unidos, que acontece na quarta quinta-feira do mês de Novembro.

É a data que marca o início das compras de Natal dos americanos, quando a maior parte dos lojistas abre o comércio mais cedo e oferece preços promocionais bem abaixo do mercado.

Como dura apenas um ou poucos dias (nos Estados Unidos, normalmente se estende pelo fim de semana) com descontos além do normal, ela cria um sentimento de urgência nas pessoas que muitas vezes é responsável por cenas como essa. São milhares de pessoas ansiosas para comprar aquele item de que precisam por menos da metade do preço, ou garantir itens de que não precisam simplesmente por ser uma oportunidade única de adquiri-los a um preço bem menor.

A Black Friday também é uma oportunidade de divulgação das marcas e fechamento de vendas: é o impulso que falta, muitas vezes, para uma primeira compra que as pessoas hesitam em fazer.

Quando elas compram e se sentem satisfeitas, tendem a voltar a comprar no futuro. E acredite: é possível, sim, deixá-las satisfeitas, mesmo em meio à loucura de acessos ao site e às lojas e ao excesso de opções e ofertas da concorrência.

E como eu faço?

Uma boa opção para botar ordem na casa e estimar sua demanda é fazer como a Francisca Joias Contemporâneas, e-commerce de acessórios e cliente do RD Station: eles criaram uma Landing Page específica para a Black Friday, na qual é possível se inscrever para receber as ofertas de antemão, selecionando o tipo de acessório do qual gostaria de receber ofertas.

Assim, na próxima semana, quando a Black Friday chegar, os clientes podem ir direto ao ponto e só entrar no site para realizar a compra.

Se você está pensando em aderir à Black Friday este ano (mais especificamente dia 27 de Novembro), a gente te dá uma mão: vamos dar um passo-a-passo para você criar uma Landing Page da Black Friday com contagem regressiva para o dia, como fizemos nessa nossa página:

Landing Page especial para a Black Friday - RD Station

Apesar de termos usado a página especialmente para a Black Friday, você pode utilizá-la sempre que tiver uma ocasião especial, que mereça contagem regressiva.

Vamos lá?

Passo 1:

Esse código, para uso do cronômetro, foi desenvolvido para o modelo de Landing Page Simples. O recomendado é que você opte por esse modelo, já que não podemos garantir que o relógio funcionará sem desconfigurações em outros modelos.

Passo 2:

É hora de escolher o conteúdo da sua Landing Page. Você disponibilizará um catálogo sobre as ofertas da Black Friday? Enviará emails para lembrar os inscritos da promoção? Independente de qual será a sua oferta, lembre-se de escolher uma imagem legal e caprichar na escolha das cores. Há diversos posts no blog da Resultados Digitais sobre Landing Pages, que tal dar uma olhada em como escolher as cores da sua Landing Page?

Dica para deixar sua página igual à da RD:

Para que a Landing Page ficasse com o design que queríamos, excluímos os três tópicos com itens que compoem o conteúdo da página. Assim, o cronômetro fica em destaque.

Para excluí-los, vá na aba Conteúdo > Bloco de texto 1 e apague o conteúdo. O mesmo será feito para Bloco de texto 2 e Bloco de texto 3:

Captura de tela - RD Station - customização Landing Page Black Friday

Também deixamos toda a página em tons da mesma cor para dar destaque ao cronômetro, mudando apenas o tom da área de conversão, do cabeçalho e do rodapé.

No nosso caso, mudamos a área central (Cor de fundo da oferta e Cor de fundo dos blocos) para um tom de preto #111111, e a Cor de fundo do cabeçalho e Cor de fundo de copyright para o tom #000000. A cor de fundo do formulário é o tom #2A2A2A:

Captura de tela - RD Station - customização Landing Page Black Friday

Passo 3:

Na aba Aparência, lá mesmo, onde você escolhe as cores, há uma parte chamada Customização Avançada. É aí que você consegue fazer coisas diferentes nas suas Landing Pages, como adicionar um cronômetro, por exemplo.
Na aba CSS, você deverá colar o seguinte código:

.countdown-container h2 {
   width: 90%;
   margin: 0px 5% 4px;
   font-size: 1.1em;
   text-transform: uppercase;
}

.countdown {
   width: 90%;
   margin: 0px 5%;
   display: table;
   border: 1px solid #aaa;
}

.countdown li {
   width: 25%;
   display: table-cell;
   position: relative;
   padding: 10px 15px 0px;
   text-align: center;
}

.countdown li + li:before {
   content: ':';
   position: absolute;
   top: 17px;
   left: 0px;
   font-size: 2em;
}

.countdown li .flap {
   font-size: 2.4em;
   line-height: 1;
}

.countdown li .flap + p {
   padding-bottom: 0px;
   color: #777;
}

Já na Aba JavaScript em BODY (a última da página), o código a colar será este:


<script>
initializeClock('November 26 2015 23:59:59 GMT-02:00', 'Ofertas terminam em:');

function getTimeRemaining(endtime){
 var t = Date.parse(endtime) - Date.parse(new Date());
 return {

   'total':t,
   'days': Math.floor( t / (1000 * 60 * 60 * 24) ),
   'hours': Math.floor( (t / (1000 * 60 * 60) ) % 24 ),
   'minutes': Math.floor( (t / 1000 / 60) % 60 ),
   'seconds': Math.floor( (t / 1000) % 60 )
 };
}

function initializeClock(endtime, title){

 var e = document.createElement('div');
 e.setAttribute("class", "countdown-container");
 e.innerHTML = "<h2 style='text-align: center;'>" + title + "</h2><ul class='countdown'><li><div class='flap'><span class='days'>0</span></div><p>DIAS</p></li><li><div class='flap'><span class='hours'>0</span></div><p>HORAS</p></li><li><div class='flap'><span class='minutes'>0</span></div><p>MINS</p></li><li><div class='flap'><span class='seconds'>0</span></div><p>SEGS</p></li></ul></div>";

 $(".pure-u-1.pure-u-md-1-2")[1].appendChild(e);

 var timeinterval = setInterval(function(){
   var t = getTimeRemaining(endtime);
   $(".flap .days").text(t.days);
   $(".flap .hours").text(t.hours);
   $(".flap .minutes").text(t.minutes);
   $(".flap .seconds").text(t.seconds);
   if(t.total<=0){
     clearInterval(timeinterval);
   }
 },1000);
}

</script>

 

Na primeira linha desse código, você deverá configurar a data do encerramento da contagem e a mensagem que aparecerá acima do relógio, nesta ordem:

initializeClock(‘November 26 2015 23:59:59 GMT-02:00’, ‘Ofertas terminam em:’);

Nesse caso, a contagem acaba dia 26 de Novembro, às 23:59:59, horário de brasília. Cheque a tabela de horários do GMT (Greenwich Mean Time) se você está em outro fuso, e não se esqueça do horário de verão – é por isso que nosso código marca -02:00 e não -03:00.

A mensagem que aparece em nossa página é Ofertas terminam em, mas você pode customizá-la como quiser. Nossa recomendação é que seja curta e simples.

Hora de por em prática!

Sua página está pronta? Não se esqueça das boas práticas na hora de levá-la ao ar:

Procure estimar a demanda para o dia (você pode fazer como a Francisca Joias Contemporâneas e enviar as ofertas de antemão) e saber o que seus clientes mais querem. Eles ficarão satisfeitos se souberem que você se preparou para atendê-los.

Certifique-se também de que você conseguirá atender a demanda e enviar os pedidos dentro do prazo. Atrasos podem desapontar seus clientes e essa é uma época caótica para os correios e serviços de entrega.

Ofereça descontos que valham a pena: a Black Friday é um dia em que os preços realmente caem e são interessantes para seus clientes e Leads.

Dicas anotadas e página criada, é hora de divulgá-la. Aproveite o espaço do seu site para um banner, envie um convite especial para seus clientes e Leads mais interessados ou, ainda, divulgue nas redes sociais.

Seja qual for a sua escolha, desejamos uma ótima Black Friday para você. Ficaríamos bem contentes em ouvir seu feedback, nos comentários, sobre a página que criou ou novos posts que você gostaria de ler aqui no blog.

Marcadores:

Deixe seu comentário