# Landing Pages
Course: [Google Ads for B2B Teams](https://www.devtutorials.ai/learn/google-ads) · Section: Build the Campaign
Source: https://www.devtutorials.ai/learn/google-ads/build-the-campaign/landing-pages
> One page, one job: what makes a good B2B landing page, how to keep it consistent with the ad, and how to build it in Astro.
## What a good B2B landing page has
A landing page has one job: get the right visitor to take the one next step, and discourage the wrong visitor. Everything that doesn't help with that comes off the page.
Full site navigation is the most common distraction; replace it with a logo that links home.
A landing page that works. The top section does most of the work; the rest answers the questions that stop people converting.
### Message match
The visitor just read your ad. If the ad said "Never Miss a Renewal Again" and the page says "The Intelligent Legal Operations Platform", they have to work out whether they're in the right place, and many won't bother.
Copy the ad's main promise into the page headline, use the same offer wording ("30-minute demo", "14-day free trial"), and show the thing the keyword named.
If you have several ad groups with different promises, either give each its own page or make the headline reflect the shared promise.
### Form length for your goal
Free trial: work email and password, or single sign-on (Google, Microsoft, GitHub). Ask for company size or role inside the product after sign-up, not on the form. Every extra field costs sign-ups.
If you get many personal-email sign-ups that never activate, block free email domains or ask for a work email explicitly.
Then make sure the conversion you track is the completed sign-up, not the form view, and plan to track activation later.
Demo request: work email, name, company and company size is a good default. Four fields filter well without scaring people off.
Add a calendar booking step right after the form so serious buyers can pick a slot immediately; it improves show rates. Don't ask for phone number unless sales really calls; it lowers conversion and invites fake numbers.
Use the company size answer to route small companies to a self-serve path.
## Build it in Astro
Your site is in Astro, so a landing page is one file in src/pages/lp/ plus a small reusable component for the hidden tracking fields.
The example below assumes an existing BaseLayout; your LLM can adapt it to whatever layout your site uses.
### The page
```html readonly title="src/pages/lp/contract-management-demo.astro"
---
// src/pages/lp/contract-management-demo.astro
// Ad landing page: one offer, one form, no site navigation, not indexed.
import BaseLayout from '../../layouts/BaseLayout.astro';
import TrackingFields from '../../components/TrackingFields.astro';
const page = {
headline: 'Never miss a contract renewal again',
sub: 'Every contract searchable, every renewal flagged. See it with your own contract types in a 30-minute demo.',
proof: ['Used by 600 legal teams', 'Live in 6 weeks on average', 'SOC 2 Type II'],
};
---
{page.headline}
{page.sub}
{page.proof.map((p) =>
{p}
)}
```
### The hidden tracking fields
This component reads the Google click ID (gclid, or gbraid/wbraid on some iOS traffic) and UTM parameters from the URL and puts them into hidden form fields. Your CRM needs matching fields to store them.
This is the single most important thing for later stages of tracking: without the GCLID stored against the lead, you can't tell Google which clicks became customers.
```html readonly title="src/components/TrackingFields.astro"
---
// src/components/TrackingFields.astro
// Hidden fields that carry ad click IDs and UTMs into the CRM with the lead.
// Values are read from the URL on landing and kept for 90 days, so a visitor who
// browses around before converting is still attributed to the ad click.
const keys = ['gclid', 'gbraid', 'wbraid', 'utm_source', 'utm_medium',
'utm_campaign', 'utm_term', 'utm_content'];
---
{keys.map((k) => )}
```
EU/UK: storing click IDs in the visitor's browser counts as non-essential storage.
Only write to localStorage after the visitor accepts advertising or analytics cookies in your consent banner, or keep the values only in the page's hidden fields for that visit.
Your CMP usually exposes a consent check you can wrap the storage line in; ask your LLM to wire it up for the CMP you use.
### Keep it out of search results and fast
```html readonly title="src/layouts/BaseLayout.astro"
---
// In src/layouts/BaseLayout.astro: accept noindex and a minimal header
const { title, noindex = false, minimalNav = false } = Astro.props;
---
{title}
{noindex && }
{minimalNav ? Logo : }
```
noindex: landing pages often duplicate site content and you don't want organic visitors on a page built for ad traffic.
Speed: Astro ships little JavaScript by default, which helps. Keep the hero image under about 150 KB (WebP or AVIF, with width and height set), avoid chat widgets and heavy video on the page, and test with PageSpeed Insights on mobile.
Mobile: a large share of B2B searches start on a phone, even if the sale closes on a laptop. Check the form is usable with a thumb.
and a minimal header (logo only, no main nav).\n2. Above the fold: H1, one-line subhead, proof points, product image, and the form. Below: logos, 3-step \"what happens next\", quote, FAQ.\n3. Form fields: [work email, name, company, company size / work email + password]. Post to [our CRM form endpoint or handler].\n4. A reusable component src/components/TrackingFields.astro with hidden inputs for gclid, gbraid, wbraid, utm_source, utm_medium, utm_campaign, utm_term, utm_content and landing_page, filled by a small inline script from the URL and kept in localStorage for 90 days. [EU/UK only: only persist after the visitor gives consent via our CMP: name it.]\n5. No new JS frameworks; plain Astro and CSS. Images with width/height and lazy loading below the fold.\nShow me every file you create or change, then list what I need to set up in the CRM (matching fields) and how to test it."} chatgpt={"Our marketing site is an Astro project. Create a Google Ads landing page.\n\nCampaign theme: [e.g. contract management software]\nAd promise (use as the H1, keep wording): \"[promise from the ad]\"\nOffer / conversion: [14-day free trial / 30-minute demo]\nProof points: [3-5 facts]\nCustomer quote: [quote, name, role, company]\nFAQ answers: [pricing signal, security, setup time]\n\nRequirements:\n1. New page at src/pages/lp/[slug].astro using our existing layout [name/path]. Add props to the layout if needed for: and a minimal header (logo only, no main nav).\n2. Above the fold: H1, one-line subhead, proof points, product image, and the form. Below: logos, 3-step \"what happens next\", quote, FAQ.\n3. Form fields: [work email, name, company, company size / work email + password]. Post to [our CRM form endpoint or handler].\n4. A reusable component src/components/TrackingFields.astro with hidden inputs for gclid, gbraid, wbraid, utm_source, utm_medium, utm_campaign, utm_term, utm_content and landing_page, filled by a small inline script from the URL and kept in localStorage for 90 days. [EU/UK only: only persist after the visitor gives consent via our CMP: name it.]\n5. No new JS frameworks; plain Astro and CSS. Images with width/height and lazy loading below the fold.\nShow me every file you create or change, then list what I need to set up in the CRM (matching fields) and how to test it."} claudeHow="Use this with Claude Code in your website repo if you have it, or paste the relevant files (your layout and an existing page) into a chat and ask for the new files in full." chatgptHow="Use this with ChatGPT's Codex in your website repo if you have it, or paste the relevant files (your layout and an existing page) into a chat and ask for the new files in full." />
## Test the page on mobile
Most B2B searches that turn into leads still start on a phone at some point. A slow or jumpy page costs you conversions and lowers the landing page experience part of Quality Score. Before launch and after any change:
Open PageSpeed Insights (pagespeed.web.dev), paste the landing page URL with no UTMs, and read the Mobile tab.
Look at the three Core Web Vitals and put them in the check below. Google rates each one good, needs work or poor.
Open the page on a real phone on mobile data, fill in the form with your thumb, and submit it.
On an Astro site the usual culprits are a large hero image that was not run through Astro's image pipeline, third-party scripts (chat, heatmaps, testing tools) added to the shared layout, and web fonts loaded from another domain.
For ad landing pages, leave those scripts out entirely.
```html readonly title="src/pages/lp/contract-management-demo.astro (hero image)"
---
import { Image } from 'astro:assets';
import hero from '../../assets/contract-dashboard.png';
---
```
## Make the form usable for everyone
An accessible form is also a form more people finish. Check these on every landing page:
Visible labels above each field, not placeholder text that disappears when someone starts typing.
Contrast of at least 4.5:1 for text and the button label against its background. Light grey on white fails.
Keyboard: you can tab through every field and the button in order, and you can see where the focus is.
Errors in words next to the field ("Enter a work email"), not only a red border.
Autocomplete attributes so phones and browsers fill name, email and company for the visitor.
Tap targets at least about 44 px high, with space between them.
Ask your LLM to run the same checklist against your form component and to list the fixes as a diff. Then test it yourself with the keyboard only.
## Spot the problems
The ad says: "Expense Management Software | Approve Expenses From Your Phone | Free 14-Day Trial". Here's the landing page it points to:
example-spend.com/platform
Transforming the Future of Finance
Full site menu: Products ▾ Solutions ▾ Resources ▾ Company ▾ Careers · Log in
ExampleSpend's unified platform brings together AP, procurement, cards, travel and expenses with AI-driven insights. [3 MB autoplay video]
Form: First name · Last name · Work email · Phone · Company · Job title · Company size · Country · How did you hear about us? · Message → Contact sales
Regional notes
Make sure the consent banner doesn't cover the form or headline on mobile. A full-screen cookie wall in front of a landing page loses many visitors before they see anything.
Use a banner at the bottom, and check the form submits whether or not the visitor accepts cookies.
Translate the page for each language you advertise in, show EUR or GBP pricing, and mention EU data residency if you offer it.
Show INR pricing or "plans from ₹…" if you have regional pricing, since USD-only pricing makes Indian buyers assume the product isn't for them.
Mobile load speed matters more here: test on a mid-range Android phone over a 4G connection.
For Japan and Korea, use fully localised pages with local proof; a translated US page underperforms. For Australia and Singapore, show local currency and local support hours.
Use Portuguese for Brazil and Spanish elsewhere, local currency (BRL, MXN) where you have regional pricing, and local payment options if trials convert to paid by card.
Mention support in the local language if you have it.
If you advertise in Arabic, the page must be right-to-left and properly localised. Mention local or regional data hosting where it's true; it's a common buyer question in the Gulf.
Go deeper Testing landing pages without a testing tool
You don't need an A/B testing tool to start. Two practical options:
Ad group split: point two similar ad groups at two different pages and compare conversion rates after a few hundred clicks each.
Ad variations or a campaign experiment: Google Ads can split traffic between two final URLs and report results. Use it once you have enough volume, roughly 100 or more conversions a month in the campaign, or the test will take months.
Change one big thing at a time: the headline and offer, or the form, not the button colour. Small cosmetic changes rarely move B2B conversion rates enough to measure at typical volumes.
Do this now
PageSpeed Insights mobile run; LCP, INP and CLS all in the good range, or fixes listed.
Form checked: visible labels, contrast, keyboard order, error text and autocomplete.
Create one landing page for your first campaign theme, with the ad's promise as the H1.
Remove the main navigation and set the page to noindex.
Cut the trial form to work email and password (or SSO).
Cut the demo form to about four fields and add a calendar booking step.
Add the hidden tracking fields and create matching fields in the CRM.
Submit a test lead with ?gclid=test123&utm_source=google in the URL and confirm the values arrive in the CRM.
Check the page on a phone and run PageSpeed Insights on mobile.
Check the consent banner doesn't cover the form and that click IDs are only stored after consent.
