Como implementar um exit pop up que não irrite os usuários

Você provavelmente já viu um exit pop up (do inglês, pop up de saída) e talvez até tenha um implementado no seu próprio site. Muitos profissionais de marketing usam esse tipo de pop up para estimular os visitantes a permanecerem em uma página. Neste post, discutiremos o que são exit pop ups, como eles funcionam e o que você deve fazer para evitar que se tornem irritantes ou até agressivos para os usuários do seu site.

O que é um exit pop up?

Um pop up ou exit pop up aparece na tela quando um usuário está prestes a sair de um site. Na grande maioria dos casos, eles são utilizados para exibir uma oferta que convença o usuário a permanecer no site e realizar uma determinada ação, como por exemplo um cadastro ou uma compra. A oferta pode ser algum material rico em troca do e-mail do usuário, ou descontos em produtos que estão no carrinho para evitar o abandono, como neste exemplo:

Os exit pop ups são muito eficazes na geração de leads. Eles ajudam a manter os visitantes navegando por mais tempo, aumentam o número de contatos da sua base de emails, reduzem o abandono de carrinho e aumentam suas taxas de conversão.

Mas, em muitos casos, esses pop ups aparecem na tela na hora errada e pelos motivos errados. Isso pode ser inconvenientes e interferir na experiência do usuário.

Exemplos de exit pop ups inconvenientes

Pop ups que aparecem no momento errado são ótimos exemplos. Imagine ver um pop up de inscrição em uma newsletter quando você está lendo a parte mais interessante de um artigo, receber um cupom de desconto após finalizar o seu pedido ou, ainda, ser avisado de uma promoção que já não é mais válida. Outro bom exemplo de exit pop ups inconvenientes são aqueles que exibem para todo o público benefícios válidos apenas para um determinado segmento, como desconto na primeira compra ou entrega rápida em determinadas regiões. A imagem abaixo mostra um exemplo que pode não ser adequado para 100% do público.

Sites que não adaptam sua comunicação para mostrar o conteúdo certo para as pessoas certas acabam deixando os usuários frustrados, e prejudicam mais do que ajudam o negócio como um todo.

Assim como tudo na jornada do usuário, o conteúdo certo deve aparecer para a pessoa certa no momento certo se o objetivo é oferecer uma boa experiência e gerar conversões.

Felizmente, existem maneiras de implementar exit pop ups que sejam convenientes e interessantes para os usuários. Vamos falar sobre isso mais para frente, mas antes precisamos explicar como funcionam os exit pop ups.

Como exit pop ups funcionam?

Quando um usuário decide sair de uma página, ele move automaticamente o cursor em direção ao botão de "x" no navegador sem pensar duas vezes. É um padrão tão natural para a maioria das pessoas quanto desligar as luzes ou fechar a porta ao sair de casa.

Em um site, um exit pop up interrompe esse padrão.

Ele aparece assim que detecta o cursor do usuário se movendo para sair da página. Nos casos em que não há movimento do cursor, como em dispositivos móveis, ele verifica o comportamento de scroll do usuário, detectando se ele dá scroll para uma determinada porcentagem da página, dá scroll para cima em vez de para baixo, pressiona o botão “Voltar” ou alterna entre as guias do navegador.

Muitos desenvolvedores criam exit pop ups do zero, com implementações em Javascript diretamente no código, enquanto outros usam plugins pagos ou gratuitos. Optinmonster e Mail Munch são exemplos desses plugins.

Mas como garantir que esses pop ups não incomodem os usuários? Você pode criar para acionar pop ups em situações específicas. No entanto, a maioria dos plugins não permite que você utilize regras de segmentação. Em seguida, forneceremos uma visão geral de quais regras você pode aplicar e como implementá-las.

Quando usar exit pop ups

Implementar um pop up que funcione de acordo com a detecção de intenção de saída ou comportamento de rolagem não é suficiente. Existem outras regras possíveis para os exit pop ups, dependendo dos seus objetivos. Recomendamos que você limite o uso apenas a necessidades essenciais e sempre pensando na experiência do usuário.

Por exemplo, você pode criar uma regra para acionar o pop up apenas uma vez por sessão. Depois que um usuário o vê, ele não deve aparecer novamente, mesmo que ele repita a mesma ação que acionou o pop up da primeira vez.

Outra possibilidade é acionar o pop up para aparecer em páginas de produtos específicos para usuários interessados naquele produto. Por exemplo, um usuário navegando na página de um produto indisponível veria um pop up recomendando que ele preenchesse um pequeno formulário com email e telefone para receber notificações quando o item retornasse ao estoque.

