# Hotjar

Track Shoplift test variants in Hotjar to segment heatmaps, recordings, and feedback by A/B test participation.

### Quick Start

Add this code after your Hotjar tracking code:

```javascript
// Hotjar + Shoplift Integration
function initializeShopliftHotjar() {
  if (window.shoplift && window.hj) {
    const visitorData = window.shoplift.getVisitorData();
    
    if (visitorData.visitor && visitorData.visitorTests.length > 0) {
      // Set user attributes
      hj('identify', visitorData.visitor.id, {
        device_type: visitorData.visitor.device,
        country: visitorData.visitor.country
      });
      
      // Tag recordings with test data
      visitorData.visitorTests.forEach(test => {
        hj('event', `shoplift_test_${test.testId}`);
        hj('tagRecording', [`test:${test.testId}`, `variant:${test.hypothesisId}`]);
      });
    }
  } else {
    setTimeout(initializeShopliftHotjar, 100);
  }
}

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

### Filtering in Hotjar

#### Recordings

Use tags to filter recordings:

* `test:[test_id]` - All users in a specific test
* `variant:[hypothesis_id]` - Users in a specific variant

#### Heatmaps

Create separate heatmaps for each variant to compare user behavior.

#### Events

Filter by `shoplift_test_*` events to analyze specific test participants.

### Best Practices

1. **Create variant-specific heatmaps** for visual comparison
2. **Use consistent tag naming** for easy filtering
3. **Set up saved filters** for frequently analyzed tests
4. **Watch recordings** of both control and variant to identify UX issues