Integração de formulários via código de monitoramento em sites React

Atenção: este conteúdo trata-se de uma Edição Avançada, à qual a RD não oferece suporte ou prestação de serviço. Para trabalhar com edições avançadas, é necessário ter conhecimento em programação.

Nota: esta configuração se aplica aos planos Basic, Pro e Enterprise. Para saber mais sobre cada um dos planos do RD Station Marketing, clique aqui.

Como funciona a integração de formulários

A partir do momento em que você instala o código de monitoramento do RD Station Marketing em seu site, todos os formulários que estiverem no padrão para captura pelo código serão integrados. Para isso, é necessário ativar a captura de formulários através de Integrações > Integração de Formulários.

Porém, algumas linguagens de programação atuais (como o React), necessitam de algumas alterações para que o código de monitoramento possa fazer a captura e integração correta dos formulários.

Dica: caso você ainda não tenha configurado o código de monitoramento para integração de formulários, acesse o passo a passo nesta seção, conforme a sua necessidade.

Com o código de monitoramento devidamente aplicado, a mensagem abaixo será exibida ao acessar a funcionalidade dentro do RD Station Marketing:

Esta etapa é necessária para continuar com os procedimentos descritos a seguir.

Configuração para a integração de formulários em sites React

Passo 1

Após a instalação do código de monitoramento, acesse a opção 2b, em que diz: Eu quero fazer a configuração por conta própria.

Copie e guarde o script fornecido:

Passo 2

Neste passo, vamos usar apenas parte do código copiado no Passo 1.

Com base no nosso exemplo, vamos usar apenas o endereço do atributo src:

No componente React onde o formulário está sendo renderizado, insira o seguinte código dentro da função componentDidMount() utilizando o endereço copiado:

Caso você esteja utilizando a nova sintaxe de Hooks, o procedimento segue o mesmo padrão:

Passo 3

Acesse a página onde o formulário foi inserido. Neste ponto, o formulário já deverá ser capturado pelo nosso script.

Lembrando que pra que tudo funcione corretamente:

O formulário precisa conter as tags <form> </form>;
O formulário precisa de ao menos um campo com o type ou name="email";
O botão precisa ter o atributo type="submit".

Por fim, preencha o formulário, faça uma conversão e confirme que o lead foi enviado corretamente para sua Base de Leads no RD Station Marketing.

Aplicação de exemplo

Caso queira, é possível baixar uma aplicação React de exemplo com o formulário integrado neste repositório Github.

Como funciona a integração de formulários