Instalando PIXEL do Facebook no WooCommerce

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.

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.

Espero ter ajudado, e comenta ai, você conseguiu implementar na sua loja WooCoomerce?

6 comentários

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

  2. 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…

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

Deixar uma resposta