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:

// 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