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.
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.
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.
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.
Utilize a solução a seguir.
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.
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”.
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.
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
Segurança: Atualizações frequentes geralmente incluem patches de segurança para corrigir vulnerabilidades identificadas. Ao manter o Magento atualizado, você reduz significativamente…
Como adicionar uma mensagem de Alerta ou Aviso do Admin do Magento 2 Injete o Magento\Framework\Message\ManagerInterface no construtor da sua…
Para exibir as mensagens adicionadas na classe Magento\Framework\Message\ManagerInterface em um arquivo .phtml, você pode usar o seguinte código: <?php $objectManager…
Para criar um script no Magento 2 que exporte as categorias para um arquivo XML com o nome da categoria,…
Para definir um vídeo MP4 como plano de fundo em um <div> usando HTML e CSS, você pode seguir estas…
Como desativar o "lastname" no Magento 2 e Adobe Commerce Desativando a obrigatoriedade do campo Execute a SQL abaixo diretamente…
Ver comentários
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
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 );
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/
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!
Oi Marcio, bom dia,
Post Atualizado!
Forte Abraço!