Meta Conversions API explained

// Display only. This lab does not run the request.
// Hash on your server. Keep META_CAPI_ACCESS_TOKEN off the page.
import { createHash, randomUUID } from "node:crypto"

const sha256 = (value) => createHash("sha256").update(value).digest("hex")
const email = "ada@example.com".trim().toLowerCase()
const phone = "16505551212"
const eventId = randomUUID()

const body = {
  data: [
    {
      event_name: "Purchase",
      event_time: Math.floor(Date.now() / 1000),
      event_id: eventId,
      action_source: "website",
      event_source_url: "https://www.example.com/checkout",
      user_data: {
        em: [sha256(email)],
        ph: [sha256(phone)],
        client_ip_address: "203.0.113.10",
        client_user_agent: "Mozilla/5.0 (compatible; Example/1.0)",
        fbp: "fb.1.1710000000000.1234567890",
        fbc: "fb.1.1710000000000.IwAR_sample_click_id",
      },
      custom_data: { value: 42.5, currency: "USD" },
    },
  ],
  test_event_code: "TEST12345",
}

const pixelId = process.env.PIXEL_ID
const token = process.env.META_CAPI_ACCESS_TOKEN
const url = `https://graph.facebook.com/v21.0/${pixelId}/events?access_token=${token}`
// Replace v21.0 with the version in the current Conversions API docs.
// await fetch(url, {
//   method: "POST",
//   headers: { "content-type": "application/json" },
//   body: JSON.stringify(body),
// })
console.log(url)
console.log(JSON.stringify(body, null, 2))

# Display only. This lab does not run the request.
# Hash before the call. Keep the token in the environment.
import hashlib, json, os, time, uuid

def sha256(value: str) -> str:
    return hashlib.sha256(value.encode("utf-8")).hexdigest()

event_id = str(uuid.uuid4())
body = {
    "data": [
        {
            "event_name": "Purchase",
            "event_time": int(time.time()),
            "event_id": event_id,
            "action_source": "website",
            "event_source_url": "https://www.example.com/checkout",
            "user_data": {
                "em": [sha256("ada@example.com".strip().lower())],
                "ph": [sha256("16505551212")],
                "client_ip_address": "203.0.113.10",
                "client_user_agent": "Mozilla/5.0 (compatible; Example/1.0)",
                "fbp": "fb.1.1710000000000.1234567890",
                "fbc": "fb.1.1710000000000.IwAR_sample_click_id",
            },
            "custom_data": {"value": 42.5, "currency": "USD"},
        }
    ],
    "test_event_code": "TEST12345",
}

pixel_id = os.environ["PIXEL_ID"]
token = os.environ["META_CAPI_ACCESS_TOKEN"]
url = f"https://graph.facebook.com/v21.0/{pixel_id}/events?access_token={token}"
# Replace v21.0 with the version in the current Conversions API docs.
# urllib.request.urlopen(urllib.request.Request(
#     url, data=json.dumps(body).encode(), headers={"content-type": "application/json"}, method="POST"
# ))
print(url)
print(json.dumps(body, indent=2))

// Display only. Do not add this file on this site.
// app/api/capi/route.ts on a server you control.
import { createHash, randomUUID } from "node:crypto"
import { NextResponse } from "next/server"

const sha256 = (value: string) => createHash("sha256").update(value).digest("hex")

export async function POST(request: Request) {
  const input = (await request.json()) as {
    event_name?: string
    event_id?: string
    email?: string
    phone?: string
    value?: number
    currency?: string
    event_source_url?: string
    client_ip_address?: string
    client_user_agent?: string
    fbp?: string
    fbc?: string
  }
  const email = input.email?.trim().toLowerCase()
  const phone = input.phone?.replace(/\D/g, "").replace(/^0+/, "")
  const eventId = input.event_id || randomUUID()
  const userData: Record<string, string | string[]> = {}
  if (email) userData.em = [sha256(email)]
  if (phone) userData.ph = [sha256(phone)]
  if (input.client_ip_address) userData.client_ip_address = input.client_ip_address
  if (input.client_user_agent) userData.client_user_agent = input.client_user_agent
  if (input.fbp) userData.fbp = input.fbp
  if (input.fbc) userData.fbc = input.fbc

  const body = {
    data: [
      {
        event_name: input.event_name || "Purchase",
        event_time: Math.floor(Date.now() / 1000),
        event_id: eventId,
        action_source: "website",
        event_source_url: input.event_source_url,
        user_data: userData,
        custom_data:
          input.value != null ? { value: input.value, currency: input.currency || "USD" } : undefined,
      },
    ],
  }

  const pixelId = process.env.PIXEL_ID
  const token = process.env.META_CAPI_ACCESS_TOKEN
  if (!pixelId || !token) return NextResponse.json({ sent: false, event_id: eventId, body })

  const version = "v21.0" // replace with the version in the current docs
  const response = await fetch(
    `https://graph.facebook.com/${version}/${pixelId}/events?access_token=${token}`,
    { method: "POST", headers: { "content-type": "application/json" }, body: JSON.stringify(body) },
  )
  return NextResponse.json({ sent: response.ok, event_id: eventId })
}

// Display only. Send the same event_id to the Pixel and to your server.
// Your server hashes email and phone. The browser never sees the access token.
// This page does not call fbq and does not POST this body.
const eventId = crypto.randomUUID()

fbq("track", "Purchase", { value: 42.5, currency: "USD" }, { eventID: eventId })

await fetch("/api/capi", {
  method: "POST",
  headers: { "content-type": "application/json" },
  body: JSON.stringify({
    event_name: "Purchase",
    event_id: eventId,
    event_source_url: location.href,
    email: "ada@example.com",
    phone: "+1 650 555 1212",
    value: 42.5,
    currency: "USD",
    fbp: document.cookie.match(/(?:^|; )_fbp=([^;]+)/)?.[1],
    fbc: document.cookie.match(/(?:^|; )_fbc=([^;]+)/)?.[1],
  }),
})