目录

1. 关于我
2. 创建 Facebook Pixel
3. Facebook Pixel 的域名验证
4. 在 Vite React App 中实现 Facebook Pixel
5. 加载 Facebook Pixel 时确保安全
6. 代码结构
7. 如何使用

关于我

嗨，我是 Mohd Amir，一位在可扩展和可维护应用程序方面拥有专业知识的全栈开发人员。我喜欢深入研究尖端技术。您可以在 GitHub 上查看我的工作或在 Twitter 上关注我。

创建 Facebook 像素

开始使用 Facebook Pixel：

1. 登录您的 Facebook 活动管理器。
2. 转到数据源下的像素选项卡。
3. 单击创建像素并为其命名。
4. 您将获得一个 Pixel ID 和一个可在您的网站上实施的基本代码。

Facebook Pixel 的域名验证

要在 Facebook 上验证您的域名：

1. 前往 Facebook 商务设置 > 品牌安全 > 域名。
2. 添加您的域名，Facebook 将为您提供以下三种方法之一：
   • 元标记：将元标记添加到您网站的。
   • HTML文件上传：上传HTML验证文件到您的根目录。
   • DNS TXT 记录：将 DNS 记录添加到您域的 DNS 配置中。
3. 实施适当的方法后进行验证。

在 Vite React App 中实现 Facebook Pixel

现在，让我们将 Facebook Pixel 集成到您的 Vite React 应用中：

1. 设置环境变量

在 Vite 项目的根目录中创建一个 .env 文件并添加您的 Facebook Pixel ID:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. 创建自定义 Hook 来加载 Facebook Pixel

在hooks/目录下创建一个facebookPixelHook.js：

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. 在 React 组件中使用 Hook

在组件中使用此钩子来初始化和跟踪事件：

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;

加载 Facebook Pixel 时确保安全

尽管像素 ID 可以安全公开，但最好的做法是：

1. 将像素ID存储在环境变量中（如上所示）。
2. 如果需要，可以从后端动态加载 Pixel 脚本，这样可以避免在前端代码中直接暴露 Pixel ID。
3. 如果您正在寻找更安全的方法，请考虑使用 Facebook Conversions API 进行服务器端事件跟踪。

代码结构

这是代码库的一般结构：

• src/
  • main.jsx：React 应用程序的入口点。
  • App.jsx：应用程序的主要组件。
  • 挂钩/
  • facebookPixelHook.js：加载 Facebook Pixel 的自定义钩子。
  • utils/
  • facebookEvents.js：（可选）您可以为自定义事件添加实用函数。
  • config.js：（可选）存储 Pixel ID 配置。
• index.html：HTML 的入口点。
• vite.config.js：Vite配置。
• .env：环境变量（如VITE_FB_PIXEL_ID）。

如何使用

该项目的使用方法如下：

1. 克隆存储库：

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

1. 安装依赖项：

   npm install

1. 启动开发服务器：

   npm run dev

1. 在浏览器中打开应用程序 http://localhost:3000。

2. 提交表单以跟踪自定义事件（如果您添加了自定义事件）。

最后的想法

就是这样！现在，您的 React 应用程序中已经有了功能齐全的 Facebook Pixel 实现。不要忘记验证您的域名并使用 Meta Pixel Helper 来调试您的 Pixel 事件。

另外，记住：咖啡是调试成功的关键☕！