Server-side Meta conversions for a lead page, built with Claude Code

Like you're talking to a developer. One change at a time.

It writes what it changed and what it checked in the pull request.

Vercel builds a preview deployment for every pull request and posts the link on it. Open it on your phone.

If it looks right, merge. Merging to your production branch (usually main) is a production deploy: it's live.

You'll see your pixels and datasets, each with its name and its ID. Click the one your ads use.

Copy just the number. That's your META_PIXEL_ID. It isn't a password (a normal pixel puts it right in the page's code), but it still goes in .env.local and Vercel, not in your code, so you can swap it in one place.

Don't have one yet? Events Manager → Connect data → Web → Connect, type a name, Create pixel. That makes the ID. Meta then offers to help you install the pixel code; you can stop there, because we never put the pixel code on the page.

Follow the pop-up. When Meta shows you the token, copy it straight into .env.local and Vercel (next section) as META_CAPI_TOKEN. Don't park it in a note, a text or an email.

Meta's developer docs then say: go to the Overview tab, click Manage integrations, and click Manage next to Conversions API. That sets up the app and the system user behind the token for you, no app review needed.

Read the overview, Continue, pick the events you'll send (for a lead page: Lead, Contact and the booked appointment), pick at least one customer info field, Continue, then Confirm setup. Choose to implement it yourself and click Open implementation guide. From then on it's Manage integrations → Complete setup on the Conversions API → Generate access token. Copy it the same way.

Meta hides that link from anyone without developer access to the business. Two ways around it:

• Get invited. Whoever has full control of your business portfolio runs the guided setup above and clicks Send instructions with your email. Meta emails you an invite to accept developer access, and then you finish under Manage integrations.
• Get added to the dataset. They go to Meta Business Suite Settings → your business portfolio → Data sources → Datasets → the dataset → Add people, pick you, set your access, Assign. You have to be in the business portfolio first.

If somebody else owns your business portfolio (an agency, a partner), sort this out before you start building, not halfway through.

In your site's folder, run the check below. If it prints a line that mentions .gitignore, you're good. If it prints nothing, the file isn't ignored yet: add the two lines to .gitignore before you put a single value in it.

Then run the second command. If it prints .env.local, that file was already committed at some point: treat every key that was ever in it as leaked and rotate them (below).

Open .env.local in a plain text editor (VS Code, or TextEdit switched to plain text), not inside the Claude chat. One line each, NAME=value, no spaces around the equals sign. Swap each placeholder for the real value and save.

For each one: type the Name, paste the Value, pick the environments (Production, Preview, Development), Save. Vercel now asks you to choose Config or Secret: the token and the Supabase secret key are Secret (write-only once saved, nobody can read them back), the pixel ID and the Supabase URL can be Config. META_TEST_EVENT_CODE goes on Preview only.

A change only applies to new deployments, so redeploy after you add or change anything.

Belt and braces: a deny rule in your project's Claude Code settings, so it can't open .env files even if it tries. The file holds no secrets, so it's fine to commit.

Pick your organization, give the project a name, set a database password (save it in your password manager; it's not one of the keys below and you won't need it for this page), and pick the region closest to your customers. Wait for it to finish setting up.

Copy the project URL (it looks like https://your-project.supabase.co) and the secret key. If the project has no secret key yet, create one on that API Keys screen. You don't need the publishable key for this page, because only your server talks to Supabase.

As SUPABASE_URL and SUPABASE_SECRET_KEY, the same way as the Meta keys. The secret key is a Vercel Secret.

Paste the prompt below. Claude writes the SQL; you look at it and run it yourself in the next step.

Paste the SQL Claude wrote and click Run. Then open the Table Editor and check the leads table is there. With row level security on and no rules added, nothing gets in through a publishable key; your server's secret key still can.

Last prompt in this section: the lead route saves the row, then sends Meta the Lead with the same event_id it just saved. Later, the CRM sends Schedule back with the ids that ride along with that lead, so Meta ties it all together.

You need META_PIXEL_ID and META_CAPI_TOKEN in .env.local and in Vercel. Haven't done that yet? Go back to Get your Meta keys, click by click and Hand the keys to Claude Code safely.

Paste the prompt below. It builds one small route on your own site that takes a tiny note from the browser and sends the event to Meta. The Lead itself comes from the lead route you set up in the Supabase section.

Ask Claude to show you where each key is read. Every one should be in server code, read by name from the environment, and none of them should start with NEXT_PUBLIC_.

If you picked a dataset, choose website events. Meta's developer docs call this a test ID, and you send it as test_event_code. Copy it.

Tick Preview only, save, and redeploy the preview. That way the test code can never reach your live site, and there's nothing to remember to delete before you merge.

Open the preview link, scroll, start the quiz, tap the call button. Don't submit your real form with your real details. To test a Lead, have Claude send one made-up test lead from the server (the prompt below), marked as a test.

Meta says server events show up in the Test events window once the request is sent. Click one to see what was in it: the event name, the event id, which customer fields came through. The test activity stays there for 24 hours or until you click Clear activity.

Meta warns that events sent with a test code aren't thrown away: they flow into Events Manager and get used for targeting and measurement. So one or two test Leads, not twenty. Then delete the test rows from your leads table.

It's a sales channel, not an app, so afterward it lives under Sales channels in the left menu, not under Settings → Apps.

Sign in to Facebook, connect the business assets it asks for (your business portfolio, your Page, your ad account, your pixel), accept the terms, Finish setup.

Turn on customer data sharing, then under choose level pick Enhanced or Maximum. Shopify's help says both of those use the Conversions API on top of the pixel, server to server, where browser ad blockers can't block it. Standard is the pixel only, so it's the one you don't want. Meta's own help says the same: Enhanced or Maximum.

Both of those share your customers' name, location, email and phone with Meta for matching, so Shopify says to keep your privacy policy up to date.

If no pixel is connected yet, click Connect next to the one your ads use (or Create new), then Confirm. Meta's help also says to set data access to Always on (or Optimized) in your Shopify settings, and recommends Always on.

If somebody pasted Meta's pixel code into your theme years ago, delete it (it sits between <head> and </head>) and Save. If there's one in Preferences, click Change, delete it, Save. Otherwise you've got two pixels and doubled numbers.

Look at the connection method on Purchase: it should show the Conversions API (server), not only the browser. Give it a day of real orders, then do Check match quality and duplicates, same screens.

Your events are listed with how many came in. The connection method tells you how each one got there; with my setup it's the Conversions API, since there's no pixel at all. Meta says to allow up to 20 minutes after an event is sent.

You get tabs: Event Overview, Event Coverage, Event Matching (Meta's pages also call it Event Quality), Event Deduplication and Data Freshness.

It's a 0 to 10 score for how well your events match real Meta accounts, and it only exists for website events sent with action_source website. Meta's developer docs say to aim for 6.0 or higher. Clicking the score shows Meta's own suggestions.

What moves it: Meta rates email and the click id (that's fbc) as high priority, and phone, external id and the browser id (fbp) as medium. So send the hashed email and phone you already have on every Lead, plus the fbc from the ad click. Sending a field doesn't guarantee a match, though; plenty of people just don't have a Meta account.

Meta merges two events into one when the event id and the event name match and they arrive within 48 hours of each other. That matters when you run a pixel and the server together: the tab shows what share of events carry a dedupe key and how much overlaps between browser and server, and higher is better. I went server only, so there's nothing to merge; my job is never sending the same Lead twice, which is why the event id comes from the phone number and the day.

The delay between the event happening and Meta getting it. Real time is what you want, and a server route that fires right after the save is real time.