O visitante se interessa pelo seu anúncio, clica, chega na sua página e vai embora em menos de 20 segundos sem ao menos conferir as ofertas ou ler os depoimentos das pessoas que já compraram e estão satisfeitas com o seu produto.

Acontece. Acontece muito.

No post anterior, vimos como direcionar nossos visitantes para onde quisermos quando ele tentar sair através do botão Voltar. Agora, vamos usar um plugin um pouco mais avançado e com mais recursos: Exit Intent.

Como funciona Exit Intent? Trata-se de um diálogo exibido ao usuário quando o ponteiro do mouse sai da janela do navegador e se aproxima do botão de fechar a aba ou fechar o navegador ( o “X” do mal ).

O diálogo exibido pelo Exit Intent é do tipo Modal que cobre a tela inteira, capturando a atenção do usuário para a mensagem que ele carrega. O objetivo maior é prover uma oportunidade a mais para convencer nosso visitante fugitivo a executar a ação para a qual ele foi levado até a sua Campanha ( preencher um form, efetuar uma compra, visualizar um conteúdo específico, assinar newsletter etc ).

Implementar Popups de Intenção de Saída na sua estrutura pode significar um acréscimo de até 20% nas conversões e de mais de 1000% em alguns tipos de ações, como assinar uma newsletter.

O plugin Campaign ExitIntent foi desenvolvido para ser o mais customizável possível, permitindo assim se adaptar a vários tipos de ações e Designs de páginas, sem ser muito extenso ou complicado e precisar instalar arquivos díficeis e pesados no o seu site.

Código necessário para instalalar o Plugin:

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//assets.campaign.com.br/js/plugins/campaign-exitintent.js"></script>
<script type="text/javascript">
$(document).ready(function(){

var configuracoes = {
                
            options:{
                mostrarBotao:true // define se você quer que o botão do ExitIntent seja mostrado ou não
            }
            /**
             * Para mudar os copies do Modal, modifique estas variáveis
             */
            ,textos:{
                // copy do titulo principal
                titulo:'VEJA O QUE PREPARAMOS PARA VOCÊ!'
                // texto do copy mais longo
                ,copy:'Não saia agora! <b> Conheça nossos Descontos Promocionais!</b><br>Os descontos podem se encerrar se você sair<br>Condições Especiais <b>EM TODOS OS KITS!</b>'
                // copy do texto que vai dentro do botão
                ,textoBotao:'EU MEREÇO MEU XPRODUTOX COM DESCONTO DE ATÉ 40% DE DESCONTO!'
            }

            /**
             * Configure as cores do botão
             */
            ,estilos:{
                corFundo:'#B92C5D' // cor geral do fundo do modal
                ,corTextoGeral:'white' //
                ,corTextoTitulo:'white'
                ,corBotao:'#46d3a2'
                ,corBotaoHover:'#55f2bc'
                ,corTextoBotao:'white'
            }
            
            ,links:{
                /***
                 * aqui você pode configurar um atributo do botão,
                 * tal como o href ou um evento, como o onclick por exemplo
                 */ 
                botao:'href="/pagamento?utm_medium=pagina-vendas&src=exit-intent"'
            }
        };

CampaignExitIntent.apply( configuracoes ); // inicia o plugin de Modal de Saída com as confs

});
</script>

Da linha 1 à 3, temos a inclusão dos arquivos javascript necessários para que o plugin funcione. Da linha 6 à linha 42, temos o código de configuração do Modal de Intenção de Saída. Na linha 44, o comando para iniciar o ExitIntent.

Para quem não conhece javascript, não precisa se assustar, basta manter o código como está e modificar apenas o que estiver entre aspas simples. Com isto, poderemos modificar as cores, as ações, os copies e até mesmo injetar código HTML ( um form ou campo para captação de email, por exemplo ) caso você possua um pouco mais de conhecimento de programação.

No post anterior, demonstrei como você pode incluir códigos na sua página de uma forma bem simples, seja pelo wordpress ou direto no HTML da sua página. Clique aqui e aprenda como incluir códigos javascript na sua página.

Como Customizar o Exit Intent:

Linha a linha, vamos aprender o que significa cada código:

Linha 9:

mostrarBotao:true

Indica se você deseja que o botão de Call-to-Action seja exibido ou não. Para ocultar o botão, substitua a palavra true por false.

Linhas 14 a 21:

,textos:{
                // copy do titulo principal
                titulo:'VEJA O QUE PREPARAMOS PARA VOCÊ!'
                // texto do copy mais longo
                ,copy:'Não saia agora! <b> Conheça nossos Descontos Promocionais!</b><br>Os descontos podem se encerrar se você sair<br>Condições Especiais <b>EM TODOS KITS!</b>'
                // copy do texto que vai dentro do botão
                ,textoBotao:'EU MEREÇO MEU LIFTGOLD COM DESCONTO ATÉ 40% DE DESCONTO!'
            }

Esta é a parte onde configuramos os textos do Exit Intent, modifique-os para a mensagem que você deseja transmitir. Lembre-se sempre de manter o texto entre aspas simples, mude apenas o conteúdo entre as aspas simples. Teste incluir tags HTML, funciona também.

Linhas 27 a 32

corFundo:'#B92C5D' // cor geral do fundo do modal
,corTextoGeral:'white' //
,corTextoTitulo:'white'
,corBotao:'#46d3a2'
,corBotaoHover:'#55f2bc'
,corTextoBotao:'white'

Aqui, podemos mudar as cores dos elementos do plugin. As cores podem ser informadas através de seus nomes em inglês ou usando uma sequência em hexadecimal precedida do símbolo de hash ( # ). Não quer se preocupar com isso, use este site para escolher as cores, copiar o código e colar: http://www.pawprint.net/designresources/web-colours.php. Do mesmo modo que o texto, mantenha tudo entre aspas simples.

Linha 40

/**
* aqui você pode configurar um atributo do botão,
* tal como o href ou um evento, como o onclick por exemplo
*/ 
botao:'href="/pagamento?utm_medium=pagina-vendas&src=exit-intent"'

Este é o mais complexo e o que devemos tomar mais cuidado. Nesta configuração, podemos incluir um novo atributo no botão. Na configuração padrão, inserimos um link para a página de pagamento do site com dois parâmetros para indicar que o tráfego está vindo do Exit Intent da página de vendas. Ambos os parâmetros utm_medium e src são padrão para a maioria das plataformas de tráfego e de Afiliados.

Para finalizar, veremos na prática como o plugin funciona, assista ao vídeo

Compartilhem, curtam e deixem comentário para podermos melhorar e trazer mais novidades!

Obrigado e até o próximo Plugin!