By Shane McIntyre, Founder of Elevarus.
- Write a page contract saved as CLAUDE.md before you prompt Claude Code to build anything: form above the fold, one CTA per viewport, event call locked inside the form’s submit handler.
- Per Google’s gtag event reference, a conversion event should fire on the user action, not the base tag on page load.
- Meta’s Lead standard event belongs inside the same submit handler, per Meta’s Pixel reference docs.
- Run a two-minute pre-deploy check: grep the fire-order line in your code, test-submit the form, then confirm the event fired in Google Tag Assistant or Meta Pixel Helper.
- When you generate dozens of city or service pages from one template, the event call is the line most likely to break silently. Verify it per template, not once for the batch.
Questions this article answers:
- Why does a Claude Code landing page look perfect but report zero conversions?
- What goes in a page contract before you prompt Claude to build a landing page?
- How do I verify the conversion pixel actually fired before I spend on ads?
- Where does the Google Ads conversion event snippet go on a landing page?
- Can a non-technical marketer build a conversion-ready page without a developer?
- Does the conversion event carry through when I generate many pages at once?
When you build landing pages with Claude Code, they can pass every design review and still report zero conversions in Google Ads. That happens for one reason: the model bound your tracking pixel to the page loading, not to the form actually submitting.
Most walkthroughs on how to build a page with Claude Code show you how to get it live. Few show you how to keep the conversion event tied to the actual lead. If you’re a media buyer running paid traffic, that gap is the only part of this that matters.
The fix is a written page contract you hand Claude Code before it writes a single line of markup. Pin the form above the fold, cap the buttons, and lock the event to the submit handler first. Fixing it after the fact never sticks, because Claude will quietly undo it the next time you ask it to “make the hero nicer.”
Why Does a Claude Code Landing Page Look Perfect but Report Zero Conversions?
A Claude Code landing page reports zero conversions when the tracking snippet fires on page load instead of inside the form’s submit action. The page still looks finished. Google Ads and Meta just have nothing real to count, so their bidding systems learn from noise instead of signal.
The model optimizes for a designer’s approval, not a media buyer’s audit
Claude Code reads “clean” the way a portfolio site does: centered hero, generous whitespace, one big scroll-stopping image. Left alone, it pushes your lead form down two or three scrolls, because that reads as polished design.
A media buyer doesn’t care how the hero looks. They care whether the form is the first thing a visitor sees. Every scroll a paid visitor has to make before reaching the ask is a chance for them to leave. A page a designer approves and a page a campaign can trust are two different reviews. Claude only knows how to pass the first one unless you tell it about the second.
The pixel fires on page load, not inside onSubmit, the single most common failure
The conversion event is the line of code that tells Google Ads or Meta “this person just became a lead.” The onSubmit handler is the code that runs the instant someone hits your form’s submit button. Claude Code will often drop the tracking snippet in the page’s <head>, where it fires the second the page loads, not when the form actually submits.
Per Google’s gtag event reference, a conversion event is meant to trigger on the user action itself, not the base tag that loads with every page view. Claude treats “add tracking” as a page-level task because that’s the easiest place to paste it. That single misplacement is why a page can look finished and still fail an audit.
What Goes in a Page Contract Before You Build Landing Pages With Claude Code?
Before you build landing pages with Claude Code, write a page contract: a short file, saved as CLAUDE.md, that Claude Code reads as standing instructions for the whole project. Most treatments of this file frame it as background context. We treat it as a set of hard, grep-able constraints Claude has to obey before it writes a single line of markup.
Form-above-fold and one-CTA-per-viewport as hard constraints, not suggestions
Write the page contract before opening Claude Code at all, the same way a designer wouldn’t open Figma without a brief. Two constraints do most of the work:
- The lead form renders above the fold on both mobile (375px) and desktop (1440px). No scroll required.
- Exactly one call-to-action per viewport. No secondary button competes with the form.
Set the CTA count at exactly one per viewport, because two competing buttons on a paid landing page split intent an ad already resolved. The visitor clicked because of a specific promise. Give them one action, not a menu.
The fire-order assertion: event inside onSubmit, written as a line you can later grep for
The third line in the contract is the one every ranking tutorial skips:
- The conversion event call must sit inside the form’s onSubmit handler. Never in <head>. Never in a page-load effect.
That sentence is the fire-order assertion. Write it as a literal, searchable line, not a loose instruction, because you’re going to search your built code for it before you ever launch a campaign.
How Do I Keep Message Match Tight Between the Ad and the H1 When Claude Writes the Copy?
Message match means the promise in your ad headline shows up again, in close to the same words, in the page’s H1. The H1 is the big headline at the top of the page. This is a paid-media requirement, not a copywriting nicety. Google’s own guidance ties landing page relevance directly to Quality Score, which affects what you pay per click.
Feed the ad’s headline promise into the contract so the H1 inherits it
Left alone, Claude writes generic hero copy: “Welcome to [Company Name]” or “Get Started Today.” Neither one carries the specific promise a visitor clicked on. Add the exact ad headline to your page contract. Tell Claude the H1 must carry it verbatim or near-verbatim.
A useful directional check: for every page you ship, mark yes or no on whether the ad promise appears in the H1. That’s your message-match rate. It’s not a platform metric. It’s a discipline you track against your own pages.
Hero structure a media buyer trusts vs. hero structure a designer approves
A hero a designer approves has breathing room and a striking image. A hero a media buyer trusts has the ad’s promise in the H1, the form in view without scrolling, and one button. Those aren’t opposing goals, but Claude will pick the first set by default unless the contract tells it otherwise.
Where Does the Google Ads Conversion Event Snippet Go on a Landing Page?
The Google Ads conversion event snippet belongs inside your form’s submit handler, never in the page’s base tag. Per Google’s gtag event reference, the event snippet is meant to fire on the specific action you’re measuring, in this case a form submit. The base gtag.js tag simply loads on every page.
gtag event on submit vs. the base tag on load for Google Ads
The base tag (gtag.js) loads once per page and has no idea whether a form was ever submitted. The conversion event snippet is a separate call you place inside the onSubmit function. It’s the only piece that should ever report a conversion to Google Ads. If Claude wrote both calls in the same place, one of them is in the wrong spot.
The Meta Pixel Lead event inside the submit handler
Meta’s equivalent is the Lead standard event, documented in Meta’s Pixel reference. Like the Google event, it’s meant to fire on the action, not the load. Put the fbq('track', 'Lead') call inside the same onSubmit function as your Google event, right after the form successfully submits.
When to keep the page static vs. move it into a Next.js or React stack
A single-campaign page can stay static HTML and CSS. Claude Code handles that cleanly, and there’s less surface area for the event to end up in the wrong place. Once you need the CTA or headline to change based on the traffic source, UTM parameter, or ad set, you’re better served moving into a stack like Next.js or React, where you can swap copy without rebuilding the whole page. We’ve written more on that tradeoff in Claude Code vs Cursor for marketers shipping landing pages, including the file structure that keeps a growing page count from turning into a mess.
How Do I Verify the Conversion Pixel Actually Fired Before I Spend on Ads?
Run a two-minute check before any paid traffic touches a Claude-built page: search the code for your fire-order assertion, submit a test form, then confirm the event fired in Google Tag Assistant or Meta Pixel Helper. That check is cheaper than a week of Google’s and Meta’s systems optimizing against a dead pixel.
Grep the fire-order assertion, then test-submit and confirm in Tag Assistant or Pixel Helper
Grep is a plain search command that looks for a pattern of text in your files. Run something like grep -n "gtag(" your-page-file and read the lines it returns. If the event call sits inside a <head> script or a page-load function, it’s wrong. If it sits inside the onSubmit handler, you’re clear.
Then do the real test: submit the form yourself, and open Google Tag Assistant or Meta Pixel Helper to confirm the event actually fired at the moment you clicked submit, not when the page loaded.
Where the conversion event breaks when you multiply city by service pages at scale
One popular approach uses a Claude Code skill to generate a full city times service matrix of pages from a single command: tree trimming Toronto, tree trimming Vancouver, and so on. It’s a real SEO lever, but it never checks whether the conversion event survives the copy at each stop.
Re-assert the contract after every edit, because a later prompt can un-pin your CTA
A follow-up prompt like “make the hero nicer” can move your form back below the fold or duplicate a CTA, even after you nailed the contract on the first build. Re-paste your page contract, or reference it directly, every time you ask Claude to touch layout. Treat the contract as a standing rule, not a one-time instruction.
Ship a Page Your Campaign Can Actually Read as Converting
Creator posts claiming thousands of leads from a Claude-built page in a couple weeks circulate regularly, with no conversion rate, no cost-per-lead, and no channel breakdown attached. Treat those as demand signal, not proof. The real standard isn’t “Claude generated leads.” It’s that your campaign can optimize against a real signal, because you asserted the fire order before you turned on a single dollar of traffic.
This workflow assumes you or Claude are editing real markup you can search. If you’re building on a drag-and-drop page builder instead of writing code, the grep check doesn’t apply, and you’re back to manually checking Tag Assistant or Pixel Helper every time you touch the page.
When you build landing pages with Claude Code on real budget, the page is only as good as its weakest link: the fire order. Get that right once, in writing, before the first prompt, and every page after it inherits the fix.
If you’d rather have a second set of eyes verify your tracking before you spend a dollar of media budget on it, talk to Elevarus about a free consultation. We’ll look at what you’ve built, or help you build it right the first time.
Frequently Asked Questions
Why does a Claude Code landing page look perfect but report zero conversions?
The conversion event is almost always bound to the page loading instead of the form submitting. The page renders fine and looks done, but Google Ads or Meta never receive a real signal, so campaigns optimize against noise instead of actual leads.
What goes in a page contract before you prompt Claude to build a landing page?
Three hard constraints: form above the fold, exactly one call-to-action per viewport, and the conversion event locked inside the form’s onSubmit handler. Write these into a CLAUDE.md file and hand it to Claude Code before the first markup prompt, not as a fix after the page is built.
How do I verify the conversion pixel actually fired before I spend on ads?
Grep your code for the event call to confirm it sits inside the onSubmit handler, then submit a real test form and check Google Tag Assistant or Meta Pixel Helper. That two-minute check confirms the event fired at submit, not at page load, before you turn on paid traffic.
Where does the Google Ads conversion event snippet go on a landing page?
It belongs inside the form’s onSubmit function, separate from the base gtag.js tag that loads on every page view. Per Google’s own gtag event reference, the event snippet should trigger on the specific user action you’re measuring, not the page load.
Can a non-technical marketer build a conversion-ready page without a developer?
Yes, but only if you write the page contract before you prompt Claude to build anything. Without the contract, Claude optimizes for visual polish, and a marketer with no coding background has no easy way to catch the event firing in the wrong place after the fact.
Does the conversion event carry through when I generate many pages at once?
Not automatically. Generating a city or service matrix of pages from one template or skill can silently break the event call on individual pages, so you need to re-run the grep-and-test check per template, not once for the whole batch.
This article was researched and drafted with AI assistance and editorially reviewed for accuracy.
