# Integration with Microsoft Clarity

### Overview

Integrating Microsoft Clarity with your MangoApps intranet and enterprise application provides valuable insights into user behavior, helping optimize the user experience and identify potential usability issues on your MangoApps websites or web applications. 

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FOu95JHqQG7j4K5qJFDVk%2Fimage.png?alt=media&#x26;token=816c1990-360c-4160-92e8-89f5a5601572" alt="" width="128"><figcaption></figcaption></figure>

Clarity is a free analytics tool that tracks user interactions, providing features such as heatmaps, session recordings, and performance metrics. These features allow you to understand how users interact with your site, identify problem areas like rage clicks and dead clicks, and improve usability. Clarity also offers insights into page load times and user engagement, which can help you diagnose performance issues and optimize the design of your MangoApps site.

***

### MangoApps Roles Prerequisites

* **MangoApps Domain Admin**: Responsible for enabling domain-wide JavaScript integration.
* **Microsoft Clarity Admin User**: Manages the Clarity account and creates tracking JavaScript code for MangoApps.

***

### Setup of Microsoft Clarity

**1. Create a Microsoft Clarity Account**

* Visit the [Microsoft Clarity website](https://clarity.microsoft.com/).
* Sign in with your Microsoft account or create one if necessary.
* Access the Clarity dashboard upon login.

***

**2. Create a New Project**

* Click "Add New Project" on the Clarity dashboard.
* Enter the project name (e.g., your MangoApps website name).
* Input the MangoApps website URL.
* Click "Create" to finalize the setup.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FsSR1XFDC3UvBFpTn2BWU%2Fergse.png?alt=media&#x26;token=06630c03-8f13-48da-97ad-6e27c3e288b3" alt=""><figcaption></figcaption></figure>

***

**3. Get the Tracking Code**

* Copy the JavaScript tracking code provided after project creation.

***

**4. Add the Tracking Code to MangoApps**

* Log in as a MangoApps administrator.
* Navigate to **Admin Portal > Branding > JavaScript Section**.
* Paste the Microsoft Clarity tracking code.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2Fo1724NgQke0TBB1iVP7b%2Fthrethdr.png?alt=media&#x26;token=42a7ae63-a68a-4760-b792-dcf614122261" alt="" width="485"><figcaption></figcaption></figure>

***

**5. Verify the Installation**

* Return to the Clarity project dashboard.
* Click on **Settings > Verify** to ensure Clarity is working.
* Allow a few hours for data to populate and appear.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FsppEAUN9WEXPKSx84k45%2Fergser.png?alt=media&#x26;token=730f11ae-26a7-4619-a757-dc3793d2f05e" alt="" width="484"><figcaption></figcaption></figure>

***

**6. Start Tracking and Analyzing**

* Once verified, Clarity will begin tracking user interactions.
* Access session recordings, heatmaps, and analytics data from the Clarity dashboard.

***

**7. Optional: Integrate with Other Tools**

* Go to **Settings > Integrations** in Clarity.
* Follow prompts to integrate with tools like Google Analytics.

***

### Microsoft Clarity Admin View

#### **Dashboard Overview**

* View metrics like Total Sessions, Total Clicks, Page Views, and Engagement Time.
* Gain a high-level snapshot of MangoApps site performance.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FtmXVjIezKzo0Q88wZfev%2Fergesrgse.png?alt=media&#x26;token=f59262ee-d8d9-41ea-9c79-9add0be8f793" alt="" width="487"><figcaption></figcaption></figure>

***

#### **Heatmaps**

* **Click Heatmap**: Identify popular elements by analyzing click distribution.
* **Scroll Heatmap**: Determine user engagement with content below the fold.
* **Mouse Movement Heatmap**: Observe areas that capture user attention.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2Fk8sspKqV9yDu0CS37SVc%2Frthsrthr.png?alt=media&#x26;token=cf9e5922-f42c-4c37-bdfc-d359c11603be" alt="" width="491"><figcaption></figcaption></figure>

***

#### **Session Recordings**

* Replay user sessions to understand navigation and identify pain points.
* Filter sessions by:
  * Device type (desktop, mobile, tablet).
  * Country or region.
  * Session duration.
  * Behavioral indicators (rage clicks, dead clicks, quickbacks).

***

#### **Rage Clicks and Dead Clicks**

* **Rage Clicks**: Indicates frustration caused by non-responsive elements.
* **Dead Clicks**: Highlights misleading or non-clickable elements.

***

#### **Quickbacks**

* Monitor quickbacks to identify content or usability issues.

***

#### **Insights**

* Analyze metrics like Scroll Depth, Click Rate, and Interaction Time.
* Investigate bounce rates and exit pages for improvement opportunities.

<figure><img src="https://1627138357-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LjKbJ2ssjhlUZRcGOXW%2Fuploads%2FL9zWYEv201lgTl6scHat%2Ffgwergw.png?alt=media&#x26;token=839424f9-1ac7-4af0-84cd-646e5b88550a" alt="" width="486"><figcaption></figcaption></figure>

***

#### **Segmentation**

* Focus on specific user groups based on device, location, or behaviors.
* Optimize for mobile users or identify navigation challenges for specific regions.

***

#### **Performance Metrics**

* Diagnose slow page load times and optimize for better performance.

***

#### **Google Analytics Integration**

* Combine Clarity's qualitative data with Google Analytics' quantitative data for richer insights.

***

#### **Downloadable Reports**

* Export reports to share insights with your team.

***

### Security Considerations

* Ensure only MangoApps domain administrators access the Clarity setup.
* Refer to the [MangoApps Privacy Policy](https://www.mangoapps.com/privacy-policy) for compliance.

***

### Data Deletion

To delete MangoApps data from Microsoft Clarity:

* Contact the MangoApps Domain Administrator or Microsoft Clarity Admin.
* Alternatively, email the MangoApps support team at <support@mangoapps.com>.

***

### Rollout Recommendations and Best Practices

* Obtain approval from IT, Legal, or other relevant departments before enabling session tracking.
* Communicate the integration’s purpose and benefits to stakeholders.

***

### Microsoft Clarity + MangoApps Integration Video Walkthrough

* Access the complete video walkthrough [here](https://hub.mangoapps.com/msc/NjM1ODcxXzU1MTA0OTc).