Оглавление

1. Обо мне
2. Создание пикселя Facebook
3. Подтверждение домена для пикселя Facebook
4. Реализация Facebook Pixel в приложении Vite React
5. Обеспечение безопасности при загрузке пикселя Facebook
6. Структура кода
7. Как использовать

Обо мне

Привет, я Мохд Амир, разработчик полного цикла с опытом работы в области масштабируемых и удобных в обслуживании приложений. Мне нравится погружаться в передовые технологии. Вы можете посмотреть мои работы на GitHub или подписаться на меня в Твиттере.

Создание пикселя Facebook

Чтобы начать работу с Facebook Pixel:

1. Войдите в свой менеджер мероприятий Facebook.
2. Перейдите на вкладку Пиксели в разделе Источники данных.
3. Нажмите Создать пиксель и дайте ему имя.
4. Вам будет предоставлен идентификатор пикселя и базовый код для внедрения на вашем веб-сайте.

Проверка домена для Facebook Pixel

Чтобы подтвердить свой домен на Facebook:

1. Перейдите в Бизнес-настройки Facebook > Безопасность бренда > Домены.
2. Добавьте свой домен, и Facebook предложит вам один из трех способов:
   • Метатег: добавьте метатег в вашего сайта.
   • Загрузка файла HTML: загрузите файл проверки HTML в корневой каталог.
   • Запись DNS TXT: добавьте запись DNS в конфигурацию DNS вашего домена.
3. Проверьте реализацию соответствующего метода.

Реализация пикселя Facebook в приложении Vite React

Теперь давайте интегрируем Facebook Pixel в ваше приложение Vite React:

1. Настройка переменной среды

Создайте файл .env в корне вашего проекта Vite и добавьте свой идентификатор пикселя Facebook:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. Создайте собственный хук для загрузки пикселя Facebook

Создайте facebookPixelHook.js внутри каталогаooks/:

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

Используйте этот хук в своем компоненте для инициализации и отслеживания событий:

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

Хотя Идентификатор пикселя можно безопасно раскрывать, рекомендуется:

1. Сохраните идентификатор пикселя в переменных среды (как показано выше).
2. При желании загрузите скрипт Pixel динамически из серверной части, что позволяет избежать прямого раскрытия идентификатора пикселя во внешнем коде.
3. Рассмотрите возможность использования Facebook Conversions API для отслеживания событий на стороне сервера, если вы ищете еще более безопасный метод.

Структура кода

Вот общая структура кодовой базы:

• источник/
  • main.jsx: точка входа для приложения React.
  • App.jsx: основной компонент приложения.
  • крючки/
  • facebookPixelHook.js: специальный крючок для загрузки Facebook Pixel.
  • утилиты/
  • 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. Отправьте форму для отслеживания специальных событий (если вы добавили специальные события).

Заключительные мысли

Вот и все! Теперь у вас есть полностью функционирующая реализация Facebook Pixel в вашем приложении React. Не забудьте подтвердить свой домен и использовать Meta Pixel Helper для отладки событий Pixel.

Также помните: Кофе — ключ к успеху в отладке ☕!