😁 Behavioral Insights¶
1. Overview¶
This document outlines our strategy for capturing user behavior insights (heatmaps and session recordings) while maintaining performance and data integrity across multiple environments.
2. The Core Stack¶
- Microsoft Clarity: Our "UX Camera." It records sessions and generates heatmaps to identify user friction (rage clicks, dead clicks).
- Google Tag Manager (GTM): Our "Switchboard." It manages all tracking scripts from a single dashboard, keeping our source code clean and ensuring scripts load without slowing down the app.
3. Key Design Decisions¶
A. Anonymous Tracking¶
We prioritize privacy by tracking sessions anonymously. * No Personally Identifiable Information (PII) is sent to our analytics tools. * Sessions are analyzed based on behavior patterns rather than individual user identities.
B. Environment Routing (Data Integrity)¶
To prevent local/dev/alpha/beta data from mixing with production data, we use a single GTM container that dynamically routes data using a RegEx Table Variable.
- Mechanism: GTM inspects the
Page URLat runtime. - Routing Logic:
| Environment | RegEx Pattern |
|---|---|
| Local | localhost:1111\|build\.visualli\.ai |
| DEV | dev\.visualli\.ai |
* **Logic:** If the URL matches the pattern, data is sent to the respective **Microsoft Clarity Project**.
- Benefit: New team members can spin up local environments or build previews without "polluting" our primary business metrics.
4. How to Update¶
When a new environment is added (e.g., alpha.visualli.ai):
1. Access the GTM Container.
2. Update the Regex Table Variable with the new URL pattern.
3. Publish the changes.
No code changes are required in the webapp itself.