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

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

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”.

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.

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”.

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

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

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

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 Ajax 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 redirecionamento 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