Janela pop-up o quê. HTML: Crie sua própria janela pop-up

É um fato conhecido: a maioria dos visitantes não faz uma compra na primeira visita à página de produto de uma loja online nem deixa um lead – mas qual é o tamanho dessa maioria?

Segundo pesquisa da empresa SeeWhy, esse é o caso de 99% dos visitantes que visitam o recurso pela primeira vez. É claro que estamos falando principalmente de sites de comércio eletrônico, mas ainda surge a pergunta: se 99% dos visitantes não compram nada na primeira visita, como incentivá-los a voltar?

A boa notícia são as seguintes estatísticas: 75% dos visitantes ainda desejam voltar mais tarde para finalizar a compra.

Não importa como você se sinta em relação aos pop-ups, essa técnica de marketing ainda é eficaz para atrair a atenção e coletar dados de contato (geração de leads).

Simplificando, usar janelas pop-up é a maneira mais rápida de retornar o visitante à landing page.

Por que?

Isto envolve uma técnica de persuasão conhecida como “interrupção de padrão”, onde a sua atenção, embalada por um determinado ritmo ou sequência de narrativa, é repentinamente atraída agressivamente para algo inesperado. Muitas vezes você sente esse efeito ao assistir filmes, programas de comédia e até mesmo durante negociações importantes.

Quando se trata de conteúdo e email marketing, a “interrupção de padrão” é mais eficaz quando o leitor já está comprometido em resolver o problema e continuar a interação (assinar a newsletter, fazer uma compra, etc.).

Um exemplo do serviço Made.com. Os profissionais de marketing ofereceram aos seus visitantes um voucher gratuito no valor de 10 euros por uma ninharia - um endereço de e-mail. Isso foi feito porque:

De acordo com ExactTarget, e-mailé o canal de marketing preferido dos clientes, já que 77% dos consumidores preferem o email a outros canais de interação com a marca.

Talvez os pop-ups não sejam tão ruins, afinal?

Provavelmente, você odeia pop-ups e tem o direito de fazê-lo. Claro, quem gostaria de ver algo assim imediatamente após acessar a landing page:

Ou isto:

Talvez você nem conheça o ramo de atuação da empresa, mas já está coberto até o pescoço por janelas pop-up. Os exemplos acima não dão certo: primeiro o visitante quer saber mais sobre a marca, para depois baixar o “Guia Gratuito de Geração de Tráfego”, “E-Book Gratuito”, etc. responder recusando novas interações com a marca.

Talvez você devesse se acalmar um pouco e olhar os resultados do teste. O que dizem os números? Aqui estão os dados de um teste A/B de um pop-up e o botão “Não, obrigado” em uma oferta pop-up.

Impressionante? Vejamos então os resultados das empresas que utilizam efetivamente essa abordagem.

1. Experiência com pop-ups

Num dia normal, o serviço WP Beginner recebe cerca de 70-80 novos assinantes graças a vários métodos geração de leads. Mas quanto maior for a base de subscrições, maior será a negócio mais bem sucedido, então os profissionais de marketing do serviço decidiram experimentar pop-ups.

O que foi feito?

Foi desenvolvida uma janela popup que aparece quando o usuário pretende sair do site. O efeito foi alcançado graças às tecnologias de rastreamento de cursor e outros métodos. Esta era a aparência da janela:

Quais são os resultados?

Usar um pop-up nas páginas principais (não no site inteiro) aumentou os registros em 660%. Ou seja, de 70 a 80 leads, o serviço passou para 445 a 470 leads por dia - um salto para um nível qualitativamente novo.

O próximo caso é do Backlinko. Após adicionar um CTA à landing page com oferta de assinatura da newsletter, a conversão caiu para 1,73% – algo que precisava ser feito com urgência. Os profissionais de marketing da empresa desenvolveram uma janela pop-up que aparecia diante dos usuários que decidiam sair da landing page. Aqui está o que parecia:

Lembra que a taxa de conversão era de cerca de 1,7% antes de usar a janela pop-up? 2 dias após o lançamento do pop-up, as estatísticas mudaram. Em apenas dois dias, a taxa de conversão aumentou de 1,73% para 4,83% – mais de 2 vezes!

É claro que, num mundo onde um teste competente pode aumentar a conversão em 100, 300%, até 1.300%, os resultados desta experiência parecem modestos. No entanto, isso não é inteiramente verdade.

Em primeiro lugar, com uma grande base de assinantes, os profissionais de marketing podem criar conteúdo relevante para o seu público e configurar um sistema de venda cruzada. Assim, levando em consideração upsells e outros fatores, um contato rende ao serviço uma média de US$ 15.

