목차

1. 내 소개
2. Facebook 픽셀 만들기
3. Facebook Pixel 도메인 확인
4. Vite React 앱에서 Facebook 픽셀 구현
5. Facebook 픽셀을 로드하는 동안 보안 보장
6. 코드 구조
7. 사용방법

나에 대해

안녕하세요. 저는 확장 가능하고 유지 관리 가능한 앱에 대한 전문 지식을 갖춘 풀 스택 개발자 Mohd Amir입니다. 나는 최첨단 기술에 빠져드는 것을 좋아합니다. GitHub에서 내 작업을 확인하거나 Twitter에서 나를 팔로우할 수 있습니다.

페이스북 픽셀 만들기

Facebook Pixel을 시작하려면:

1. Facebook 이벤트 관리자에 로그인하세요.
2. 데이터 소스 아래의 픽셀 탭으로 이동합니다.
3. 픽셀 만들기를 클릭하고 이름을 지정하세요.
4. 웹사이트에 구현할 수 있는 Pixel ID와 기본 코드가 제공됩니다.

Facebook 픽셀에 대한 도메인 확인

Facebook에서 도메인을 확인하려면:

1. Facebook 비즈니스 설정 > 브랜드 안전성 > 도메인.
로 이동합니다.
2. 도메인을 추가하면 Facebook에서 다음 세 가지 방법 중 하나를 제공합니다.
   • 메타태그: 웹사이트의 에 메타태그를 추가합니다.
   • HTML 파일 업로드: 루트 디렉터리에 HTML 확인 파일을 업로드합니다.
   • DNS TXT 레코드: 도메인의 DNS 구성에 DNS 레코드를 추가합니다.
3. 적절한 방법이 구현되었는지 확인하세요.

Vite React 앱에서 Facebook 픽셀 구현

이제 Facebook Pixel을 Vite React 앱에 통합해 보겠습니다.

1. 환경변수 설정

Vite 프로젝트 루트에 .env 파일을 만들고 Facebook 픽셀 ID:
를 추가하세요.

VITE_FB_PIXEL_ID=your_facebook_pixel_id

2. Facebook 픽셀을 로드하기 위한 사용자 정의 후크 생성

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 구성요소에 후크 사용

구성요소에서 이 후크를 사용하여 이벤트를 초기화하고 추적합니다.

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 픽셀을 로드하는 동안 보안 보장

픽셀 ID는 노출해도 안전하지만 다음을 수행하는 것이 좋습니다.

1. 환경 변수에 픽셀 ID를 저장합니다(위 그림 참조).
2. 원하는 경우 백엔드에서 픽셀 스크립트를 동적으로 로드하면 프런트엔드 코드에서 픽셀 ID가 직접 노출되는 것을 방지할 수 있습니다.
3. 더욱 안전한 방법을 찾고 있다면 서버측 이벤트 추적을 위한 Facebook 전환 API를 고려해 보세요.

코드 구조

코드베이스의 일반적인 구조는 다음과 같습니다.

• 소스/
  • main.jsx: React 애플리케이션의 진입점.
  • App.jsx: 애플리케이션의 주요 구성 요소입니다.
  • 후크/
  • facebookPixelHook.js: Facebook 픽셀을 로드하기 위한 사용자 정의 후크
  • 유틸리티/
  • 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를 사용하는 것을 잊지 마세요.

또한 다음을 기억하세요. 커피는 디버깅 성공의 열쇠입니다 찻잔!