Microsoft Clarity + Layered Web Analytics Stack

The Problem and Why It Mattered

I integrated Microsoft Clarity session recording and heatmap analytics into a Next.js web app — alongside PostHog and GA4 — building a layered analytics stack with consent-gated initialisation and GTM-managed vendor loading. The relevant technical and business risk is the cost of leaving this workflow, control, or product boundary unclear, manual, insecure, or difficult to operate. The case study focuses on the decisions used to make that risk manageable.

Objectives and Success Criteria

• Deliver the capability described in the project objective using a maintainable technical design.
• Make the main workflow, control boundary, and operational responsibilities explicit.
• Produce reviewable implementation evidence without publishing confidential values or customer data.

Requirements and Constraints

The product design had to balance a clear user workflow with maintainable technical boundaries, secure handling of user data, and a path for incremental delivery.

My Role and Ownership

I owned the technical design and implementation described in this portfolio record, including the technology choices, core system boundaries, and the documentation of the resulting approach. Related organisational decisions, vendor operations, and formal certification decisions remain outside the scope of this technical case study unless stated explicitly.

Solution Overview

The solution is built around Microsoft Clarity, Google Tag Manager, Next.js. Its implementation is organised as the components below so that the architecture, control points, and operating model can be evaluated separately rather than treated as a list of tools.

Architecture and System Design

The public architecture description follows the path from the initiating user, workload, or operator action through the relevant product intelligence components. Access boundaries, data or state handling, and operational controls are described at a safe level; secrets, private addresses, and client-sensitive implementation details are intentionally omitted.

Technology Decisions and Trade-Offs

I selected Microsoft Clarity, Google Tag Manager, Next.js because they support the project objective and make the critical engineering boundaries explicit. The trade-off is operational and platform complexity: the design depends on documented configuration, controlled access, and ongoing review rather than assuming that a managed service or framework removes engineering responsibility.

Implementation Walkthrough

The following implementation notes describe the components that matter most to the project outcome. They are intentionally focused on technical decisions and operating behaviour instead of reproducing entire source files or sensitive configuration.

Implementation: Microsoft Clarity Integration

Consent-gated custom script loader — Clarity only initialises after the user accepts functional cookies. Clarity custom tags API attaches session metadata: user role, subscription tier, hashed user identifier. Masking rules redact all form inputs and text matching email or phone patterns.

Implementation: Google Tag Manager Architecture

GTM serves as the single script-loading layer. Each analytics vendor's tag fires only when the corresponding consent category has been granted. Adding or removing analytics vendors is a GTM configuration change, not a code deployment.

Implementation: Cross-Platform Data Correlation

A consistent anonymous session ID is attached as a custom dimension in GA4, a Clarity custom tag, and a PostHog super property — making it possible to join sessions across all three tools in BigQuery.

Implementation: Clarity-Informed UX Fixes

Identified and resolved three friction points: a CTA button being scrolled past (repositioned above the fold — 34% conversion uplift); a form field with high rage-click rates (validation error not visible on mobile); a navigation element clicked by 40% of users looking for a buried feature.

Implementation: Privacy & Compliance

Clarity data processing terms documented, Clarity added to the cookie policy, and 30-day session data retention configured to align with the privacy policy's stated retention period.

Challenges, Failures and Corrections

This portfolio record does not invent deployment failures, client incidents, or corrective actions that are not supported by the published project evidence. Where operational details are confidential or were not captured for public release, the case study documents the design boundary and lesson instead of presenting an unsupported narrative.

Security, Compliance and Risk

The public record avoids secrets, customer data, and private infrastructure details. The relevant security controls, access boundaries, and operational risks are addressed in the implementation notes where they are material to the project.

Testing, Validation and Evidence

The evidence published for this project is the documented implementation, its stated architecture and controls, and the portfolio record. The published record documents the implemented architecture, the core controls, and the technology choices that can be reviewed without exposing confidential operational data. Claims are limited to the implementation details and outcomes documented in this case study.

Results and Evidence

The published record documents the implemented architecture, the core controls, and the technology choices that can be reviewed without exposing confidential operational data.

What I Learned

This project reinforced that product intelligence work is not a technology checklist. The durable value comes from making boundaries, trade-offs, ownership, and evidence clear enough for another engineer or stakeholder to review and operate the system responsibly.

What I Would Improve Next

• Expand automated validation around the most important workflow and control boundaries.
• Add or deepen operational evidence, such as dashboards, test artefacts, or an architecture diagram where it is safe to publish one.
• Review the design against the next expected scale, reliability, and governance requirement before extending the system.

Final Takeaway

This product development case study addresses a defined technical problem through Microsoft Clarity, Google Tag Manager, Next.js. It demonstrates my ability to turn requirements into an explainable design, implement the important controls, and document outcomes and limitations without overstating what the evidence proves.