RD Station – reCAPTCHA nas Landing Pages

RD Station – reCAPTCHA nas Landing Pages

As landing pages contruídas no RD Station implementam um desafio de segurança para evitar que robôs enviem spam pelos seus formulários. É um recurso simples e eficaz, onde geralmente o usuário deve inserir o resultado de uma operação matemática, como por exemplo 5 + 2, cuja resposta correta é 7. Todavia, em alguns casos, os bots são mais espertos e conseguem enviar spam mesmo assim!

Intrigado com esses casos, o time de desenvolvimento da Kampana produziu esse tutorial maneiro para acabar de vez com spam nas suas landing pages do RD Station. Nossa solução é rápida e facilmente compreensível – não precisa ser programador pra fazer! Se liga nos passos logo abaixo.

1 – Criar uma Chave no Google reCAPTCHA

Entre no site do Google reCAPTCHA e clique em “Admin console”.

RD Station reCAPTCHA Admin Console

Faça o login ou crie uma conta para continuar.

Google Login

Logo em seguida, o console será carregado: caso você nunca tenha criado uma chave, a página irá solicitar os dados para cadastro. Nesse ponto, você deverá inserir algumas importantes informações.

1 – Label

Esse rótulo é meramente informativo, para facilitar o seu controle de quais chaves você já criou. A Kampana recomenda que você utilize o seguinte padrão: “[Tipo] – [Nome do Projeto]”. Existem diferentes tipos de reCAPCTHA, e no caso desse tutorial, utilizamos o v2. Já em relação ao nome do projeto, sugerimos que seja o nome do cliente, uma vez que o mesmo cliente pode ter diferentes landing pages e domínios. Resumidamente, um exemplo de como ficaria a label é o seguinte: v2 – Papelaria ABC.

2 – reCAPCTHA Type

Como adiantamos no item anterior, marque a opção reCAPTCHA v2Invisilbe reCAPTCHA badge. Dessa maneira, garantimos que ele será acionado apenas em casos suspeitos, e não para todas as situações, uma vez que a landing page no RD Station já conta com um mecanismo próprio.

3 – Domains

Aqui você coloca os domínios onde estarão hospedadas suas landing pages. Esse campo permite diferentes valores, uma vez o mesmo projeto/cliente pode contar com diferentes landing pages em diferentes domínios.

reCAPTCHA Setup

Não se esqueça de aceitar os termos de serviço. Em seguida, clique em “submit” para criar a nova chave.

reCAPTCHA Details

O Google te apresenta duas diferentes chaves, mas nesse tutorial precisaremos apenas da primeira: a site key. Copie o seu conteúdo e salve em um lugar seguro. Agora que nossa chave está em nossas mãos, vamos ao RD Station!

2 – Editar Landing Page no RD Station

Acesse o editor da sua landing page, e logo depois clique em “edição avançada”.

RD Station Edição Avançada

Aqui vamos precisar inserir dois trechos de código. Primeiramente em “Javascript em HEAD”, insira o prmeiro trecho de código abaixo. É importante substituir o atributo sitekey pela chave copiada no item anterior. Similarmente em “Javacsript em BODY”, copie integralmente o segundo trecho de código.

<!-- Inserir no Head -->

<script>
  var onloadCallback = function() {
    grecaptcha.render('cf_submit', {
      'sitekey' : '6LdqvNoUAAAAAGsdKu3KrM1kRdHmSY7bKz_wkR1M',
      'callback' : onSubmit
    });
  };
</script>

<!-- Inserir no Body -->
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

Pode não parecer, mas já está pronto! Portanto é só carregar sua landing page e verificar que o reCAPTCHA está sendo carregado.

RD Station Badge reCAPTCHA

Chega de bot, chega de spam! Dessa maneira, na sua lista de leads você terá apenas pessoas reais que se interessaram pelo seu conteúdo.

Gostou da dica? Então compartilha com os amigos e fica ligado no nosso blog.

José Luís Vieira

CTO & Founder
Experiente Engenheiro de Computação, mestre e doutorando, com histórico comprovado de atuação no setor de tecnologia da informação e serviços. Excelente comunicador com sólida formação técnica. Especialista em soluções Web, Cloud e AI.