Lesson 6.6 · 45 minMicrosoft Clarity

What you will have

Microsoft Clarity runs on the public pages through Tag Manager, only after the visitor accepts analytics. The student can replay their own session and sees the form input masked, and Clarity is connected to the GA4 property.

Video

The video for this lesson is not recorded yet.

Prompts used in this lesson

Part 4 — Masking what the form does not cover

Purpose: session recordings by Microsoft Clarity must never contain anything a
visitor typed, even where the site shows it back to them as text.

Context: Clarity is installed through GTM on public pages only. Clarity always masks
input boxes and drop-downs. It supports the HTML attribute data-clarity-mask="true",
which masks an element and its children. GTM is not loaded on /admin.

Done looks like:
- Every place on a public page that displays visitor-entered data as text (for
  example a name on /thank-you, a summary of the request, an error message that
  repeats the input) carries data-clarity-mask="true".
- A list for me of each place you found, or a clear statement that there are none.
- Confirmation that no /admin route loads GTM, so Clarity cannot run there.

Constraints: do not change what the pages look like or say. Do not add any Clarity
script to the code; it stays in GTM.

Verify before reporting: run the build, load / and /thank-you after a test
submission, and report which elements have the attribute. Load /admin/login and
confirm no request to googletagmanager.com or clarity.ms is made.

Do along

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

1. Pause after Part 2. Create the Clarity project; keep masking on Balanced; switch the cookie setting off.
2. Pause after Part 3. Add the "Microsoft Clarity – Official" tag in Tag Manager with your project ID, the analytics_storage requirement, and both triggers. Preview: confirm the reject path (no tag, no _clck/_clsk) and the accept path (tag fires, cookies appear, console check prints granted). Publish.
3. Pause when the prompt appears in Part 4. Run the masking prompt; review Claude's list; deploy.
4. Generate sessions from your computer and your phone: accept the banner, scroll, click a call-to-action, submit the form with test data.
5. Pause after Part 5. Connect Clarity to GA4.
6. After Part 6, when the recordings are available, replay both. Check every form field. If they are not there yet, come back to this step later.
7. Delete the test leads. Add a short "Clarity" note to docs/measurement-plan.md. Commit and tag.

Check your work

1. In Clarity → Recordings, open the session from your computer. Expected: the replay shows your scrolling and clicks.
2. Watch the form part. Expected: every typed value, including the message, appears masked.
3. Watch the thank-you page part. Expected: no visitor-entered text is readable.
4. With consent rejected in a clean browser, check cookies. Expected: no _clck or _clsk, and the Clarity tag did not fire.
5. In Tag Manager's consent overview. Expected: the Clarity tag requires analytics_storage.
6. In Clarity → Settings → Setup. Expected: the Google Analytics integration is shown as connected.

Common problems

• The tag fires after acceptance but _clck never appears, and each page is a separate one-page session. → Clarity is not receiving the consent signal. → Ask Claude to call Clarity's documented consent API, window.clarity('consentv2', …) with the visitor's analytics and advertising choices, from the consent module whenever a choice is made or restored, and only if Clarity is present on the page. Then retest.
• Clarity cookies remain after the visitor withdraws. → The withdrawal code from 6.5 does not know about Clarity. → Ask Claude to add Clarity's documented erase call, window.clarity('consent', false), to the withdrawal step, and to verify the cookies are gone.

Homework

About 30 minutes, after the lesson. Nothing here is needed for 6.7 or 6.8. Change no Clarity setting and no tag. Write in your course notes, and delete test leads when you finish.

1. Two people, two recordings (~15 min). Ask two people to open your site on their own phones, accept the banner and request a quote with made-up details and a name beginning "QA". When the recordings are available, watch both. Write where each person hesitated, and one change to the page you would consider. Do not build the change yet. Done when: you have one observation per recording and one proposed change.
2. The error state (~10 min). Submit your form with an invalid email address, correct it and submit again. Replay that session and look at the fields, the error message and the thank-you page. Done when: nothing that was typed is readable anywhere. If something is, run the Part 4 prompt again naming the place, then commit without a tag.
3. A date with the heatmap (~5 min). Put a reminder in your calendar for a week from now: open the scroll heatmap for your landing page and write one sentence on whether most visitors reach the form. Done when: the reminder is in your calendar.

Save your work

git add -A
git commit -m "Lesson 6.6: Microsoft Clarity behind consent, masking checked"
git tag lesson-6.6
git push
git push --tags