> ## Documentation Index
> Fetch the complete documentation index at: https://docs.taginsight.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Chrome extension

> Capture, debug, and import tracking data with the Tag Insight Chrome Extension

## Overview

The Tag Insight Chrome Extension is a powerful tool that helps you capture, inspect, and debug tracking implementations directly from your browser. It's an essential companion for anyone working with Tag Insight.

<img src="https://mintcdn.com/taginsight/poFMsZzsIjoQTyP7/images/20_chrome_extension_actions@2x.png?fit=max&auto=format&n=poFMsZzsIjoQTyP7&q=85&s=e5d087fecd574831b1e9004c9fa84e1b" alt="Chrome Extension Overview" style={{borderRadius: "8px", margin: "20px 0"}} width="2614" height="1092" data-path="images/20_chrome_extension_actions@2x.png" />

## Installation

<Steps>
  <Step title="Visit Chrome Web Store">
    Search for "Tag Insight" in the Chrome Web Store or use the direct link from your dashboard
  </Step>

  <Step title="Add to Chrome">
    Click **Add to Chrome** and confirm the installation
  </Step>

  <Step title="Pin the Extension">
    Click the puzzle icon in Chrome and pin Tag Insight for easy access
  </Step>

  <Step title="Log In">
    Click the extension icon and log in with your Tag Insight credentials
  </Step>
</Steps>

## Features Overview

<CardGroup cols={2}>
  <Card title="Live Debugger" icon="bug">
    Real-time data layer inspection and debugging
  </Card>

  <Card title="Event Capture" icon="record-vinyl">
    Capture events as you browse for import
  </Card>

  <Card title="Pixel Detection" icon="radar">
    Verify Tag Insight pixel installation
  </Card>

  <Card title="Data Export" icon="download">
    Export captured data for analysis
  </Card>
</CardGroup>

## Live Debugging

The extension's live debugger shows all tracking events in real-time.

<img src="https://mintcdn.com/taginsight/poFMsZzsIjoQTyP7/images/20_2_chrome_extension_actions@2x.png?fit=max&auto=format&n=poFMsZzsIjoQTyP7&q=85&s=b0a5b131222aa600018e790c0e60f612" alt="Chrome Extension Debugging" style={{borderRadius: "8px", margin: "20px 0"}} width="2474" height="1512" data-path="images/20_2_chrome_extension_actions@2x.png" />

### Debugger Interface

<Tabs>
  <Tab title="Event Stream">
    View all events as they fire:

    * Event name and timestamp
    * Variable count
    * Page URL
    * Event status (valid/invalid)
  </Tab>

  <Tab title="Event Details">
    Click any event to see:

    * Complete data layer
    * Variable values
    * Validation status
    * Expected vs actual format
  </Tab>

  <Tab title="Filters">
    Filter events by:

    * Event name
    * Page URL
    * Time range
    * Validation status
  </Tab>
</Tabs>

### Debug Information

For each event, the extension shows:

```javascript theme={null}
{
  // Event Information
  event: "product_view",
  timestamp: "2024-01-15T10:30:45.123Z",
  page_url: "/products/blue-shirt",
  
  // Validation Status
  validation: {
    status: "warning",
    issues: [
      "Missing required variable: product_category",
      "Invalid format for price (expected number, got string)"
    ]
  },
  
  // Data Layer
  dataLayer: {
    event: "product_view",
    product_id: "SKU123",
    product_name: "Blue Shirt",
    price: "29.99" // Should be 29.99 (number)
    // Missing: product_category
  }
}
```

## Reverse Tracking Plan

Use the extension to capture your existing implementation and create a tracking plan.

<img src="https://mintcdn.com/taginsight/poFMsZzsIjoQTyP7/images/20_3_chrome_extension_actions@2x.png?fit=max&auto=format&n=poFMsZzsIjoQTyP7&q=85&s=b53c7e2881008f799c31ddbdeb49bbad" alt="Chrome Extension Reverse Tracking" style={{borderRadius: "8px", margin: "20px 0"}} width="2248" height="1426" data-path="images/20_3_chrome_extension_actions@2x.png" />

