Did you know you can add Microsoft Clarity to your Power Apps to see exactly how users interact with your screens?
Clarity is free, requires no licensing, and gives you session recordings, heatmaps, rage click detection, and scroll depth analysis. It works with both Canvas Apps and Model-Driven Apps — you just need to inject the tracking script.
Why this matters
You built the app, but do users actually use it the way you expected? Are they tapping a label thinking it’s a button? Are they scrolling past important fields? Are they rage-clicking something that’s not responding?
Without Clarity, you’re guessing. With it, you’re watching.
Canvas Apps: inject via HTML Text control
Canvas Apps don’t expose a traditional HTML <head>, but you can inject JavaScript through an HTML Text control.
- Go to clarity.microsoft.com and create a new project. Copy your Clarity tracking script.
- In your Canvas App, add an HTML Text control (Insert → Text → HTML text).
- Set the
HtmlTextproperty to your Clarity snippet wrapped in a<div>:
"<div><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/YOUR_PROJECT_ID';y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y)})(window,document,'clarity','script');</script></div>"
- Set the control’s
Visibleproperty tofalseand place it on your first screen (it only needs to load once). - Publish and play the app. Clarity starts capturing sessions immediately.
Tip: Place the HTML Text control on a shared component or your app’s start screen so it loads on every session regardless of navigation path.
Model-Driven Apps: inject via JavaScript web resource
Model-Driven Apps give you more control since you can register JavaScript on form events.
- Create a new JavaScript web resource in your solution (e.g.,
new_ClarityTracking.js). - Add the Clarity initialization code:
function initClarity() {
(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/YOUR_PROJECT_ID";
y = l.getElementsByTagName(r)[0];
y.parentNode.insertBefore(t, y);
})(window, document, "clarity", "script");
}
- Register the web resource on your main form’s OnLoad event.
- Publish your customizations and open the app. Sessions will appear in your Clarity dashboard within minutes.
What to look for in the Clarity dashboard
Once data starts flowing, focus on these signals:
- Rage clicks — Users are frustrated; something isn’t responding or isn’t clickable.
- Dead clicks — Users are clicking elements that do nothing. Consider making them interactive or removing the visual affordance.
- Excessive scrolling — Important fields or actions might be below the fold. Reorganize your layout.
- Session recordings — Watch real user journeys. You’ll spot confusion, workarounds, and unused features within minutes.
- Heatmaps — See where attention concentrates. If users ignore a section entirely, question whether it belongs on that screen.
Power Pages bonus
If you’re also running Power Pages, Clarity integrates even more naturally — just paste the tracking snippet into your portal’s custom JavaScript section under Portal Management. No workarounds needed.
The bottom line
Building the app is half the job. Understanding how people actually use it is the other half. Clarity gives you that visibility with zero cost and minimal setup — just inject the script, publish, and start learning.
💬 Comments & Suggestions
Share your thoughts, tips, or drop a useful link below.