# Microsoft Clarity

Integrate Shoplift with Microsoft Clarity to analyze user behavior patterns across test variants using session recordings and heatmaps.

### Quick Start

Add this code after your Clarity tracking code:

```javascript
// Microsoft Clarity + Shoplift Integration
function initializeShopliftClarity() {
  if (window.shoplift && window.clarity) {
    const visitorData = window.shoplift.getVisitorData();
    
    if (visitorData.visitor && visitorData.visitorTests.length > 0) {
      // Identify user
      clarity('identify', visitorData.visitor.id, {
        customSessionId: visitorData.visitor.shopifyAnalyticsId
      });
      
      // Set custom tags for each test
      visitorData.visitorTests.forEach(test => {
        clarity('set', `test_${test.testId}`, test.hypothesisId);
        clarity('set', 'is_theme_test', test.isThemeTest.toString());
      });
      
      // Track page view with test context
      clarity('event', 'shoplift_page_view', {
        test_count: visitorData.visitorTests.length,
        device: visitorData.visitor.device
      });
    }
  } else {
    setTimeout(initializeShopliftClarity, 100);
  }
}

// Initialize on page load
initializeShopliftClarity();
```

### Using Test Data in Clarity

#### Custom Tags

Filter recordings and heatmaps using:

* `test_[test_id]` - Set to the variant ID
* `is_theme_test` - Whether it's a theme test

#### Dashboard Setup

1. Go to **Settings > Setup > Custom tags**
2. Create filters for your test variants
3. Build dashboards comparing:
   * Rage clicks by variant
   * Scroll depth differences
   * JavaScript errors per variant

### Analysis Tips

1. **Compare heatmaps** between control and variants
2. **Identify dead clicks** unique to test variants
3. **Monitor JavaScript errors** that may be variant-specific
4. **Track excessive scrolling** indicating confusion in new layouts


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shoplift.ai/integrate/analytics-platforms-custom/microsoft-clarity.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.