विषयसूची

1. मेरे बारे में
2. फेसबुक पिक्सेल बनाना
3. फेसबुक पिक्सेल के लिए डोमेन सत्यापन
4. विटे रिएक्ट ऐप में फेसबुक पिक्सेल लागू करना
5. फेसबुक पिक्सेल लोड करते समय सुरक्षा सुनिश्चित करना
6. कोड संरचना
7. का उपयोग कैसे करें

मेरे बारे में

नमस्कार, मैं मोहम्मद आमिर हूं, स्केलेबल और रखरखाव योग्य ऐप्स में विशेषज्ञता वाला एक पूर्ण-स्टैक डेवलपर। मुझे अत्याधुनिक तकनीक में गोता लगाने में आनंद आता है। आप GitHub पर मेरा काम देख सकते हैं या ट्विटर पर मुझे फ़ॉलो कर सकते हैं।

फेसबुक पिक्सेल बनाना

फेसबुक पिक्सेल के साथ आरंभ करने के लिए:

1. अपने फेसबुक इवेंट मैनेजर में लॉग इन करें।
2. डेटा स्रोत के अंतर्गत पिक्सेल टैब पर जाएं।
3. एक पिक्सेल बनाएं पर क्लिक करें और इसे एक नाम दें।
4. आपको अपनी वेबसाइट पर लागू करने के लिए एक पिक्सेल आईडी और एक आधार कोड प्रदान किया जाएगा।

फेसबुक पिक्सेल के लिए डोमेन सत्यापन

फेसबुक पर अपना डोमेन सत्यापित करने के लिए:

1. फेसबुक बिजनेस सेटिंग्स > ब्रांड सुरक्षा > डोमेन पर जाएं।
2. अपना डोमेन जोड़ें, और फेसबुक आपको तीन तरीकों में से एक देगा:
   • मेटा-टैग: अपनी वेबसाइट के में मेटा टैग जोड़ें।
   • HTML फ़ाइल अपलोड: अपनी रूट निर्देशिका में एक HTML सत्यापन फ़ाइल अपलोड करें।
   • DNS TXT रिकॉर्ड: अपने डोमेन के DNS कॉन्फ़िगरेशन में एक DNS रिकॉर्ड जोड़ें।
3. उचित विधि लागू होने के बाद सत्यापित करें।

Vite React ऐप में Facebook पिक्सेल लागू करना

अब, आइए Facebook Pixel को अपने Vite React ऐप में एकीकृत करें:

1. पर्यावरण चर सेट करें

अपने Vite प्रोजेक्ट के रूट में एक .env फ़ाइल बनाएं और अपनी फेसबुक पिक्सेल आईडी जोड़ें:

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. फेसबुक पिक्सेल लोड करने के लिए एक कस्टम हुक बनाएं

हुक/निर्देशिका के अंदर एक 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. अपने प्रतिक्रिया घटक में हुक का उपयोग करें

घटनाओं को आरंभ करने और ट्रैक करने के लिए अपने घटक में इस हुक का उपयोग करें:

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;

फेसबुक पिक्सेल लोड करते समय सुरक्षा सुनिश्चित करना

हालांकि पिक्सेल आईडी को उजागर करना सुरक्षित है, यह अच्छा अभ्यास है:

1. पिक्सेल आईडी को पर्यावरण चर में संग्रहीत करें (जैसा कि ऊपर दिखाया गया है)।
2. अगर चाहें तो बैकएंड से पिक्सेल स्क्रिप्ट को गतिशील रूप से लोड करें, जो फ्रंट-एंड कोड में पिक्सेल आईडी के सीधे एक्सपोज़र से बचाता है।
3. यदि आप और भी अधिक सुरक्षित विधि की तलाश में हैं तो सर्वर-साइड इवेंट ट्रैकिंग के लिए फेसबुक रूपांतरण एपीआई पर विचार करें।

कोड संरचना

यहां कोडबेस की सामान्य संरचना है:

• src/
  • main.jsx: रिएक्ट एप्लिकेशन के लिए प्रवेश बिंदु।
  • App.jsx: एप्लिकेशन का मुख्य घटक।
  • हुक/
  • facebookPixelHook.js: फेसबुक पिक्सेल लोड करने के लिए कस्टम हुक।
  • utils/
  • facebookEvents.js: (वैकल्पिक) आप कस्टम इवेंट के लिए उपयोगिता फ़ंक्शन जोड़ सकते हैं।
  • config.js: (वैकल्पिक) पिक्सेल आईडी कॉन्फ़िगरेशन संग्रहीत करें।
• index.html: HTML के लिए प्रवेश बिंदु।
• vite.config.js: वाइट कॉन्फ़िगरेशन।
• .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. कस्टम इवेंट को ट्रैक करने के लिए फ़ॉर्म सबमिट करें (यदि आपने कस्टम इवेंट जोड़ा है)।

अंतिम विचार

इतना ही! अब आपके रिएक्ट ऐप में पूरी तरह से काम करने वाला फेसबुक पिक्सेल कार्यान्वयन है। अपने डोमेन को सत्यापित करना और अपने पिक्सेल ईवेंट को डीबग करने के लिए मेटा पिक्सेल हेल्पर का उपयोग करना न भूलें।

यह भी याद रखें: कॉफी डिबगिंग की सफलता की कुंजी है ☕!