Analytics
Microsoft Clarity Setup for South African Stores.
Microsoft Clarity gives South African operators free session replays, heatmaps, and rage-click detection — unlimited, no plan tiers. It is the fastest way to see why Cape Town mobile users bail at checkout, or why the Johannesburg fibre crowd hovers the size selector and leaves. This guide covers install, POPIA-safe PII masking, and wiring it to GA4 so you can jump from a revenue dip straight into the replay.
Prerequisites
- A Microsoft Clarity account (free, sign up at clarity.microsoft.com)
- A Clarity Project ID (10 character string from the install page)
- Edit access to theme.liquid, layout.astro, or your base HTML template
- Optional: a GA4 property to link for cross-tool navigation
Step 1. Create the Clarity project and grab the tracking code
Sign in to clarity.microsoft.com, create a new project, enter your site URL, pick the "Retail / Ecommerce" category. Clarity gives you a ten-character Project ID. Copy it before leaving the page.
Step 2. Install the Clarity snippet
Paste this script in <head>. Replace YOUR_CLARITY_ID. Clarity is safe to load above the fold because the script itself is ~1KB and uses a Web Worker for the actual recording work.
<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", "YOUR_CLARITY_ID");
</script>Step 3. Configure POPIA-safe masking
Open Settings > Masking. Set the default to "Balanced" and add strict masks on input selectors holding SA ID numbers, mobile numbers, and addresses. Balanced masks text content of inputs by default but leaves layout visible, which is what you need for replay value.
<!-- Use data-clarity-mask on any SA PII input -->
<input name="id_number" data-clarity-mask="true" />
<input name="mobile" data-clarity-mask="true" />
<input name="address1" data-clarity-mask="true" />
<!-- data-clarity-unmask on fields you want visible, e.g. coupon code -->
<input name="discount_code" data-clarity-unmask="true" />Step 4. Gate Clarity behind POPIA consent
Clarity records session replays which is a form of processing under POPIA. Load the snippet only after the visitor grants "analytics" or "experience" consent. Move the snippet from theme.liquid into a deferred loader.
function loadClarity(id) {
if (window.clarity) return;
(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', id);
}
document.addEventListener('popia:consent:accepted', (e) => {
if (e.detail.categories.includes('analytics')) {
loadClarity('YOUR_CLARITY_ID');
}
});Step 5. Link Clarity to GA4
In Clarity Settings > Integrations > Google Analytics, paste your GA4 Measurement ID. Clarity then stamps every session with a client ID that matches GA4's client_id. You can jump from a GA4 purchase event into the Clarity session replay within a couple of clicks.
Step 6. Set up custom tags for key SA events
Tag sessions with the visitor's payment method (Payfast, Yoco, Ozow) so you can filter replays by "users who saw the Ozow option and bailed". Fire clarity() after the payment method is selected.
// On payment method change
document.querySelector('[name="payment-method"]').addEventListener('change', (e) => {
window.clarity && window.clarity('set', 'payment_method', e.target.value);
});
// On cart value thresholds
if (cartTotalZar > 1000) {
window.clarity && window.clarity('set', 'cart_tier', 'high');
}Step 7. Review rage clicks and dead clicks weekly
Open the Clarity dashboard > Insights. Filter for "Rage clicks" > Device: Mobile > Country: South Africa. This usually surfaces broken variant pickers, stuck CTAs, or slow-loading Payfast redirects. Fix the top three every week.
Step 8. Export findings into a Notion or Linear ticket
Clarity lets you copy a deep link to the exact second in a replay. Paste it into Linear with a one-line description. This keeps the "why we changed it" context alive when a developer picks up the ticket three weeks later.
SA gotchas
- Clarity does not mask iframes from third parties (e.g. Payfast payment page). Assume payment form content is invisible in replays — that is working as intended.
- If your site runs a strict CSP, add https://www.clarity.ms and https://*.clarity.ms to script-src and connect-src.
- Session replays consume bandwidth on mobile. Telkom Mobile and MTN contract users on tight data caps will notice if you load Clarity pre-consent.
- Dashboard data has a 2-hour processing delay. Do not panic when a live session does not appear immediately.
- Clarity projects default to US data residency. For POPIA and cross-border transfer disclosure, note this in your privacy policy.
Frequently asked questions
Is Microsoft Clarity POPIA compliant?
Clarity can be deployed POPIA-compliantly if you gate it behind consent, mask PII inputs, disclose cross-border transfer to the US in your privacy policy, and sign Microsoft's Data Protection Addendum.
Will Microsoft Clarity slow down my Shopify store?
The snippet is tiny and uses a Web Worker. Real-world impact is usually under 30ms on 4G. If Lighthouse flags it, defer the loader until after user consent.
Can I use Clarity on Shopify checkout?
Only on Shopify Plus via checkout.liquid. Non-Plus plans run checkout on a separate domain where custom scripts are not allowed.
How long does Clarity keep session recordings?
Default retention is 30 days. That is usually enough for SA ops teams running weekly reviews.