### Capture Process

<Steps>
  <Step title="Start Capture Mode">
    Click **Start Capture** in the extension
  </Step>

  <Step title="Browse Your Site">
    Navigate through key user journeys:

    * Product browsing
    * Add to cart
    * Checkout flow
    * Account actions
  </Step>

  <Step title="Review Captured Events">
    See all unique events captured with:

    * Event frequency
    * Variable variations
    * Sample values
  </Step>

  <Step title="Select Events to Import">
    Choose which events to include in your tracking plan
  </Step>

  <Step title="Import to Project">
    Send selected events directly to your Tag Insight project
  </Step>
</Steps>

### Capture Settings

Configure capture behavior:

* **Capture Duration**: Set time limit or manual stop
* **Event Deduplication**: Merge similar events
* **Variable Sampling**: Number of samples to keep
* **Page Filtering**: Include/exclude URLs

## Pixel Verification

The extension automatically detects Tag Insight pixel installation.

### Pixel Status Indicators

<Tabs>
  <Tab title="✅ Active">
    * Pixel detected and working
    * Shows project name
    * Displays configuration
    * Real-time event count
  </Tab>

  <Tab title="⚠️ Warning">
    * Pixel detected but issues found
    * Configuration mismatch
    * Network errors
    * Version outdated
  </Tab>

  <Tab title="❌ Not Found">
    * No pixel detected
    * Installation instructions
    * Quick setup guide
    * Troubleshooting tips
  </Tab>
</Tabs>

### Pixel Information

When a pixel is detected, view:

```javascript theme={null}
{
  status: "active",
  project: "Main Site - Production",
  project_id: "proj_123abc",
  version: "1.2.3",
  configuration: {
    dataLayerName: "dataLayer",
    environment: "production",
    sampling: "100%"
  },
  events_captured: 47,
  last_event: "2024-01-15T10:31:00Z"
}
```

## Quality Assurance Features

### Validation Testing

Test your tracking against the tracking plan:

<Steps>
  <Step title="Load Tracking Plan">
    Select active tracking plan from dropdown
  </Step>

  <Step title="Enable Validation">
    Toggle **Live Validation** mode
  </Step>

  <Step title="Browse Site">
    Navigate and trigger events
  </Step>

  <Step title="Review Results">
    See real-time validation results
  </Step>
</Steps>

### Validation Indicators

* 🟢 **Valid**: Event matches tracking plan perfectly
* 🟡 **Warning**: Minor issues (optional variables missing)
* 🔴 **Error**: Critical issues (required variables missing, wrong types)
* ⚪ **Unknown**: Event not in tracking plan

## Advanced Features

### Custom Data Layers

Configure the extension for custom implementations:

```javascript theme={null}
// Extension settings
{
  dataLayers: [
    "dataLayer",      // Google Analytics
    "digitalData",    // Adobe
    "customLayer"     // Your custom layer
  ],
  eventKey: "event", // Or "eventName", "action", etc.
  debugMode: true
}
```

### Export Capabilities

Export captured data in multiple formats:

* **JSON**: Complete data structure
* **CSV**: Flattened for spreadsheets
* **Tag Insight Format**: Direct import ready
* **Documentation**: Markdown format

### Network Monitoring

Monitor tracking requests:

* GA4 measurement protocol calls
* Third-party pixels
* Server-side calls
* Performance metrics

## Use Cases

### Development Workflow

<Steps>
  <Step title="Pre-Implementation">
    Review existing tracking with capture mode
  </Step>

  <Step title="Implementation">
    Validate new tracking in real-time
  </Step>

  <Step title="Testing">
    Verify all events fire correctly
  </Step>

  <Step title="Debugging">
    Identify and fix tracking issues
  </Step>
</Steps>

### QA process

