Menu

Microsoft Clarity

Microsoft Clarity is a free user behavior analysis tool provided by Microsoft. It's mainly used for:

  • Session Recording (session replay): View the real user operation process on the page (scroll, click, stay, etc.)
  • Heatmaps (heatmap): Analyze the concentrated areas of user clicks/scrolls
  • UX problem location: Help find “user stuck/can't find entry/form abandoned” etc. experience problems

Good to know

  • NEXTY.DEV disables tracking scripts in development to avoid polluting analytics data.
  • To verify locally, open app/[locale]/layout.tsx and remove the process.env.NODE_ENV === "development" check.
  • If you don’t need local verification, just set the production environment variables and the scripts will be enabled automatically.

Steps

  1. Sign in to the Microsoft Clarity dashboard
  2. Create a project
  3. Copy the project ID
  4. Paste the project ID into the environment variable NEXT_PUBLIC_CLARITY_PROJECT_ID
.env
NEXT_PUBLIC_CLARITY_PROJECT_ID=example.com
Microsoft Clarity Project ID