Lesson 6.5 · 60 minCookie consent and Consent Mode

What you will have

The site shows a consent banner built in the project (accept, reject, choose categories, change later). The choice is passed to Google Consent Mode v2 and every tag in the container waits for it. With consent rejected, no analytics or advertising cookies are set and no tag fires; after acceptance, tags fire normally.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 4 — Claude builds the banner and the wiring

Purpose: tracking on this site must respect each visitor's choice. Build a cookie
consent banner in this project and connect it to Google Consent Mode v2, so Google
Tag Manager can make every tag wait for consent.

Context: Next.js App Router. GTM loads on public pages through the GoogleTagManager
component; one tracking module pushes cta_click, form_start, form_submit and
generate_lead to the data layer. Read Google's current developer guide "Set up
consent mode on websites" before writing the consent commands.

Done looks like:
1. A banner on public pages for visitors with no stored choice: "Accept all",
   "Reject all" (same prominence), and "Choose" with three categories: Necessary
   (always on), Analytics, Advertising. The last two are off until switched on.
2. A "Cookie settings" link in the footer of every public page reopens the choices.
3. The choice is stored in the browser as first-party data with its date. Nothing
   else is stored before a choice.
4. On every public page, before the GTM container loads: a consent 'default' command
   setting ad_storage, ad_user_data, ad_personalization and analytics_storage to
   'denied'; then, if a stored choice exists, a consent 'update' with it.
5. When the visitor makes or changes a choice: a consent 'update', then the event
   consent_update pushed to the data layer, only if the choice actually changed.
   Analytics maps to analytics_storage; Advertising maps to the three ad_ signals.
6. One consent module that other code can ask "is analytics allowed?" and "is
   advertising allowed?". Later lessons depend on it.
7. On withdrawal: send the update with 'denied', delete the analytics and
   advertising cookies the site can delete, reload the page.
8. A cookies section on /privacy listing the categories and the tools in each.

Constraints:
- No third-party consent service.
- Keyboard and screen-reader accessible; must not cover the lead form on a phone.
- Consent commands go to the same data layer GTM reads, in the form Google documents
  (the gtag function that pushes its arguments), not as plain objects.
- Plain wording; no legal claims such as "GDPR compliant".

Verify before reporting: run the build. In a fresh browser profile on the production
build, report (a) window.dataLayer in order, showing the consent default before the
GTM start entry; (b) cookies and local storage before a choice, after "Reject all"
and after "Accept all".

Do along

Work on your own project. Pause the video where a step says so.

1. Pause when the prompt appears in Part 4. Run it, keeping all three categories. Check the report: default before the container start; nothing stored before a choice.
2. Edit the banner text and the cookies section on /privacy in your own words; have them reviewed by someone qualified if your business needs it. Commit, push, deploy.
3. Pause after Part 5. In Tag Manager: enable consent overview; add the analytics_storage requirement to all five tags; create CE – consent_update and add it to the Google tag.
4. Pause after Part 6. Test both paths in preview, then publish.
5. Ask Claude to record the consent design in docs/measurement-plan.md: categories, signal mapping, the consent_update event, where the choice is stored. Commit and tag.

Check your work

1. Clear site data, load the site, press "Reject all", click around and submit the form. In DevTools → Application → Cookies. Expected: no cookie beginning _ga and no advertising cookies; only the stored consent choice exists.
2. In the Network tab filter by google-analytics. Expected: no requests.
3. In Tag Assistant with consent rejected. Expected: four signals denied; no GA4 tag under Tags Fired.
4. Open "Cookie settings" and accept all. Expected: the Google tag fires, _ga cookies appear, events show in DebugView.
5. Switch Analytics off again. Expected: after the reload the _ga cookies are gone and no tag fires.

Common problems

• Tags fire before any choice. → A tag lacks the consent requirement, or the container was not published. → Open the consent overview and look for tags with consent "not set".
• The Consent tab shows no default, or it appears after the first events. → The default runs too late or in the wrong form. → Tell Claude: "The consent default must be in the data layer before GTM starts, using the gtag function form. Show me window.dataLayer in order on first load."
• After Accept nothing fires until a reload. → consent_update is not pushed, or its trigger is not on the Google tag. → Look for the event in Tag Assistant, then check the tag's triggers.

Homework

About 35 minutes, after the lesson. Nothing here is needed to start 6.6. Keep the three categories, the four signals and the consent_update event as they are. If wording or layout changes, commit without a tag.

1. The third path (~10 min). In a clean browser with preview connected, press "Choose" and switch on Analytics only. In your course notes record the four signals from the Consent tab, whether the Google tag fired, and whether _ga cookies exist. Done when: your notes show analytics_storage granted, the three ad_ signals denied, and the Google tag fired.
2. The banner on your phone (~10 min). Open the live site in a private tab on your phone. Check four things: "Accept all" and "Reject all" are equally easy to tap; the lead form is not covered; "Cookie settings" can be reached in the footer; after a reload your choice is remembered. Done when: all four are yes. For a no, tell Claude what you saw and have it fix and verify.
3. One outside reader (~5 min). Ask someone who has not seen the site to read the banner and say what happens if they reject. Done when: they explain it correctly, or you have reworded the banner until they do.
4. Questions for an adviser (~10 min). Write three to five questions about your own business that this lesson could not answer, such as which rules apply where your visitors are. Done when: the list names the person or organisation you will ask.

Save your work

git add -A
git commit -m "Lesson 6.5: consent banner and Consent Mode v2"
git tag lesson-6.5
git push
git push --tags