Se as janelas pop-up trouxerem 15 assinantes adicionais por dia, a renda diária aumentará em média US$ 225 e a renda anual em US$ 82.125, respectivamente. Não é uma renda ruim para 2 minutos verificando as configurações, certo?

Claramente, os que odeiam pop-ups estavam errados. Mas existem outros fatores: a taxa de rejeição e o impacto dos pop-ups na experiência do usuário. E quanto a isso?

2. Como os pop-ups afetam a experiência do usuário e a taxa de rejeição?

Um dos primeiros pensamentos ao mencionar um pop-up é o aumento do número de falhas, pois cada vez mais pessoas sairão da landing page por falha da janela pop-up, o que é absolutamente lógico. No entanto, lembre-se dos exemplos acima: os profissionais de marketing do WP Beginner não viram nenhuma flutuação neste indicador, nem o Backlinko - o número de falhas não mudou em ambos os casos.

Dan Zarrella chegou à mesma conclusão depois de realizar uma série de testes em sua landing page pessoal, descobrindo que a presença de um pop-up não teve impacto nas taxas de rejeição. A única coisa que mudou é que, ao remover pop-ups, Dan perdeu 50% dos leads recebidos.

3. E quanto à experiência do usuário?

Aparentemente, os visitantes não se importam. Os profissionais de marketing do WP Beginner não receberam uma única reclamação de seus clientes sobre janelas pop-up.

Se você pensar bem, isso faz sentido. Sim, é desagradável ver algo assim depois de acessar um recurso usando um link do Facebook:

Mas isso não é motivo para sair do site com raiva. O que você costuma fazer nesses casos? É isso mesmo - feche a janela pop-up e continue procurando o conteúdo desejado.

Além disso, o uso adequado de pop-ups pode melhorar a experiência do usuário, a exemplo do serviço Vero. Se você passar por aqui página inicial e você não realizar nenhuma ação em 30 segundos, verá uma janela no canto com o texto: “O que está impedindo você de assinar o Vero agora?”

4. Como destruir a usabilidade com pop-ups?

No entanto, você não pode incorporar qualquer anúncio pop-up em sua página de destino e esperar uma alta taxa de conversão. Se uma janela pop-up não se destacar na página, ela será no mínimo inútil.

Você está prestes a sair da landing page e então... Bam! Algo estranho aconteceu, onde apareceu o botão CTA no meio da página? Na realidade, esta janela pop-up foi sobreposta a uma página não escurecida, misturando-se ao fundo. Quando você não separa os pop-ups do resto da página, isso realmente prejudica a experiência do usuário.

Acontece que muitos profissionais de marketing estão errados sobre os pop-ups – eles ainda funcionam. Agora você aprenderá como usar pop-ups em sua landing page para obter o efeito máximo.

5. Crie pop-ups eficazes

Antes de começarmos a criar pop-ups, vejamos seus principais tipos. Existem dois tipos principais de janelas pop-up:

Sobreposições

Eles se parecem com o exemplo acima. Essas janelas obscurecem a tela inteira, escurecendo o fundo. O pop-up continua sendo o único elemento da página claramente visível para o usuário - em ultimamente Há uma tendência de utilização de janelas pop-up neste formato.

O conhecido comerciante Dan Zarella também usa sobreposições de escurecimento de fundo, mas a janela em si é muito menor do que o normal:

Janelas que aparecem como resultado da rolagem da página

Esse tipo de pop-up aparece quando o usuário rola para um determinado estágio da página – na maioria das vezes este formato usado em blogs e é extremamente eficaz. Depois de rolar a página até a metade, você verá algo assim:

Dependendo do software ou plug-in que você usa, você pode experimentar a profundidade de rolagem – até onde o usuário precisa ir para ver o pop-up. Além disso, você pode definir a aparência dos pop-ups com base no tempo gasto pelo usuário no site.

Os mesmos requisitos se aplicam aos títulos, textos de campos e botões em janelas pop-up e ao conteúdo do CTA. Afinal, pop-ups são elementos de um call to action, cujo objetivo é aumentar visualizações/inscritos/leads.

6. Melhor horário para mostrar pop-ups

Se falamos em testar sobreposições, o serviço SumoMe coletou os seguintes dados: hoje o tempo ideal é 5 segundos após o visitante acessar a landing page.

WhichTestWon fornece estatísticas diferentes. Durante os testes, o aparecimento de sobreposições foi verificado aos 15, 30 e 45 segundos após o usuário pousar, e a primeira opção apresentou o resultado ideal: o aparecimento de uma janela após 15 segundos é 11% mais eficaz que a opção com 30 segundos , e 50% mais eficaz que a opção com 45 segundos após o pouso.

