Tabla de contenido

1. Acerca de mí
2. Creando píxel de Facebook
3. Verificación de dominio para píxeles de Facebook
4. Implementación de Facebook Pixel en la aplicación Vite React
5. Garantizar la seguridad mientras se carga el píxel de Facebook
6. Estructura del código
7. Cómo utilizar

Acerca de mí

Hola, soy Mohd Amir, un desarrollador completo con experiencia en aplicaciones escalables y mantenibles. Disfruto sumergirme en la tecnología de vanguardia. Puedes ver mi trabajo en GitHub o seguirme en Twitter.

Creando píxel de Facebook

Para comenzar con Facebook Pixel:

1. Inicia sesión en tu Administrador de eventos de Facebook.
2. Vaya a la pestaña Píxeles en Fuentes de datos.
3. Haz clic en Crear un píxel y asígnale un nombre.
4. Se te proporcionará un ID de píxel y un código base para implementar en tu sitio web.

Verificación de dominio para Facebook Pixel

Para verificar tu dominio en Facebook:

1. Vaya a Configuración empresarial de Facebook > Seguridad de la marca > Dominios.
2. Agrega tu dominio y Facebook te dará uno de tres métodos:
   • Metaetiqueta: agrega la metaetiqueta al de tu sitio web.
   • Carga de archivos HTML: cargue un archivo de verificación HTML en su directorio raíz.
   • Registro DNS TXT: agregue un registro DNS a la configuración DNS de su dominio.
3. Verificar una vez implementado el método apropiado.

Implementación de Facebook Pixel en la aplicación Vite React

Ahora, integremos Facebook Pixel en tu aplicación Vite React:

1. Configurar variable de entorno

Crea un archivo .env en la raíz de tu proyecto Vite y agrega tu ID de Facebook Pixel:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. Crea un gancho personalizado para cargar el píxel de Facebook

Crea un facebookPixelHook.js dentro del directorio 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. Utilice el gancho en su componente React

Utilice este enlace en su componente para inicializar y realizar un seguimiento de 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;

Garantizar la seguridad al cargar el píxel de Facebook

Aunque es seguro exponer el ID de píxel, es una buena práctica:

1. Almacenar ID de píxel en variables de entorno (como se muestra arriba).
2. Cargue el script de Pixel dinámicamente desde el backend si lo desea, lo que evita la exposición directa del ID de Pixel en el código de front-end.
3. Considera API de conversiones de Facebook para el seguimiento de eventos del lado del servidor si buscas un método aún más seguro.

Estructura del código

Aquí está la estructura general del código base:

• fuente/
  • main.jsx: Punto de entrada para la aplicación React.
  • App.jsx: Componente principal de la aplicación.
  • manos/
  • facebookPixelHook.js: Gancho personalizado para cargar Facebook Pixel.
  • utilidades/
  • facebookEvents.js: (Opcional) Puede agregar funciones de utilidad para eventos personalizados.
  • config.js: (Opcional) Almacena la configuración de ID de píxel.
• index.html: Punto de entrada para el HTML.
• vite.config.js: Configuración de Vite.
• .env: Variables de entorno (como VITE_FB_PIXEL_ID).

Cómo utilizar

A continuación se explica cómo utilizar el proyecto:

1. Clonar el repositorio:

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

1. Instalar las dependencias:

   npm install

1. Iniciar el servidor de desarrollo:

   npm run dev

1. Abre la aplicación en tu navegador en http://localhost:3000.

2. Envíe el formulario para realizar un seguimiento de eventos personalizados (si agregó eventos personalizados).

Pensamientos finales

¡Eso es todo! Ahora tienes una implementación de Facebook Pixel completamente funcional en tu aplicación React. No olvides verificar tu dominio y usar Meta Pixel Helper para depurar tus eventos de Pixel.

Además, recuerda: ¡El café es la clave para una depuración exitosa ☕!