Hoje é muito importante você configurar o PIXEL do Facebook na sua loja, sei que existe várias formas de fazer isso. Mas para te ajudar vou compartilhar uma forma simples e fácil de fazer isso com a instalação de um PLUGIN e um código pronto para marcar o PIXEL.
Antes de Iniciar…
Faça a instalação do Plugin NextMove Lite, com esse plugin você consegue criar páginas de obrigado da compra, além disso ele permite você utilizar alguns shortcodes para obter informações como preço e método de pagamento por exemplo.
Se quiser saber mais assista esse vídeo:
1 – Parte (Código JS)
Agora você poderá copiar o código a abaixo que será a primeira parte de toda configuração.
<script type="text/javascript">
//Desenvolvido por RAFAEL MARQUES - ensinoweb.com.br
var fbPaymentData = document.getElementById("whatPayment");
if (fbPaymentData) {
var totalPrice = fbPaymentData.getAttribute("data-price");
var methodPayment = fbPaymentData.getAttribute("data-method").toLowerCase();
var paymentType = {};
var cartoes = ['cartões de crédito', 'cartão de crédito', 'credit cards', 'credit card'];
var boletos = ['boleto', 'boletos', 'lotérica', 'lotéricas'];
//pega se for boleto
if (boletos.some(v => methodPayment.includes(v))) {
paymentType = { payment_type: "BILLET" };
}
//pega se for cartão de crédito
if (cartoes.some(v => methodPayment.includes(v))) {
paymentType = { payment_type: "CREDIT_CARD" };
}
//pega se for um Pix
if (methodPayment.includes("pix")) {
paymentType = { payment_type: "PIX" };
}
//executa a ação...
fbq("track", "Purchase", {
currency: "BRL",
value: totalPrice,
...paymentType,
});
}
</script>
Caso seu tema não suporte nativamente um campo para inserir códigos JavaScript, você pode realizar a instalação desse plugin “Insert Headers and Footers“, após a instalação será possível inserir códigos entre tag Head ou Body do seu WordPress.
2 – Parte (Código HTML)
Para que tudo isso funcione corretamente copie agora essa linha abaixo e cole na página que você configurou com o plugin NextMove Lite.
<span id="whatPayment" data-price="{{order_total_raw}}" data-method="{{order_payment_method}}" style="display: none;">Resultado</span>
Pronto agora você pode testar em uma página de pedido recebido, se estiver ativo o Facebook PIXEL HELPER, isso significa que esta funcionando perfeitamente e marcando o PIXEL corretamente de acordo com o método de pagamento.
IMPORTANTE: Não adianta colocar esse código no seu WP sem instalar o Plugin Next Move Lite, sem ele o mesmo não funciona!!!.
Quais Parâmetros posso utilizar?
- Boleto -> BILLET
- Cartão de Crédito -> CREDIT_CARD
- Pix -> PIX
Esses são os parâmetros que você poderá utilizar no momento em que for criar uma conversão personalizada através de um evento.
Não quero marcar Boletos, Como Faço?
Se você é daquela turma que prefere apenas capturar os eventos apenas quando for cartão de crédito vou deixar exatamente o trecho de código que você deve retirar.
//pega se for boleto
if (boletos.some(v => methodPayment.includes(v))) {
paymentType = { payment_type: "BILLET" };
}
Retirando essa linha de código acima você vai marcar eventos apenas de Cartão de Crédito e PIX.
Espero ter ajudado, e comenta ai, você conseguiu implementar na sua loja WooCoomerce?
Fiz tudo da maneira que ensinou, mas o meu só esta pegando o CUSTOM PARAMETERS SENT
value: 350.00 e currency: BRL, já o parametro payment_type, não está pegando, por esse motivo, não consegui criar conversões personalizadas para os tipos de pagamento. Mas gostei da aula! Parabéns.
Fala Carlos tudo certo? Você fez o teste com finalização de uma compra? E verificou se identificou na extensão do FB se pegou o método certinho? Caso tenha configurado tudo corretamente e marcado o Pixel. Ainda assim demora um pouco para aparecer nos eventos do FB, é claro se esse for o seu caso.
Fala Rafael, tudo bem? Espero que sim!
Então meu amigo, fiz da maneira em que você fez no vídeo, só que no purchase só estava aparecendo a moeda e o valor, o método de pagamento não! Então fiz uma pequena modificação no código na seção da execução da ação que ficou assim:
//executa a ação…
fbq(“track”, “Purchase”, {
currency: “BRL”,
value: totalPrice, paymentType
});
}
Ou seja o paymentType, estava concatenado (…paymentType) e com vírgula no final, pois ele já havia sido chamado acima três vezes. Ao tirar estas linhas do código, ele começou a chamar o tipo de pagamento na extensão do FB, só que não tá vindo o valor. Ta ficando assim:
CUSTOM PARAMETERS SENT
value: 267.00
currency: BRL
paymentType: {}.
Olá Carlos, tudo ótimo.
Bom vamos lá, primeiramente o código esta funcionando perfeitamente, esse “…paymentType” estou usando uma “Sintaxe de Espalhamento”, ou seja, para espalhar no Objeto que já contém um valor e moeda, juntando com os parâmetros que estou guardando de acordo com o tipo de pagamento. Quando você retirou esses “…” quer dizer que o Objeto só inicia como vazio {} e por isso não funcionou mais.
Sobre a questão de pegar apenas MOEDA e VALOR, isso esta acontecendo porque na sua loja (essa que você deixou disponível nos comentários) eu verifiquei que o processo de pagamento esta em inglês, ou seja, o nome dos métodos está diferente e por conta disso o script que criei de forma simples pega apenas nomes em português como boleto, cartão e etc.. E isso cheguei a comentar no vídeo para pegar exatamente essas palavras.
Por exemplo: Na sua loja no checkout com o método de pagamento por MP está escrito diferente veja abaixo:
Cartão de Crédito esta como “Pay with debit and credit cards”
Boleto está como “Pay with cash”
Dessa forma realmente não vai funcionar mesmo devido ao nome esta diferente do script, nesse caso ou você atualiza na sua loja esse idioma ou altera direto no script.
Uma outra coisa importante, parece que você adicionou dois PIXEL do Facebook na sua loja, então verifique isso caso tenha realizado de maneira errada.
A boa noticia é que atualizei o código, você agora poderá alterar ou trocar os nomes que deixei por padrão para boletos e cartões.
Grande Abraço…
Rafa, boa noite!
Cara, fiquei o dia todo tentando fazer funcionar e não consegui!
Eu utilizo um plug-in para personalizar meu check-out (cartflows) e ele tem a opção de instalar e rastreiar os eventos do facebook através dele. É ali com ele que o pixel do facebook funciona, no fluxo de adicionar ao carrinho, iniciar o checkout e compra.
Seguindo os passos do vídeo, não consegui personalizar esta parte do pagamento. Teria uma outra forma de rastrear os pedidos de boleto e cartão, tendo em vista essa outra plataforma de checkout?
Olá Vinicius, Boa Noite!
Então, com você mesmo disse que está utilizando CartFlows, que já facilita mesmo na opção gratuita você consegue marcar o pixel nos fluxos mais básicos, já esse método que criei só funciona com o Plugin Next Move Lite, justamente porque o mesmo permite recuperar alguns dados através de variáveis onde consigo pegar informações do método de pagamento e valor total do pedido.
Tem sim outra forma de fazer essa marcação ou rastreio, como estou observando que esse assunto esta rendendo, estou vendo se faço um método mais genérico e quero também falar sobre o CartFlows.
olá Rafael tudo bem, estou precisando de sua ajuda pois estou começando, e ainda estou tendo um pouco de dificuldades para entender o funcionamento necessário para fazer mudanças em meu site.
Quero muito implantar esse sistema de boleto e cartão no pixel porem ele não tem o código de identificação paymentType, percebi que terei de configurar ele separado, porem tentei e não consegui , estou usando a pagina de obrigado raiz que vem no woocommerce e se possível queria continuar com ela mesmo, pois já tenho muitos pluguins estalados ……É possível fazer essa implantação pelo google tag maneger ???? pois já tenho estalado em meu site, e já consigo usa-lo , só não consegui implantar esses condigo que você fez, esta dando erro na ora de publicar no tag maneger …..Desde já te agradeço muito obrigado e aguardo seu contato…
Olá Wellington, tem com sim realizar com o Google Tag Manager, entretanto mostrei dessa forma que é a mais simples para o usuário iniciante. Pois tem muita gente que não sabe o que GTM e muito menos como funciona!
Uma coisa importante que todo mundo confunde com esse método eu fiz, é necessária a implementação do Plugin Next Move Lite sem ele não vai funcionar mesmo, ele seria a base das informações que com o JS eu consigo marcar o PIXEL.
Para funcionar em um checkout padrão sem a necessidade do plugin que mencionei, você teria que modificar o código JS para pegar os valores direto do checkout padrão através de uma classe padrão do Woo.
Já estou planejando algum vídeo especifico sobre isso. Mas no momento esse método só funciona corretamente com os requisitos que citei anteriormente.
olá Rafael tudo bem, olha eu estou com o mesmo problema do do segundo comentário (CARLOS M B CHAVES ) li e reli varias vezes o comentário dele e sua resposta , porem não consegui achar a solução que você mencionou , você poderia dar uma explicação mais clara para eu conseguir concluir …..outra coisa como eu faço para incluir a impressão do boleto na pagina de obrigado ????
No caso do (Carlos) o checkout dele está com as informações de pagamento em Inglês, no seu caso de acordo com o seu comentário você não quer ou não tem o Plugin Next Move Lite, observei a sua loja e não vi esse plugin instalado, para esse método que eu criei como exemplo só funciona com esse Plugin.
Veja que no código acima tem algumas variáveis ex: {{order_total_raw}} e {{order_payment_method}} que o Plugin possibilita recuperar alguns valores que nesse caso é o total e o tipo de pagamento. O segredo está nesse linha de código, se você copiar e colar sem ter instalar o Plugin, como ele vai recuperar as variáveis?
Novamente, ainda vou disponibilizar uma solução mais genérica, onde o script vai pegar a própria classe do Woo que pega o método e total da compra, porque até então esse método depende do Plugin para recuperar esse valores e fazer a marcação com Boleto, Cartão e PIX!
Sobre a impressão do boleto, quando o cliente fecha a compra, naturalmente aparece o boleto par ao mesmo na página de obrigado/pedido recebido!
Rafael vou deixar outra observação , assim que é colocado o código maior no Footer do site o pixel fica amarelo com a seguinte mensagem ( Detectamos o código do evento, mas o pixel não foi ativado para este evento, então nenhuma informação foi enviada ao Facebook. Isso pode ser devido a um erro no código, mas também pode ocorrer se o pixel disparar em um evento dinâmico, como um clique de botão. )
Isso é do próprio Facebook, o script ele só ativa quando encontra a tag span no html com as informações. Aconteceu comigo aqui também, ele tenta identificar automaticamente alguns botões disponíveis na loja para determinar um evento posteriormente.
Rafael não achei outro campo para comentar, então fui aqui mesmo!
Ficaria muito feliz se você respondesse essa minha pergunta:
• Quando eu coloco o código no plugin “Insert Headers and Footers“ no Footer, ele fica no site todo? Ou apenas na página de obrigado?
Pergunto isso pois o evento de Purchase se ele ativar em outras páginas seria um tiro no pé.
Olá, acho que você não compreendeu o script, ele só dispara na página obrigado, não tem nada haver com o Plugin “Insert Headers and Footers“. Realmente seria um tiro no pé ficar rodando o “purchase” em todas as páginas da sua loja.
Rafael valeu muito obrigado…..vou atualizar a minha configuração…….