Simplify Your Project Setup with Microsoft Clarity’s New NPM Integration  

We are excited to announce a new integration that will make setting up your projects easier than ever! Microsoft Clarity is now integrated with NPM, streamlining the process of adding powerful analytics to your web projects.  

Why NPM Integration?  

NPM (Node Package Manager) is a widely-used package manager for JavaScript, making it simple to manage project dependencies. By integrating Clarity with NPM, we aim to:  

  • Simplify Installation: Add Clarity to your project with a single command.  
  • Automate Updates: Keep your Clarity integration up-to-date effortlessly.  
  • Enhance Developer Experience: Reduce setup time and focus on building great features.  

How to Get Started  

Getting started with the new integration is straightforward. Follow these steps:  

  1. Create a new Clarity project  
  1. Install and import Clarity library via NPM:  
npm install @microsoft/clarity
import Clarity from '@microsoft/clarity';
  1. Initialize Clarity in Your Project:  
    To get your Clarity project ID, go to your project Settings > Overview  
const projectId = "yourProjectId" 

Clarity.init(projectId);
  1. Deploy and Monitor: Deploy your project and start monitoring user interactions with Clarity’s comprehensive analytics.  

Clarity’s Core Features, Now Seamlessly Available with NPM

Clarity’s NPM integration empowers you to access and use the core features that make understanding user behavior effortless. These functionalities are now more accessible than ever, allowing you to customize and enhance your analytics setup with ease: 

  • Identify API: Track individual users, sessions, or pages with custom identifiers for more personalized and actionable insights. 
  • Custom Tags API: Tag specific actions, elements, or interactions to focus on what matters most for your site. 
  • Custom Events API: Gain deeper behavioral insights by tracking user actions manually through custom events. 
  • Cookie Consent API: Ensure privacy compliance with seamless consent management tailored to your users’ preferences. 

Join the Community  

We invite you to join our growing community of developers who are leveraging Microsoft Clarity to build better web experiences. Share your feedback, ask questions, and collaborate with others on our GitHub repository or email our support team directly at clarityms@microsoft.com.

The new NPM integration is a significant step towards making Microsoft Clarity more accessible and easier to use. We are committed to continuously improving our tools to help you succeed. Try it out today and see the difference it makes in your project setup and analytics workflow!