Meta CAPI Tracking Using Own Server (Coding Method)

src/
├── app/
│   └── api/
│       └── facebook-capi/
│           └── route.js
├── lib/
│   ├── facebookCapi.js
│   ├── hash.js
│   └── utils.js
├── utils/
│   └── getFbCookies.js
└── components/
    ├── Tracking/PageViewTracker.js
    └── contact/ContactForm.jsx

import { sendFacebookEvent } from "@/lib/facebookCapi";
import { getClientIp, getUserAgent, prepareUserData } from "@/lib/utils";

export async function POST(req) {
  let eventName = "pageview";
  try {
    const body = await req.json();

    const {
      eventName: receivedEventName,
      eventSourceUrl,
      eventId,
      eventTime,
      ...restOfBody
    } = body;

    if (!receivedEventName || !eventSourceUrl || !eventId || !eventTime) {
      return new Response(
        JSON.stringify({
          error: "Missing required event parameters.",
          received: body,
        }),
        { status: 400 },
      );
    }

    eventName = receivedEventName;

    const userAgent = getUserAgent(req);
    const clientIp = getClientIp(req);
    const userData = prepareUserData(restOfBody, clientIp, userAgent);

    const result = await sendFacebookEvent({
      eventName,
      eventId,
      eventTime,
      eventSourceUrl,
      userData,
    });

    return new Response(JSON.stringify(result), { status: 200 });
  } catch (err) {
    console.error(`Facebook CAPI API Error - ${eventName}`, err);

    let errorMessage = "An unknown error occurred.";
    if (err instanceof SyntaxError && err.message.includes("JSON")) {
      errorMessage = "Invalid JSON in request body.";
    } else if (err instanceof Error) {
      errorMessage = err.message;
    }

    return new Response(JSON.stringify({ error: errorMessage }), { status: 500 });
  }
}

import { hash } from "./hash";

export function getClientIp(req) {
  return (
    req.headers.get("x-forwarded-for") ||
    req.headers.get("x-real-ip") ||
    "0.0.0.0"
  );
}

export function getUserAgent(req) {
  return req.headers.get("user-agent");
}

export function prepareUserData(body, clientIp, userAgent) {
  const { city, state, zip, country, externalId, fbc, fbp, firstName, lastName, email, phone } = body;

  const userData = {
    client_ip_address: clientIp,
    client_user_agent: userAgent,
    fbc,
    fbp,
  };

  if (email) userData.em = [hash(email)];
  if (firstName) userData.fn = hash(firstName);
  if (lastName) userData.ln = hash(lastName);
  if (phone) userData.ph = [hash(phone)];
  if (city) userData.ct = hash(city);
  if (state) userData.st = hash(state);
  if (zip) userData.zp = hash(zip);
  if (country) userData.country = hash(country);
  if (externalId) userData.external_id = hash(externalId?.toString());

  return userData;
}

export const sendFacebookEvent = async ({
  eventName,
  eventTime,
  eventId,
  eventSourceUrl,
  userData = {},
}) => {
  const pixelId = process.env.FB_PIXEL_ID;
  const accessToken = process.env.FB_ACCESS_TOKEN;

  if (!pixelId || !accessToken) {
    throw new Error("Facebook Pixel ID or Access Token is missing from environment variables.");
  }

  const fbUrl = `{{https://graph.facebook.com/v18.0/${pixelId}}}/events?access_token=${accessToken}`;

  const payload = {
    data: [
      {
        event_name: eventName,
        event_time: eventTime,
        event_id: eventId,
        event_source_url: eventSourceUrl,
        action_source: "website",
        user_data: userData,
      },
    ],
  };

  try {
    const fbRes = await fetch(fbUrl, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    });

    const result = await fbRes.json();

    if (!fbRes.ok || result.error) {
      console.error(`${eventName} API returned an error:`, result);
      throw new Error(`Error: ${result.error?.message || "Unknown error"}`);
    }

    return result;
  } catch (error) {
    console.error(`Error - ${eventName}`, error);
    throw error;
  }
};

export const getFbCookies = () => {
  if (typeof document === "undefined") return { fbc: "", fbp: "" };

  const fbc =
    document.cookie
      .split("; ")
      .find((row) => row.startsWith("_fbc="))
      ?.split("=")[1] || "";

  const fbp =
    document.cookie
      .split("; ")
      .find((row) => row.startsWith("_fbp="))
      ?.split("=")[1] || "";

  return { fbc, fbp };
};

import crypto from "crypto";

export const hash = (val) => {
  if (!val) return undefined;
  return crypto
    .createHash("sha256")
    .update(val.trim().toLowerCase())
    .digest("hex");
};

"use client";

import { getEventId, getEventTime, getExternalId } from "@/lib/customID";
import { getGeoFromLocal } from "@/lib/getGeoFromLocal";
import { getFbCookies } from "@/utils/getFbCookies";
import { useEffect } from "react";

export default function PageViewTracker() {
  useEffect(() => {
    const { fbc, fbp } = getFbCookies();
    const geo = getGeoFromLocal();

    const payload = {
      eventName: "PageView",
      eventSourceUrl: window.location.href,
      eventId: getEventId("pageview"),
      eventTime: getEventTime(),
      externalId: getExternalId(),
      fbc,
      fbp,
      city: geo?.city || "",
      state: geo?.region || "",
      zip: geo?.postal || "",
      country: geo?.country || "",
    };

    fetch("/api/facebook-capi", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(payload),
    }).catch((error) => {
      console.error("Facebook CAPI PageView error:", error);
    });
  }, []);

  return null;
}

const contactPayload = {
  eventName: "Lead",
  eventSourceUrl: window.location.href,
  eventId: getEventId("lead"),
  eventTime: getEventTime(),
  externalId: getExternalId(),
  firstName,
  lastName,
  email,
  phone,
  city: geo?.city || "Unknown",
  state: geo?.region || "Unknown",
  zip: geo?.postal || "Unknown",
  country: geo?.country || "Unknown",
  fbc,
  fbp,
};

fetch("/api/facebook-capi", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(contactPayload),
});

FB_PIXEL_ID=your_pixel_id
FB_ACCESS_TOKEN=your_long_lived_token