1. **Load Test Plan**: Import test scenarios
2. **Execute Tests**: Follow test scripts
3. **Capture Results**: Document all events
4. **Compare**: Match against expected results
5. **Report**: Export findings

### Troubleshooting

Common debugging scenarios:

<AccordionGroup>
  <Accordion title="Missing Events">
    * Check event triggers
    * Verify data layer pushes
    * Look for JavaScript errors
    * Test in incognito mode
  </Accordion>

  <Accordion title="Wrong Values">
    * Inspect data sources
    * Check transformations
    * Verify timing issues
    * Review data types
  </Accordion>

  <Accordion title="Duplicate Events">
    * Check for multiple triggers
    * Review GTM/TMS setup
    * Look for race conditions
    * Verify page lifecycle
  </Accordion>
</AccordionGroup>

## Keyboard Shortcuts

Boost productivity with shortcuts:

| Shortcut       | Action               |
| -------------- | -------------------- |
| `Ctrl/Cmd + K` | Quick search events  |
| `Ctrl/Cmd + E` | Export current view  |
| `Ctrl/Cmd + R` | Refresh capture      |
| `Ctrl/Cmd + F` | Filter events        |
| `Space`        | Pause/Resume capture |
| `Esc`          | Close detail view    |

## Settings and Preferences

### Extension Options

Configure the extension behavior:

* **Auto-Connect**: Connect to last project automatically
* **Notification**: Show alerts for validation errors
* **Storage**: Local event history duration
* **Performance**: Sampling for high-traffic sites

### Privacy Settings

* **Data Storage**: Events stored locally only
* **Auto-Clear**: Clear data on browser close
* **Sensitive Data**: Auto-mask PII fields
* **Incognito**: Disable in private browsing

## Integration with Tag Insight

### Seamless Workflow

The extension integrates directly with your Tag Insight projects:

1. **Project Selection**: Choose active project from dropdown
2. **Live Sync**: Changes reflected immediately
3. **Import Events**: Send captured events to tracking plan
4. **Validation Rules**: Use project's validation settings

### Collaborative Features

* Share capture sessions with team
* Export findings for review
* Comment on specific events
* Create tickets from issues

## Tips and Tricks

### Power User Tips

<CardGroup cols={2}>
  <Card title="Batch Operations" icon="layer-group">
    Select multiple events with Shift+Click for bulk actions
  </Card>

  <Card title="Quick Filters" icon="filter">
    Use `/` to quickly filter events by name
  </Card>

  <Card title="Event Comparison" icon="code-compare">
    Compare two events side-by-side with Ctrl+Click
  </Card>

  <Card title="Auto-Documentation" icon="file-lines">
    Generate documentation from captured events
  </Card>
</CardGroup>

### Performance Optimization

For high-traffic sites:

1. Enable sampling mode
2. Filter by specific events
3. Limit capture duration
4. Use page filters
5. Clear old data regularly

## Troubleshooting

<AccordionGroup>
  <Accordion title="Extension Not Working">
    * Check Chrome version (88+ required)
    * Verify permissions granted
    * Try reinstalling extension
    * Clear extension storage
  </Accordion>

  <Accordion title="Can't Connect to Project">
    * Verify login credentials
    * Check network connection
    * Confirm project access
    * Try logging out and back in
  </Accordion>

  <Accordion title="Events Not Capturing">
    * Check capture is started
    * Verify data layer name
    * Look for content security policy blocks
    * Test in regular (not incognito) mode
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Import Methods" icon="file-import" href="/tracking-plans/import-methods">
    Learn about importing captured events
  </Card>

  <Card title="Live Debugger" icon="bug" href="/tools/live-debugger">
    Explore the web-based debugger
  </Card>

  <Card title="Variable Configuration" icon="sliders" href="/tracking-plans/variable-configuration">
    Set up validation for captured events
  </Card>

  <Card title="Best Practices" icon="star" href="/best-practices/tracking-plan-design">
    Optimize your tracking setup
  </Card>
</CardGroup>