Meta Conversions API (CAPI) vs. Browser Pixel

[ User Action: Checkout / Lead Submission ]
                    │
        ┌───────────┴───────────────────────┐
        │                                   │
        ▼ (Browser Stream)                  ▼ (Server Stream)
[ Meta Browser Pixel (JS) ]         [ Next.js 15 Server Route / CAPI ]
  • Client IP & User Agent            • SHA-256 Hashed Phone (+91...)
  • Unique event_id: "evt_10928"      • SHA-256 Hashed Email
        │                             • Same event_id: "evt_10928"
        │                                   │
        └───────────┬───────────────────────┘
                    │
                    ▼
       [ Meta Ads Graph API Engine ]
  • Matches event_id to prevent double-counting
  • Fills browser signal gaps with server data
  • Achieves 8.8+ Event Quality Match Score

// app/actions/meta-capi.ts
'use server';

import crypto from 'crypto';

interface ConversionPayload {
  eventName: 'Purchase' | 'Lead' | 'AddToCart';
  eventId: string;
  userEmail?: string;
  userPhone?: string; // Format: +919876543210
  value?: number;
  currency?: string;
  sourceUrl: string;
}

function sha256(data: string): string {
  return crypto.createHash('sha256').update(data.trim().toLowerCase()).digest('hex');
}

export async function sendMetaConversionEvent(payload: ConversionPayload) {
  const pixelId = process.env.META_PIXEL_ID;
  const accessToken = process.env.META_CAPI_ACCESS_TOKEN;

  if (!pixelId || !accessToken) return;

  const eventData = {
    event_name: payload.eventName,
    event_time: Math.floor(Date.now() / 1000),
    event_id: payload.eventId, // Critical for deduplication against browser pixel
    event_source_url: payload.sourceUrl,
    action_source: 'website',
    user_data: {
      em: payload.userEmail ? [sha256(payload.userEmail)] : undefined,
      ph: payload.userPhone ? [sha256(payload.userPhone.replace(/\D/g, ''))] : undefined,
    },
    custom_data: {
      currency: payload.currency || 'INR',
      value: payload.value || 0,
    },
  };

  try {
    const res = await fetch(`https://graph.facebook.com/v21.0/${pixelId}/events?access_token=${accessToken}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ data: [eventData] }),
    });
    const result = await res.json();
    return result;
  } catch (err) {
    console.error('Meta CAPI Dispatch Error:', err);
  }
}