Microsoft Clarity GTM Integration
Microsoft Clarity via GTM — Free Behavioral Analytics That Sits Right Next to GA4
Google Analytics tells you what happened — sessions, conversions, traffic sources. It does not show you why. Why did users abandon the checkout form? Why does that CTA button get almost no clicks even though it sits above the fold? Why is the bounce rate on one landing page twice as high as a nearly identical one? Those questions need eyes on the page, not just numbers in a report — and that is exactly the gap Microsoft Clarity fills.
This recipe is built around three simple facts: Clarity is free, it drops into a GTM container with one official Custom Template, and once it's in, you can pipe your existing GA4 event data into it with almost no extra work using a community template built specifically for this purpose.
⬇ Download the GTM Container JSON from Google Drive1. Clarity Is Free — the Same Way GA Is Free
Microsoft Clarity carries no paid tier. There is no traffic cap, no session-recording quota, no feature gate that suddenly asks for a credit card once your site gets popular. Heatmaps, unlimited session recordings, funnels, filters, and the Copilot AI insights layer are all included from the moment you create a project — the same "free at any scale" model that makes GA4 the default choice for web analytics. Sign-in only requires a Microsoft, Google, or Facebook account, and no billing details are collected anywhere in the setup flow.
That matters for the same reason GA4's pricing model matters: it removes the cost conversation entirely. Adding Clarity next to GA4 isn't a budget decision or a tooling trade-off — it's just a checkbox.
2. Clarity Integrates Easily Through GTM
Microsoft publishes an official Community Gallery template — Microsoft Clarity -
Official — that handles the entire base install. It's a Sandboxed JavaScript
Custom Template, so like the other recipes on this blog, it does not inject inline
<script> content and does not require a CSP SHA-256 hash beyond what your
existing googletagmanager.com / www.clarity.ms allow-listing already
covers.
The template takes a single required field — your Clarity Project ID — plus an optional group of custom-identifier fields (User Id, Session Id, Page Id, Friendly Name) that let you stitch a Clarity session to a known user, and a simple key/value table for custom tags you can filter recordings and heatmaps by later.
In this container, the base tag is configured like this:
| Field | Value | Purpose |
|---|---|---|
projectId | {{Microsoft Clarity Project ID}} | Your Clarity project, stored as a Constant variable so it's easy to swap per environment. |
userId | {{Browser Client ID}} | Reuses the same GA4 client ID already resolved elsewhere in the container, so a Clarity session and a GA4 client ID point at the same visitor. |
sessionId | {{Browser Session ID}} | Aligns the Clarity session identifier with the GA4 session ID for cross-tool debugging. |
The base Microsoft Clarity tag itself carries no firing trigger of its own — it's set up as a teardown tag on the Google Analytics Configuration tag (the standard GA4 Google Tag) with "stop teardown on failure" enabled. In plain terms: Clarity loads immediately after the GA4 config tag succeeds, on every page, with no duplicated trigger to maintain and no risk of Clarity firing before consent or configuration settings have been resolved.
3. Sending Additional Events to Clarity with Markus Baersch's Template
The base install gets you heatmaps and recordings for free, but the real value comes from
telling Clarity about the events you already care about in GA4 — a CMP interaction, a
completed form, a session-duration milestone. Rather than hand-write separate event logic for
Clarity, this recipe uses Markus Baersch's
clarity-events Community Template (Custom Template ID cvt_WV8T5),
which wraps Clarity's clarity('event', ...), clarity('set', ...), and
related JS-API calls in a simple GTM tag with fields for event name, custom tags, session
upgrade, and consent state — no Custom HTML and no direct calls to the global
clarity() queue required.
The interesting part is how these tags fire. Rather than duplicating the trigger already attached to each GA4 Event tag, this container uses GTM's built-in tag sequencing to chain the Clarity event tag as a teardown of the corresponding GA4 event tag:
| GA4 Event Tag (fires first) | Teardown → Clarity Event Tag | Clarity Event Name | Full Recipe |
|---|---|---|---|
CookieYes Interaction Send Event |
Microsoft Clarity CookieYes Interaction |
cmp_click |
CookieYes Consent Implementation in GTM |
Session Duration Send Event |
Microsoft Clarity Session Duration |
session_duration_{n}sec |
Session Duration Timer in GTM |
This is what the "clean up" part of the chaining buys you: the Clarity event tag has no firing trigger of its own. It exists purely as a teardown, wired directly to the GA4 event tag whose data it mirrors. There is exactly one place — the GA4 tag's trigger — that decides when the pair fires. Change the trigger, adjust a filter, or retire the event entirely, and there's only one tag to touch. Nothing can drift out of sync between the two tags because there is only one source of truth for "when."
GA4 Event Tag: CookieYes Interaction Send Event
Trigger: CookieYes Click Interaction
Teardown → Microsoft Clarity CookieYes Interaction
(stop teardown on failure: true)
GA4 Event Tag: Session Duration Send Event
Trigger: Session Duration Event
Teardown → Microsoft Clarity Session Duration
(stop teardown on failure: true)"Stop teardown on failure" means if the GA4 tag itself fails (blocked by consent, network error, and so on), the Clarity event never fires either — which keeps the two platforms honest about what actually happened on the page.
This isn't the only valid pattern. Teardown chaining is a convenience, not a
requirement. You could just as easily give the Clarity event tag the identical trigger
already attached to the GA4 event tag (CookieYes Click Interaction or
Session Duration Event in this container) and let both tags fire independently off
the same condition. The trade-off is duplication: two tags now reference the same trigger, so a
future change to firing logic has to be applied twice. Teardown chaining trades that duplication
for a small ordering dependency (the Clarity tag always fires slightly after the GA4 tag). Either
approach gets the event into both tools — pick whichever fits how your team likes to
maintain triggers.
4. What Clarity Adds on Top of GA4
Once the events are flowing, Clarity isn't a duplicate of GA4 — it's a different lens on the same visitors. Where GA4 aggregates events into counts and funnels, Clarity shows you the page itself:
- Heatmaps — click, scroll, and area maps generated automatically for every page, no configuration or tagging required, showing exactly where attention concentrates and where it drops off.
- Session recordings — DOM-based (not video) replays of real visits: every click, scroll, and mouse movement, playable back at variable speed and filterable by the custom events this container sends.
- JavaScript error tracking — Clarity logs JS errors automatically and lets you jump straight to the session recording at the exact timestamp the error occurred, which turns "something broke for some users" into a five-minute investigation.
- Rage clicks, dead clicks & quick backs — automatic detection of frustrated repeated clicking, clicks on non-interactive elements, and users who land on a page and immediately bounce back — UX friction signals GA4 has no equivalent for.
- Excessive scrolling detection — flags visitors who scroll back and forth repeatedly, often a sign they can't find what they're looking for.
- Copilot AI summaries — an AI-generated text summary of each session (traffic source, key actions, behavioral anomalies) and of aggregate heatmap patterns, so you don't have to watch every recording manually.
- Smart Funnels — funnel analysis built from Smart Events and page visits, showing exactly where a flow like checkout or signup loses people.
- Segments — saved combinations of filters (device, region, referral
source, custom tags like the ones this container's
customTagsfield sets) for repeatable analysis. - Official GA4 cross-linking — Microsoft's own GA4 integration adds a
clarity_session_urlparameter to GA4 events, so a session recording is one click away from inside Google Analytics itself. - Privacy-first by default — password and payment fields are masked automatically, no PII is collected, and Clarity is built to be GDPR- and CCPA-aligned out of the box.
None of this replaces GA4's job of counting sessions, attributing conversions, and feeding Explorations and Audiences. It answers the question GA4 was never built to answer: why the numbers look the way they do.
Community & Official Templates Used
| Template | Author | Purpose |
|---|---|---|
Microsoft Clarity - Official | Microsoft | Base install — injects the Clarity tracking script and handles identify/custom-tag calls. |
Microsoft Clarity Events | mbaersch | Sends additional named events, custom tags, session upgrades, and consent signals to an already-running Clarity session. |
CookieYes CMP & consent tags (incidental) | cookieyeshq / Kent Spencer / Simo Ahava | Provides the CMP interaction this recipe relays into Clarity — full build-out in the CookieYes post. |
Session or User Seconds Duration (incidental) | Kent Spencer (drewspen) | Provides the duration milestone this recipe relays into Clarity — full build-out in the Session Duration post. |
How to Import
- Download the JSON from the Google Drive link above.
- In GTM, go to Admin → Import Container.
- Upload the container JSON.
- Choose Merge (not Overwrite) to preserve your existing GA4 setup.
- Update the
Microsoft Clarity Project IDConstant variable with your real Clarity project ID (found in your project URL:clarity.microsoft.com/projects/view/<projectId>/). - Confirm the Microsoft Clarity tag's teardown relationship to Google Analytics Configuration is intact after import — teardown/setup relationships are preserved by Merge but worth a visual check in the tag list.
- Open GTM Preview mode and load a page. Confirm the GA4 config tag fires, followed immediately by the Microsoft Clarity base tag in the same tag sequence.
- Trigger one of the events this container relays (a CookieYes consent click, or the session duration threshold) and confirm both the GA4 event tag and its paired Clarity event teardown tag fire in order. See the linked posts above if you want the full CookieYes or Session Duration logic rather than just the Clarity relay.
- In the Clarity dashboard, open Recordings and confirm the custom event names
(
cmp_click,session_duration_…sec) appear as filterable events on live sessions. - If you'd rather not rely on tag sequencing, re-point the Clarity event tags at the identical trigger already used by their paired GA4 event tag — both approaches are valid, see the trade-off discussion above.
The full source — container JSON and documentation — is also published on GitHub. If you adapt this pattern to relay additional GA4 events into Clarity, or switch from teardown chaining to shared triggers, open a pull request or issue.
⬇ Download GTM Container JSON
Comments
Post a Comment