Lesson 7.7 · 55 minLanding pages for campaigns

What you will have

Each campaign points at its own page under /lp/<campaign> whose headline, proof and offer match the ad. Those pages are kept out of search results, and every lead in the CRM shows which page it came through.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 4 — Demonstration: building the variants

Purpose: give each ad campaign its own landing page whose message matches its ads,
so visitors see the promise they clicked on.

Context: brightside-site at lesson-7.4. The main landing page at / is built from
shared components (see docs/design.md and docs/architecture.md). Campaign documents:
docs/ads/google-ads-copy.md and docs/ads/google-keywords.md for the campaign
quote-search; docs/ads/meta-creatives.md for the campaign quote-meta. Real content
and proof are in docs/content.md.

Do this:
1. Create a route /lp/[campaign] that renders the existing landing components with
   per-campaign content taken from one content file (one entry per campaign:
   headline, subheadline, proof block, call-to-action text, page title and
   description). Unknown campaign names return the 404 page.
2. Add two entries: quote-search and quote-meta. Write the headline, proof and offer
   for each so they repeat the main promise of that campaign's ads. Propose the copy
   in docs/content.md under a new "Campaign pages" section first and wait for my
   approval before building.
3. Campaign pages: no main navigation links away from the page (keep the logo, the
   legal links in the footer and the consent banner); same lead form, same
   data layer events, same thank-you redirect.
4. Mark campaign pages noindex using the framework's metadata, leave them out of the
   sitemap, and do not disallow them in robots.txt.
5. Make sure landing_page stored on a lead is the path of the first page of the
   visit (for example /lp/quote-search), as built in lesson 6.8. Show the landing
   page on the lead card if it is not already shown, and add a "Leads by landing
   page" table to the admin dashboard next to "Leads by source".

Constraints: reuse components - no copies of the form or tracking code. Use only
facts and testimonials present in docs/content.md; do not invent proof. No database
changes: the landing_page column already exists. Keep the pages as fast as the main
page.

Done when: the build passes; you have loaded both pages in a browser on desktop and
mobile widths; the page source of each contains a robots noindex tag; /sitemap.xml
does not list them; a test lead submitted from /lp/quote-search?utm_source=google&
utm_medium=cpc&utm_campaign=quote-search appears in the CRM with landing_page
/lp/quote-search and fires generate_lead once. Report the evidence for each point.

Do along

Pause the video where told and do each step on your own project.

1. At the prompt in Part 4, pause: from lesson-7.4 with your campaign documents, run it. Replace the campaign names with yours.
2. When Claude proposes the copy, compare each headline with the ads of that campaign, word for word. Edit, then approve.
3. Check the three places for real proof. Remove anything that is not true for your business.
4. After Part 4, pause: verify noindex, the sitemap and the 404 behaviour yourself. Deploy.
5. After Part 5, pause: change the final URLs in Google Ads and the website URLs in Meta. Open each full address in a browser first.
6. After Part 6, pause: submit one test lead through each campaign address. Mark them as tests in the CRM.
7. Commit and tag.

Check your work

1. Each campaign has a page: /lp/quote-search and /lp/quote-meta (your names) load, on a phone too.
2. The headline of each page repeats the main promise of its ads.
3. Page source contains noindex; /sitemap.xml does not list /lp/ pages; robots.txt does not disallow /lp/.
4. The live ads on both platforms show the new addresses.
5. Two test leads, one per campaign address, show different landing pages on their lead cards and in the "Leads by landing page" table.
6. GTM Preview on a campaign page: generate_lead fires once, and the Meta and Google Ads tags fire as on the main page.

Common problems

• Landing page on the lead shows / after arriving on /lp/... → the capture from 6.8 already held an older first visit in the browser's storage. Test in a private window. If it persists, ask Claude: "Explain when landing_page is captured and reset; a new visit with new UTM values must record the new landing page."
• Campaign page appears in the sitemap → the sitemap is generated from all routes. Tell Claude to exclude /lp/ and show you the output.
• Ad platform rejects the page or cannot load it → the page was blocked in robots.txt or returns an error to crawlers. Remove the disallow; keep noindex.
• Tags do not fire on the campaign page → the page uses a different layout without the GTM container. Tell Claude the campaign route must use the same root layout and prove it in GTM Preview.
• Headline no longer matches after editing ads → keep the page entry and the ad copy in the same review. Ask Claude to compare docs/ads/*.md with the campaign content file and list mismatches.
• Three Meta angles, one page feels generic → create one page per ad later (/lp/quote-meta-move-out), once you know which angle gets leads.

Homework

About 30 minutes, on your own, after the lesson. No later lesson depends on it, and it changes nothing in either ad account.

1. Message-match worksheet. Fill in the worksheet from Materials for every live ad: each search ad group and each Meta ad. Deliverable: docs/ads/message-match.md with ad headline, page headline, proof and offer per row. Done when: every ad has a row, marked "match" or naming the words that differ.
2. Thumb test. Open each campaign page on your phone through its full campaign address. Without submitting, note what you see before scrolling, how many scrolls it takes to reach the form, and anything hard to read or tap. Deliverable: three notes per page in the same file. Done when: both pages have their notes.
3. One missing proof. For each page, write which real proof its promise still lacks: a testimonial, a photo, a fact. Then ask one real customer for a testimonial, or take one photo of your own work. Deliverable: the request sent or the photo taken, and a line in the same file saying what is on its way. Done when: one request or photo exists and is noted. Do not put unconfirmed proof on a page.

If a task changed files in the project, commit and push without a tag: git add -A, git commit -m "Homework 7.7", git push.

Save your work

git add -A
git commit -m "Lesson 7.7: campaign landing pages with noindex and landing page reporting"
git tag lesson-7.7
git push
git push --tags