Outra regra pode fazer com que o pop up apareça apenas para usuários novos ou, ainda, retornantes que ainda não fizeram nenhuma compra. Os pop ups de frete grátis são um bom exemplo.

Utilizar regras como essa podem ser impossíveis quando você usa um plugin e complexas para desenvolver do zero.

Como criar um exit pop up dinâmico com a Croct

As regras de segmentação para exit pop up são baseadas no comportamento de navegação do usuário, dados demográficos, dados de CRM, localização e dados de perfil. Os segmentos também podem se estender ao tipo de dispositivo, frequência de visita, perfil social, empresa ou setor do usuário, origem do tráfego e palavras-chave utilizadas para encontrar seu site. Podem ser flexíveis a ponto de permitirem exibir exit pop ups com recomendações de viagem personalizadas em um site de viagens ou recomendações de jogos personalizadas para cada usuário em um site de jogos.

Criar exit pop ups personalizados para cada cliente pode custar muitas horas de desenvolvimento. O pop up em si não é o problema, pois pode ser um simples elemento em HTML. O desafio aparece quando a equipe de marketing quer testar novas ideias, demandando alterações frequentes no conteúdo ou regra do pop up.

Se você é um desenvolvedor (ou tem um trabalhando ao seu lado), um pop up simples e estático seria assim:

1<div role="dialog" id="pop-up">
2    <div id="content">
3          <a href="{{link}}">
4            <img src="{{image}}" alt="{{altImage}}" />
5        </a>
6          <button type="button" aria-label="Close" id="close">✕</button>
7      </div>
8    <div id="backdrop"></div>
9</div>

Com a Croct, no entanto, é possível adicionar ao pop up conteúdo dinâmico. Ele pode ser transformado em um componente personalizado via API através do nosso SDK. A partir daí, a criação de regras de segmentação se torna simples usando o PMS (Personalization Management System), nossa plataforma de criação e gerenciamento de personalizações.

Como funciona um PMS

O PMS da Croct é um software que permite aos profissionais de marketing criarem e gerenciarem experiências personalizadas em diferentes canais.

Por exemplo, você pode exibir um exit pop up para um usuário interessado em viagens ou para usuários navegando de um local específico. Esse tipo de experiência envolve sistemas altamente avançados que processam automaticamente os dados do usuário para reagir às ações de cada pessoa em tempo real.

Com o PMS, essa lógica não precisa estar no código-fonte, facilitando o trabalho do desenvolvedor e permitindo que a equipe de marketing altere e teste diversos conteúdos mais rapidamente. Isso também significa não exibir pop ups inconvenientes, pois cada um pode ser personalizado de acordo com o contexto de cada usuário ao invés de ser exibido de forma genérica em todo o site.

Lembra do exemplo de código que mostramos acima? Usando o Croct, você pode configurar um componente com um link e uma imagem, e a implementação seria basicamente assim:

1croct.fetch('pop-up')
2    .then(({payload: content}) => {
3        if (content === null) {
4            // don't show the pop up
5            document.querySelector('#pop-up').style.display = 'none';
6
7            return;
8        }
9
10        document.querySelector('#content img').src = content.image;
11        document.querySelector('#content a').href = content.link;
12    })
13     .catch(() => {
14         //  if something goes wrong, don't show the pop up 🥲
15         document.querySelector('#pop-up').style.display = 'none';
16     });

Observe que o código-fonte não contém nenhuma lógica de segmentação ou conteúdo, uma vez que ele é inserido dinamicamente para cada usuário pela API da Croct. Portanto, a equipe de marketing pode alterar e realizar testes AB a qualquer momento sem a necessidade de ajustes no código e novos deploys.

Para entender como a implementação do Croct funciona, veja este exemplo simples.

Conclusão

Exit pop ups foram usados por muito tempo de maneira irrestrita e sem preocupação com a experiência do usuário. Mas, quando usados ​​corretamente, eles são uma maneira poderosa de reduzir a taxa de rejeição e aumentar as taxas de conversão.

Usar o PMS da Croct para transformar seus exit pop ups em conteúdo dinâmico traz flexibilidade de personalizar qualquer tipo de experiência. Além disso, também é possível descobrir quais dos pop ups estão entregando os melhores resultados por meio de testes AB, tudo em uma única plataforma. Com isso, você pode otimizar seu site mais rapidamente e validar hipóteses sobre as reais necessidades de seus usuários.

Então se você quer obter os melhores resultados com seus exit pop ups e melhorar a experiência do seu usuário, crie sua conta gratuitamente e explore nossa plataforma.