Mas lembre-se: não existe um momento ideal para que uma janela apareça, pois os testes são necessários em cada caso específico. Isto também se aplica à questão da frequência dos pop-ups. Simplificando, as estatísticas dos recursos de outras pessoas podem motivá-lo a fazer seus próprios testes, mas não devem ser objeto de imitação - teste.

Hoje falaremos sobre como criar sua própria janela pop-up para o seu site. Agora este métodoé muito popular, mas a maioria das soluções para sua implementação são pagas. Um exemplo de janela não muito bonita (mas isso é só um exemplo) dentro de um post...

Neste post aprenderemos como fazer uma janela popup como esta. Simples, rápido, eficaz e, o mais importante, gratuito!

Qualquer janela pop-up consiste essencialmente em duas partes. A primeira é escurecer o cenário geral. A segunda é a própria janela. A janela, por sua vez, costuma ser dividida em título, texto e formulário de inscrição. Vamos preparar a base da nossa janela, levando em consideração a estrutura especificada.

Nós temos:
fs_popup_bg — Escurecer o site;
fs_popup — A própria janela;
fs_popup_head — Título da janela;
fs_content — O conteúdo da janela, dividido em duas partes;

Agora vamos escrever os estilos necessários...

#fs_popup_bg ( índice z:9999; esquerda:0; topo:0; posição:fixa; largura:100%; altura:100%; fundo:rgba(0,0,0,0.9); ) #fs_popup (margem: 10% 20%; posição:600px; borda: 5px sólido #FF0000; preenchimento: 1px 10px 10px; fs_content_left, .fs_content_right ( float: left; preenchimento: 5px: tamanho da fonte: 20px; família de fontes: Arial; )

Vamos dar uma olhada rápida nos estilos de nossa janela pop-up.
#fs_popup_bg- indica que nosso fundo será preto e quase opaco (0,9), ficará localizado no canto superior esquerdo e ocupará toda a área da tela. Neste caso, a profundidade do elemento, ou melhor, a sua elevação acima dos demais elementos, será muito grande (definitivamente maior que outros).
#fs_popup- indica que a janela estará um nível acima do fundo (caso contrário não a veríamos). Suas dimensões serão de 600px por 300px com cantos arredondados e borda vermelha.
.fs_content_left, .fs_content_right- informa que os blocos estão pressionados à esquerda (necessário para sua localização no mesmo nível), possuem recuos e fonte Arial.

Vamos preencher nossa janela com conteúdo:

Fechar Neste post aprenderemos como fazer uma janela popup como esta. Simples, rápido, eficaz e, o mais importante, gratuito! Apresse-se, digite seu e-mail e receba um monte de!*

informações úteis
Seu e-mail:

* - Este campo não está ativo. Ao clicar no botão "Inscrever-se", você concorda com o uso do seu endereço para fins de envio em massa de materiais publicitários. E você também lega seu carro, apartamento e 10% de sua renda ao autor do site.

#fs_popup_bg ( índice z:9999999999998; esquerda:0; topo:0; posição:fixa; largura:100%; altura:100%; fundo:rgba(0,0,0,0.9); ) #fs_popup (margem: 10% 20%; índice z:99999999999; largura:600px; borda: 5px sólido #FF0000; decoração de texto: sublinhado); ) .fs_content_left (largura: 370px; cor: #FFF; tamanho da fonte: 17px; altura da linha: 17px; família da fonte: Arial;) .fs_content_right (largura: 200px; cor: #FFFF00;) .fs_content_right pequeno (fonte -tamanho: 7px; altura da linha: 7px;) .fs_content_right input (margem: 5px; largura: 190px; cor: #000;) .fs_ok (borda: 1px sólido #FF0000; raio da borda: 10px;

altura: 35px; plano de fundo: #FFFF00; cursor: ponteiro;
cor: #000;
)
Isso é basicamente tudo. Como pode ser visto de Exemplo de JavaScript para uma janela pop-up, é essencialmente necessário em dois casos:

1) Evento de fechamento de nossa janela;

2) Evento de clique no botão “Inscrever-se”;

Também não faria mal nenhum verificar se esta janela foi mostrada em

este computador

. Trabalhar com cookies é bastante adequado para estes fins.

Vejamos como criar janelas pop-up modais, que também são popularmente chamadas de janelas pop-up.

Falamos sobre a criação de janelas pop-up (modais) no WordPress.

altura:100%;