جدول المحتويات

1. ْعَنِّي
2. إنشاء بيكسل فيسبوك
3. التحقق من النطاق لـ Facebook Pixel
4. تطبيق Facebook Pixel في تطبيق Vite React
5. ضمان الأمان أثناء تحميل Facebook Pixel
6. هيكل الكود
7. كيفية الاستخدام

ْعَنِّي

مرحبًا، أنا محمد أمير، مطور متكامل يتمتع بخبرة في التطبيقات القابلة للتطوير والصيانة. أنا أستمتع بالغوص في التكنولوجيا المتطورة. يمكنك الاطلاع على أعمالي على GitHub أو متابعتي على Twitter.

إنشاء فيسبوك بيكسل

للبدء باستخدام Facebook Pixel:

1. قم بتسجيل الدخول إلى مدير أحداث الفيسبوك الخاص بك.
2. انتقل إلى علامة التبويب وحدات البكسل ضمن مصادر البيانات.
3. انقر على إنشاء بكسل وقم بتسميته.
4. سيتم تزويدك بمعرف Pixel والرمز الأساسي لتطبيقه على موقع الويب الخاص بك.

التحقق من المجال لفيسبوك بكسل

للتحقق من المجال الخاص بك على الفيسبوك:

1. انتقل إلى إعدادات فيسبوك للأعمال > أمان العلامة التجارية > النطاقات.
2. أضف نطاقك، وسيمنحك فيسبوك إحدى الطرق الثلاث:
   • العلامة الوصفية: أضف العلامة الوصفية إلى بموقعك على الويب.
   • تحميل ملف HTML: قم بتحميل ملف التحقق بتنسيق HTML إلى الدليل الجذر الخاص بك.
   • سجل DNS TXT: أضف سجل DNS إلى تكوين DNS الخاص بنطاقك.
3. تحقق بمجرد تنفيذ الطريقة المناسبة.

تنفيذ Facebook Pixel في تطبيق Vite React

الآن، دعنا ندمج Facebook Pixel في تطبيق Vite React الخاص بك:

1. إعداد متغير البيئة

قم بإنشاء ملف .env في جذر مشروع Vite الخاص بك وأضف Facebook Pixel ID:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. إنشاء خطاف مخصص لتحميل Facebook Pixel

قم بإنشاء 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 الخاص بك

استخدم هذا الرابط في المكون الخاص بك لتهيئة الأحداث وتتبعها:

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

على الرغم من أن Pixel ID من الآمن كشفه، إلا أنه من الممارسات الجيدة القيام بما يلي:

1. تخزين معرف البكسل في متغيرات البيئة (كما هو موضح أعلاه).
2. قم بتحميل برنامج Pixel النصي ديناميكيًا من الواجهة الخلفية إذا رغبت في ذلك، مما يتجنب التعرض المباشر لمعرف Pixel في كود الواجهة الأمامية.
3. فكر في Facebook Conversions API لتتبع الأحداث من جانب الخادم إذا كنت تبحث عن طريقة أكثر أمانًا.

هيكل الكود

هذا هو الهيكل العام لقاعدة التعليمات البرمجية:

• سرك/
  • 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. أرسل النموذج لتتبع الأحداث المخصصة (إذا قمت بإضافة أحداث مخصصة).

الأفكار النهائية

هذا كل شيء! الآن لديك تطبيق Facebook Pixel يعمل بكامل طاقته في تطبيق React الخاص بك. لا تنس التحقق من نطاقك واستخدام Meta Pixel Helper لتصحيح أخطاء أحداث Pixel الخاصة بك.

تذكر أيضًا: القهوة هي مفتاح تصحيح الأخطاء ☕!