Índice

1. Sobre mim
2. Criando pixels do Facebook
3. Verificação de domínio para Facebook Pixel
4. Implementando o Facebook Pixel no aplicativo Vite React
5. Garantindo a segurança ao carregar o pixel do Facebook
6. Estrutura do código
7. Como usar

Sobre mim

Olá, sou Mohd Amir, um desenvolvedor full-stack com experiência em aplicativos escalonáveis ​​e de fácil manutenção. Gosto de mergulhar em tecnologia de ponta. Você pode conferir meu trabalho no GitHub ou me seguir no Twitter.

Criando pixels do Facebook

Para começar a usar o Facebook Pixel:

1. Faça login no seu Gerenciador de eventos do Facebook.
2. Vá para a guia Pixels em Fontes de dados.
3. Clique em Criar um pixel e dê um nome a ele.
4. Você receberá um Pixel ID e um código base para implementar em seu site.

Verificação de domínio para Facebook Pixel

Para verificar seu domínio no Facebook:

1. Vá para Configurações de negócios do Facebook > Brand Safety > Domínios.
2. Adicione seu domínio e o Facebook lhe dará um dos três métodos:
   • Meta-tag: Adicione a meta tag ao do seu site.
   • Upload de arquivo HTML: carregue um arquivo de verificação HTML para seu diretório raiz.
   • Registro DNS TXT: Adicione um registro DNS à configuração DNS do seu domínio.
3. Verifique assim que o método apropriado for implementado.

Implementando Facebook Pixel no aplicativo Vite React

Agora, vamos integrar o Facebook Pixel ao seu aplicativo Vite React:

1. Configurar variável de ambiente

Crie um arquivo .env na raiz do seu projeto Vite e adicione seu Facebook Pixel ID:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. Crie um gancho personalizado para carregar o pixel do Facebook

Crie um facebookPixelHook.js dentro do diretório hooks/:

import { useEffect } from "react";

const useFacebookPixel = (pixelId) => {
  useEffect(() => {
    // Load the Pixel script only if it's not already loaded
    if (!window.fbq) {
      (function(f, b, e, v, n, t, s) {
        if (f.fbq) return;
        n = f.fbq = function() {
          n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
        };
        if (!f._fbq) f._fbq = n;
        n.push = n;
        n.loaded = !0;
        n.version = "2.0";
        n.queue = [];
        t = b.createElement(e);
        t.async = !0;
        t.src = v;
        s = b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t, s);
      })(
        window,
        document,
        "script",
        "https://connect.facebook.net/en_US/fbevents.js"
      );

      // Initialize Facebook Pixel
      window.fbq("init", pixelId);
    }

    // Track page view
    window.fbq("track", "PageView");
  }, [pixelId]);
};

export default useFacebookPixel;

3. Use o gancho em seu componente React

Use este gancho em seu componente para inicializar e rastrear eventos:

import React from "react";
import useFacebookPixel from "./hooks/facebookPixelHook";

const MyApp = () => {
  const pixelId = import.meta.env.VITE_FB_PIXEL_ID;

  useFacebookPixel(pixelId);

  return 
Your app is being tracked by Facebook Pixel.
;
};

export default MyApp;

Garantindo a segurança ao carregar o Facebook Pixel

Embora o Pixel ID seja seguro para expor, é uma boa prática:

1. Armazene o Pixel ID em variáveis ​​de ambiente (conforme mostrado acima).
2. Carregue o script Pixel dinamicamente do back-end, se desejar, o que evita a exposição direta do Pixel ID no código front-end.
3. Considere a API de conversões do Facebook para rastreamento de eventos no servidor se estiver procurando um método ainda mais seguro.

Estrutura de código

Aqui está a estrutura geral da base de código:

• src/
  • main.jsx: Ponto de entrada para o aplicativo React.
  • App.jsx: Componente principal da aplicação.
  • ganchos/
  • facebookPixelHook.js: Gancho personalizado para carregar o Facebook Pixel.
  • utils/
  • facebookEvents.js: (Opcional) Você pode adicionar funções utilitárias para eventos personalizados.
  • config.js: (Opcional) Armazene a configuração do Pixel ID.
• index.html: Ponto de entrada para o HTML.
• vite.config.js: configuração do Vite.
• .env: variáveis ​​de ambiente (como VITE_FB_PIXEL_ID).

Como usar

Veja como usar o projeto:

1. Clone o repositório:

   git clone https://github.com/webdev-mohdamir/facebook-pixel-with-react.git

1. Instale as dependências:

   npm install

1. Inicie o servidor de desenvolvimento:

   npm run dev

1. Abra o aplicativo no seu navegador em http://localhost:3000.

2. Envie o formulário para rastrear eventos personalizados (se você adicionou eventos personalizados).

Considerações Finais

É isso! Agora você tem uma implementação do Facebook Pixel totalmente funcional em seu aplicativo React. Não se esqueça de verificar seu domínio e usar o Meta Pixel Helper para depurar seus eventos de Pixel.

Além disso, lembre-se: O café é a chave para o sucesso da depuração ☕!