目次

1. 私について
2. Facebook ピクセルの作成
3. Facebook Pixel のドメイン検証
4. Vite React アプリでの Facebook Pixel の実装
5. Facebook ピクセルのロード中のセキュリティの確保
6. コード構造
7. 使い方

私について

こんにちは、私は Mohd Amir です。スケーラブルで保守可能なアプリの専門知識を持つフルスタック開発者です。最先端のテクノロジーに飛び込むのが好きです。 GitHub で私の作品をチェックするか、Twitter でフォローしてください。

Facebook ピクセルの作成

Facebook Pixel を始めるには:

1. Facebook イベントマネージャーにログイン。
2. データ ソースのピクセルタブに移動します。
3. ピクセルの作成をクリックし、名前を付けます。
4. ウェブサイトに実装するための Pixel ID と基本コードが提供されます。

Facebook Pixel のドメイン検証

Facebook でドメインを確認するには:

1. Facebook ビジネス設定 > ブランド保護 > ドメインに移動します。
2. ドメインを追加すると、Facebook は次の 3 つの方法のいずれかを提供します。
   • メタタグ: ウェブサイトの にメタ タグを追加します。
   • HTML ファイルのアップロード: HTML 検証ファイルをルート ディレクトリにアップロードします。
   • DNS TXT レコード: DNS レコードをドメインの DNS 設定に追加します。
3. 適切なメソッドが実装されたら確認してください。

Vite React アプリでの Facebook Pixel の実装

さて、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. 必要に応じて、バックエンドから Pixel スクリプトを動的に読み込みます。これにより、フロントエンド コードで Pixel ID が直接公開されることが回避されます。
3. さらに安全な方法をお探しの場合は、サーバー側イベント追跡用の Facebook Conversions API を検討してください。

コード構造

コードベースの一般的な構造は次のとおりです:

• ソース/
  • main.jsx: React アプリケーションのエントリ ポイント。
  • App.jsx: アプリケーションのメインコンポーネント。
  • フック/
  • facebookPixelHook.js: Facebook Pixel をロードするためのカスタム フック。
  • utils/
  • facebookEvents.js: (オプション) カスタム イベント用のユーティリティ関数を追加できます。
  • config.js: (オプション) ピクセル 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. カスタム イベントを追跡するにはフォームを送信してください (カスタム イベントを追加した場合)。

コーヒーはデバッグ成功の鍵です ☕!