Analyzing Session Recordings to Identify UX Problems
Session recordings are video recordings of real user mouse movements, clicks, and scrolls. They show what happens on your site from the visitor's perspective, revealing causes when quantitative analytics only show symptoms.
Tools
Microsoft Clarity — free, unlimited, stores 30 days. Hotjar — paid, good filters and analysis tools. FullStory — enterprise, DX Data API for programmatic analysis. LogRocket — specializes in technical errors.
Setting Up Microsoft Clarity
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "PROJECT_ID");
</script>
Custom tags for filtering:
clarity("set", "user_plan", user.plan)
clarity("set", "page_type", "product_page")
clarity("set", "ab_variant", experimentVariant)
Setting Up Filters for Analysis
Instead of watching recordings sequentially — filter by problem signals:
Microsoft Clarity filters:
- Dead clicks: clicks on non-clickable elements
- Rage clicks: 3+ clicks in 1 second in one spot
- Excessive scrolling: user scrolled >90% of page
- Quick back: returned to previous page < 8 seconds
- JavaScript errors: sessions with console errors
# Clarity API for programmatic analysis
import requests
def get_problem_sessions(project_id, token):
response = requests.post(
'https://api.clarity.ms/v0/reporting/sessions',
headers={'Authorization': f'Bearer {token}'},
json={
'projectId': project_id,
'startDate': '2024-03-01',
'endDate': '2024-03-31',
'filters': [
{'dimension': 'RageClicks', 'operator': 'gt', 'value': 0},
],
'sortBy': 'RageClicks',
'sortOrder': 'desc',
'limit': 50
}
)
return response.json()
Session Analysis Methodology
Step 1: Identify problem page Take pages with high exit rate or low conversion from GA4.
Step 2: Filter recordings by that page + problem signal
Example: /checkout/step-2 + rage clicks.
Step 3: Watch 20–30 recordings (not 5, not 200) Look for patterns — repeated behavior across different users.
Step 4: Document observations
## Issue: "Shipping Address" Step in Checkout
### Observation:
- 12 of 23 sessions reviewed: users try clicking geolocation icon
in address field (icon is decorative, not clickable)
- 7 sessions: after entering address, wait for autocomplete (which doesn't exist)
- 5 sessions: confused between "Street" and "Address" (two similar fields)
### Hypothesis:
Add address autocomplete (DaData API) and make geolocation icon functional
→ reduce checkout abandonment by 15%+
### Priority: HIGH
### Effort: MEDIUM (1–2 days development)
Integration with Product Analytics
// Link session recording to GA4 event
// On critical event — add tag for Clarity search
document.getElementById('checkout-form').addEventListener('submit', function() {
clarity("event", "checkout_submitted")
})
// On error — mark session
window.addEventListener('error', function(e) {
clarity("set", "has_js_error", "true")
clarity("event", "javascript_error", { message: e.message })
})
// Link Clarity session with GA4 client_id
clarity.identify(userId, sessionId, undefined, {
ga_client_id: gaClientId
})
GDPR and Privacy
// Mask personal data in recordings
// Clarity automatically masks type="password" fields
// Manual masking:
// In Clarity: Dashboard → Settings → Masking → Add selector
// .credit-card-number { display: none } in CSS → won't be recorded
// Programmatically
clarity("consent", false) // disable recording for non-consent
clarity("consent", true) // enable after getting consent
Delivery Time
Installing recording tool, setting up custom tags, analyzing 100 sessions with report — 2–3 business days.