Measure experiment outcomes by combining browser analytics with feature flag variants

Last updated March 21, 2026

Analytics & A/B Testing

This guide shows how Flaggr's browser analytics and feature flag system work together to measure the real-world impact of experiments. Every event captured by the analytics script includes the active flag variants, making it straightforward to compare performance, conversions, and user behavior across variants.

Video walkthroughs: See Flag Impact Analysis for variant comparison and risk assessment, and Web Vitals Monitoring for real-time vitals correlated with flags.

How It Works

The integration is automatic when both systems are active:

Flag SDK evaluates flags and exposes variants via window.__FLAGGR_FLAGS__
Analytics script detects flag variants and attaches them to every event
API endpoints aggregate data by variant, enabling per-variant comparisons
Dashboard visualizes variant impact on Web Vitals, conversions, and funnels

No additional configuration is needed — if a user has the analytics script and SDK both running, variant correlation happens automatically.

Setting Up an A/B Test with Analytics

1. Create a flag with variants

curl -X POST "https://flaggr.dev/api/flags" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "key": "checkout-redesign",
    "name": "Checkout Redesign",
    "type": "string",
    "defaultValue": "control",
    "projectId": "proj_abc123",
    "serviceId": "svc-web",
    "variants": [
      { "name": "control", "value": "control", "weight": 50 },
      { "name": "redesign", "value": "redesign", "weight": 50 }
    ]
  }'

2. Create an experiment

curl -X POST "https://flaggr.dev/api/projects/proj_abc123/experiments" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "name": "Checkout Redesign Test",
    "flagKey": "checkout-redesign",
    "serviceId": "svc-web",
    "variants": [
      { "name": "control", "value": "control", "weight": 50 },
      { "name": "redesign", "value": "redesign", "weight": 50 }
    ]
  }'

3. Install both SDK and analytics script

<!-- Flaggr SDK (evaluates flags) -->
<script src="https://cdn.flaggr.dev/sdk.js"
  data-service-id="svc-web"
  data-environment="production"
  defer></script>
 
<!-- Flaggr Analytics (captures events + correlates with flags) -->
<script src="https://cdn.flaggr.dev/a.js"
  data-site-id="proj_abc123"
  data-track-clicks="true"
  defer></script>

4. Use the flag in your code

import { useFlaggr } from '@flaggr/react';
 
function CheckoutPage() {
  const { value: variant } = useFlaggr('checkout-redesign', 'control');
 
  return variant === 'redesign'
    ? <NewCheckout />
    : <OriginalCheckout />;
}

The analytics script automatically picks up that checkout-redesign = "redesign" (or "control") and tags every event from that session.

5. Track custom conversion events

For conversion tracking beyond page views and vitals, dispatch custom events:

// After a successful purchase
window.dispatchEvent(new CustomEvent('flaggr:track', {
  detail: {
    type: 'custom',
    data: { name: 'purchase', properties: { value: 49.99, currency: 'USD' } }
  }
}));

Measuring Results

Web Vitals by Variant

Check if the redesign affects Core Web Vitals:

curl "https://flaggr.dev/api/analytics/vitals?siteId=proj_abc123&range=7d&flagKey=checkout-redesign" \
  -H "Authorization: Bearer <token>"

The response splits vitals by variant, letting you compare LCP, CLS, INP, etc. between control and redesign.

Conversion Rates by Variant

curl "https://flaggr.dev/api/analytics/flags/checkout-redesign/variants?projectId=proj_abc123&environment=production&period=7d&eventName=purchase" \
  -H "Authorization: Bearer <token>"

Response:

{
  "flagKey": "checkout-redesign",
  "variants": [
    { "variant": "control", "evaluations": 5000, "conversions": 250, "conversionRate": 0.05 },
    { "variant": "redesign", "evaluations": 5100, "conversions": 357, "conversionRate": 0.07 }
  ],
  "overallConversionRate": 0.06
}

A 40% improvement in conversion rate for the redesign variant.

Funnel Analysis

Trace the full checkout funnel by variant:

curl "https://flaggr.dev/api/analytics/funnel?projectId=proj_abc123&flagKey=checkout-redesign&steps=page_view,add_to_cart,checkout_start,purchase&environment=production&period=7d" \
  -H "Authorization: Bearer <token>"

This shows where each variant loses users. If redesign has less drop-off at the checkout_start → purchase step, that's direct evidence the new flow converts better.

Flag Impact Dashboard

The Flag Impact section of the analytics dashboard provides a visual comparison. Navigate to Console > [Project] > Analytics and scroll to the Flag Impact table.

Each flag row shows variant-level metrics: page views, sessions, LCP p75, and CLS. Click to expand for the full breakdown.

Best Practices

Run experiments for statistical significance

Don't make decisions on small samples. Wait until each variant has enough traffic for reliable comparisons. A general rule: at least 1,000 evaluations per variant for conversion metrics, more for Web Vitals.

Monitor vitals, not just conversions

A variant might increase conversions but degrade LCP or CLS. The analytics dashboard shows both — always check performance impact alongside business metrics.

Use the `_flaggr_analytics` flag for sampling

For high-traffic sites, use the dynamic collection control to sample events rather than collecting everything:

{
  "_flaggr_analytics": {
    "sampling": 0.1,
    "vitals": true,
    "clicks": true,
    "errors": true
  }
}

This collects from 10% of sessions while keeping the data representative.

Export data for deeper analysis

Use the export endpoint to send evaluation and outcome data to your data warehouse for more sophisticated statistical analysis.

curl -X POST "https://flaggr.dev/api/analytics/export" \
  -H "Authorization: Bearer <token>" \
  -H "Content-Type: application/json" \
  -d '{
    "projectId": "proj_abc123",
    "destination": "webhook",
    "webhookUrl": "https://your-warehouse.com/flaggr-hook",
    "period": "7d"
  }'