Lesson 7.9 · 40 minOptional: earning from ads on your site

What you will have

The student understands how display-ad monetisation works, has written a one-paragraph decision for or against it in docs/ads-plan.md, and, if for, has a blog section with a consent-aware ad slot that shows a placeholder and renders only on blog pages.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 7 — Demonstration: blog section with a placeholder slot

Purpose: add a small blog to the site and prepare it for display ads, without
loading any ad network until I have an approved account and have decided to use it.

Context: brightside-site at lesson-7.8. Follow docs/design.md and the existing
component patterns. The consent banner from lesson 6.5 exposes the visitor's
choices. Two article drafts are in docs/content.md under "Blog".

Do this:
1. Create /blog (list) and /blog/[slug] (article), with articles stored as Markdown
   files in the repository. Add the two articles. Include the blog pages in the
   sitemap and link "Blog" from the footer of the main site only.
2. Each article ends with a link to our own quote form.
3. Create an AdSlot component with a fixed reserved size so the layout does not
   shift. Behaviour:
   - if the environment variable NEXT_PUBLIC_ADSENSE_CLIENT_ID is empty: render a
     clearly labelled placeholder box ("Ad placeholder") in development and preview,
     and render nothing in production;
   - if it is set: render the slot only when the visitor has granted advertising
     consent; otherwise render nothing. Do not add the ad network's script yet -
     leave one clearly marked place where it would be loaded, on blog pages only.
4. Use AdSlot once in the article layout, after the first section. It must be
   impossible to render it outside /blog: make the component refuse to render on any
   other route and add a test for that.
5. Add public/ads.txt.example containing the documented AdSense line format with a
   placeholder publisher ID and a comment in docs/architecture.md explaining that it
   must be renamed to ads.txt with the real ID after approval.

Constraints: no ad code and no ad slot on /, /lp/*, /thank-you, /privacy, /terms or
/admin. No new tracking. Articles must not contain invented facts or statistics.

Done when: the build and tests pass; you have loaded a blog article and seen the
placeholder; loaded / and an /lp/ page and confirmed no slot in the page source;
and confirmed the article's layout shift score is unaffected by the placeholder.
Report the evidence.

Do along

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

1. After Part 5, pause: decide whether your business has something useful to write about. If yes, draft two short articles from your own knowledge and put them in docs/content.md under "Blog".
2. After Part 7, pause: run the prompt from Part 7 (skip this step entirely if your decision is already a firm "against" and you do not want a blog).
3. Compare, with the calculator from 7.1, the value of one lead with what one ad click could plausibly return. Use only your own figures.
4. After Part 8, pause: write the decision paragraph in docs/ads-plan.md.
5. Commit and push.

Later, and only if your decision is for: apply to the network yourself after reading its program policies; after approval, set NEXT_PUBLIC_ADSENSE_CLIENT_ID, rename ads.txt.example to ads.txt with your real publisher ID, arrange consent that meets the network's requirements for your visitors, and only then ask Claude to add the network's script following its current documentation.

Check your work

1. docs/ads-plan.md contains a decision paragraph: for or against, with a reason and a review point.
2. If for: a blog article shows the placeholder slot with reserved space.
3. If for: the page source of /, an /lp/ page and /thank-you contains no ad slot, and the route test passes.
4. With advertising consent rejected and a client ID set locally, the slot renders nothing.
5. No ad network script is requested on any page (check the network tab).

Common problems

• Placeholder appears on the landing page → the component was added to a shared layout. Tell Claude: "AdSlot may only be used in the blog article layout; remove it elsewhere and show the failing-then-passing test."
• Text jumps when the slot appears → no reserved size. Ask for fixed dimensions per breakpoint.
• /ads.txt returns 404 after approval → the file is still named .example or is not in public/. It must be reachable at the root of the domain.
• AdSense shows "Not found" or "Unauthorized" for ads.txt → wrong publisher ID or the file is on a subdomain only. Fix and wait; detection is not immediate.
• Application rejected → usually content. Add genuine, original articles over time; do not ask Claude to mass-produce filler, which fails the quality requirement and helps no reader.

Homework

About 20 minutes, on your own, after the lesson. Nothing later depends on it. It costs nothing and involves no application to an ad network.

1. Ten real questions. From your CRM messages, calls and emails, list ten questions customers have actually asked you. Deliverable: a "Blog ideas" list in docs/content.md. Done when: there are ten, each in the customer's words and none invented. This is useful whichever way you decided.
2. Look as a reader. Visit three sites in your field or your city that carry display ads. For each, note where the ads sit and whether they pulled you away from what you came for. Deliverable: three notes under your decision paragraph in docs/ads-plan.md, and one sentence saying whether the decision stands. Done when: the three notes and the sentence are there.
3. A third article (only if you built the blog). Write one article yourself that answers one of the ten questions, from your own knowledge and without invented facts. Ask Claude to add it as a Markdown file like the first two. Done when: it appears under /blog and ends with the link to your quote form.

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

Save your work

git add -A
git commit -m "Lesson 7.9: blog section, ad slot placeholder and monetisation decision"
git push