Pixel de Conversão do Facebook no formulário de contato – WordPress

Como configurar o pixel de Conversão do ” em um formulário de contato do , criado pelo Contact form 7.

Pixel de Conversão do Facebook no WordPress

Primeiro passo para configurar Pixel do Facebook

Caso você tenha alguma dúvida sobre como criar um pixel de conversão no Facebook e como ele será útil para os seus anúncios, acesse: Guia de implementação do pixel do Facebook

Uma vez você estando de posse do script Pixel do Facebook, vamos iniciar o tutorial.

Criando uma página

No WordPress, você deverá criar uma página agradecendo o contato do visitante ou algo semelhante.

O objetivo por de traz dessa página é que uma vez o formulário sendo enviado, o visitante será redirecionado para a página de agradecimento que terá o script do Pixel do Facebook.

Dessa forma a conversão será contabilizada devida a execução do script.

Caso você não tenha criando ainda uma págin, acesse pelo menu Páginas, opção Adicionar nova.

Agora adicione o conteúdo e titulo da página normalmente, similar a criação de um Post.

Feito isso, altere o modo do editor de “Visual” para “Texto”.

altere o modo do editor de visual para texto

Ainda no editor, porém agora no modo texto, cole o script do Pixel do Facebook na última linha, logo após todo o conteúdo da página.

cole aqui pixel do facebook

A primeira parte está pronta, agora vamos configurar o formulário de contato.

Configurando Contact Form 7 “Formulário de Contato”

Acesse pelo menu a opção “Contato”, sub-opção “Formulários de contato”.

pelo menu, contato, formulários de contato

Caso você não localize a opção no menu por alguma divergência de tradução, você também pode estar acessando por “Plugins”, “Plugins instalados”

Na listagens de Plugins que irá aparecer, clique em configurações, logo abaixo do Contact Form 7

acesse configurações do contact form 7

Irá aparecer uma lista de formulários cadastrado na janela que será carregada, edite o qual você deseja configurar o Pixel do Facebook.

edite o formulário de contato correto

Acesse a aba Configurações adicionais “inglês, Additional Setting”.

configurações adicionais, wordpress

No campo presente em configurações adicionais adicione o seguinte comando:

on_sent_ok: "location.replace('http://www.YOURSITE.com/thank-you');"

Ele é bem simples, quando a mensagem for enviada com sucesso ele irá redirecionar o visitante para página informada.

Altere “http://www.YOURSITE.com/thank-you” com endereço da página que criamos no passo anterior.

on_sent_ok não é mais suportado nas versões recentes do Contact Form 7

Utilize a solução a seguir.

Editando o arquivo functions.php

Para editar o arquivo, siga os passo deste post: Como editar o arquivo functions no WordPress

Uma vez com o arquivo aberto, adicione no final dele:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
    location.replace('http://seusite.com.br/pagina-criada');
}, false );
</script>
<?php
}

Não se esqueça de substituir no código acima o endereço para página que você criou.

Para uma página com vários formulários

Se você tiver vários formulários de contato e quiser executar a função apenas para um formulário de contato específico, verifique a ID do formulário de contato, utilize o exemplo a seguir:

add_action( 'wp_footer', 'mycustom_wp_footer' );
 
function mycustom_wp_footer() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7submit', function( event ) {
    if ( '123' == event.detail.contactFormId ) {
        ga( 'send', 'event', 'Contact Form', 'submit' );
    }
}, false );
</script>
<?php
}

Você pode encontrar o ID de um formulário de contato procurando o atributo “id” no shortcode contact-form-7. Por exemplo:

[contact-form-7 id=”1234″ title=”Contact form 1″]

O ID deste formulário de contato é “1234”.

Você pode personalizar o código acima é utilizar outros eventos disponíveis.

wpcf7invalid — Disparado quando um envio de formulário foi concluído com sucesso, mas o e-mail não foi enviado porque existem campos com entrada inválida.
wpcf7spam — Disparado quando um envio de formulário Ajax foi concluído com sucesso, mas o e-mail não foi enviado porque uma possível atividade de spam foi detectada.
wpcf7mailsent — Disparado quando um envio de formulário Ajax foi concluído com sucesso e o e-mail foi enviado.
wpcf7mailfailed — Disparado quando um envio de formulário Ajax foi concluído com sucesso, mas falhou ao enviar o e-mail.
wpcf7submit — Disparado quando o envio do formulário foi concluído com sucesso, independentemente de outros incidentes.

Testando o Pixel de Conversão do Facebook

Está feito, realize agora um teste no formulário, enviando uma mensagem para que você possa se certificar que o está ocorrendo.

Caso você tenha alguma dúvidas ou encontrou algum problema durante os passos do tutorial, por favor fique a vontade para fazer um comentário que irei prontamente te ajudar.

Tenha acesso diversos tutoriais sobre o WordPress, pelo link: WordPress – Tutoriais, dicas, plugins, temas e um pouco mais

5 comentários sobre “Pixel de Conversão do Facebook no formulário de contato – WordPress

  1. Olá, tudo bem? Fiz algumas pesquisas no Google e acabei encontrando seu Blog, creio que possa te ajudar a ter ainda mais lucros com seu negocio. Quer ter uma renda extra sem sair de casa, basta você ter acesso a Internet e Computador.. Venha fazer parte dessa empresa que não para de crescer e tem ajudado a milhares de pessoas a conquistar sua independência financeira. Não precisa indicar, não precisa vender… GARANTIDO Faça Seu Cadastro: http://bit.ly/empreendedorunick Cadastrando-se mando o treinamento Sucesso Solange Correia
  2. Roger, a linha de comando que chama o “event” do Contact Form 7 após ENVIAR/submit o formulário NÃO É “wpcf7mailsent” essa informação está errada inclusive no Fórum do Wordpress onde um cara respondeu lá como Staff…. No próprio Manual do Plugin eu encontrei que o correto é “wpcf7submit” e para isso basta Colocar o Script abaixo (facilitei pra você) em “Configurações Adicionais” dentro das propriedades do próprio formulário que você criou para usar! Forte Abraço irmão, obrigado por ter respondido minha solicitação e pela visita no meu Site PortaL HeRo. Ontem passei a tarde pesquisando até descobrir como tudo funciona e botei pra funcionar, tá funcionando 100% com o código abaixo: *Obs.: Para testar use a própria ferramenta do Facebook Pixel Test, que é uma extensão para Google Chrome. Ai você consegue testar todos os eventos do seu pixel, inclusive esse! Quando você testar ele só vai aparecer que deu certo o LEAD após enviar com sucesso o formulário! Funciona! document.addEventListener( ‘wpcf7submit’, function( event ) { fbq(‘track’, ‘Lead’); }, false );
    1. Boa noite Márcio, Perfeita a sua colocação, precisando estou as ordens, forte abraço! Referência: https://contactform7.com/dom-events/ Sobre on-sent-ok: https://contactform7.com/2017/06/07/on-sent-ok-is-deprecated/
  3. De acordo com a última atualização do plugin Contact Form 7, foi desabilitado essas funções: Note: on_sent_ok and on_submit are deprecated and scheduled to be abolished by the end of 2017. You can use DOM events instead of these settings. Por favor, faça um tutorial explicando a mesma coisa só que em “DOM events” pelo amor de Deus kkkkkkkkkkkk :D Adorei a dica!

Dúvidas? Faça um comentário logo abaixo ou envie uma mensagem clicando aqui.

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *