# 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