Table des matières

1. Sur moi
2. Création d'un pixel Facebook
3. Vérification de domaine pour Facebook Pixel
4. Implémentation de Facebook Pixel dans l'application Vite React
5. Assurer la sécurité lors du chargement du pixel Facebook
6. Structure du code
7. Comment utiliser

Sur moi

Bonjour, je m'appelle Mohd Amir, un développeur full-stack avec une expertise dans les applications évolutives et maintenables. J’aime plonger dans la technologie de pointe. Vous pouvez consulter mon travail sur GitHub ou me suivre sur Twitter.

Création de pixels Facebook

Pour démarrer avec Facebook Pixel :

1. Connectez-vous à votre gestionnaire d'événements Facebook.
2. Accédez à l'onglet Pixels sous Sources de données.
3. Cliquez sur Créer un pixel et donnez-lui un nom.
4. Vous recevrez un Pixel ID et un code de base à mettre en œuvre sur votre site Web.

Vérification de domaine pour Facebook Pixel

Pour vérifier votre domaine sur Facebook :

1. Accédez à Paramètres professionnels de Facebook > Sécurité de la marque > Domaines.
2. Ajoutez votre domaine et Facebook vous proposera l'une des trois méthodes suivantes :
   • balise méta : ajoutez la balise méta au de votre site Web.
   • Téléchargement de fichier HTML : téléchargez un fichier de vérification HTML dans votre répertoire racine.
   • Enregistrement DNS TXT : ajoutez un enregistrement DNS à la configuration DNS de votre domaine.
3. Vérifiez une fois la méthode appropriée mise en œuvre.

Implémentation de Facebook Pixel dans l'application Vite React

Maintenant, intégrons Facebook Pixel dans votre application Vite React :

1. Configurer la variable d'environnement

Créez un fichier .env à la racine de votre projet Vite et ajoutez votre Facebook Pixel ID :

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. Créez un hook personnalisé pour charger le pixel Facebook

Créez un facebookPixelHook.js dans le répertoire 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. Utilisez le hook dans votre composant React

Utilisez ce hook dans votre composant pour initialiser et suivre les événements :

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;

Assurer la sécurité lors du chargement du pixel Facebook

Bien que l'Pixel ID puisse être exposé en toute sécurité, il est recommandé de :

1. Stockez l'ID Pixel dans les variables d'environnement (comme indiqué ci-dessus).
2. Chargez le script Pixel de manière dynamique à partir du backend si vous le souhaitez, ce qui évite l'exposition directe du Pixel ID dans le code front-end.
3. Considérez API Facebook Conversions pour le suivi des événements côté serveur si vous recherchez une méthode encore plus sécurisée.

Structure du code

Voici la structure générale de la base de code :

• src/
  • main.jsx : Point d'entrée pour l'application React.
  • App.jsx : Composant principal de l'application.
  • crochets/
  • facebookPixelHook.js : hook personnalisé pour charger Facebook Pixel.
  • utils/
  • facebookEvents.js : (Facultatif) Vous pouvez ajouter des fonctions utilitaires pour les événements personnalisés.
  • config.js : (Facultatif) Stockez la configuration du Pixel ID.
• index.html : Point d'entrée pour le HTML.
• vite.config.js : configuration de Vite.
• .env : variables d'environnement (comme VITE_FB_PIXEL_ID).

Comment utiliser

Voici comment utiliser le projet :

1. Cloner le dépôt :

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

1. Installez les dépendances :

   npm install

1. Démarrez le serveur de développement :

   npm run dev

1. Ouvrez l'application dans votre navigateur à l'adresse http://localhost:3000.

2. Envoyez le formulaire pour suivre les événements personnalisés (si vous avez ajouté des événements personnalisés).

Pensées finales

C'est ça! Vous disposez désormais d’une implémentation Facebook Pixel entièrement fonctionnelle dans votre application React. N'oubliez pas de vérifier votre domaine et d'utiliser Meta Pixel Helper pour déboguer vos événements Pixel.

N'oubliez pas non plus : Le café est la clé du succès du débogage ☕ !