# Live Events Source: https://docs.flagsync.com/events/live-tail View real-time impressions and events in FlagSync with Live Event Tail. ## What Is Live Event Tail? Live Event Tail lets you watch impressions and events as they happen, available on Team and Pro plans. It tracks: * **Events**: Generated when you call `client.track()`—user actions like clicks or purchases. * **Impressions**: Logged automatically with every `client.flag()` call—showing which flag variant users see. ## How to Access ### View All Live Events and Impressions * Go to the [Events Dashboard](https://www.flagsync.com/dashboard/events/) to see real-time activity across your environment. Live Events Dashboard showing tracked events

Live Events Dashboard showing tracked events

### View Live Impressions for a Flag * Navigate to the [Flags Dashboard](https://www.flagsync.com/dashboard/flags/). * Select your feature flag (e.g., `signup-cta`), then click the "Live Tail" tab. ## Why It Matters * **Developers**: Debug issues or verify `track()` and `flag()` calls instantly. * **Product Managers**: Monitor feature performance live—e.g., how `Join Now` impressions convert. ## Next Steps * Learn about [Events](/events/overview) and [Impressions](/impressions/overview). * Start tracking in [Quickstart: Send Events](/quickstarts/events). * Set up flags in [Quickstart: Integrate the SDK](/quickstarts/sdk). # Overview Source: https://docs.flagsync.com/events/overview Track user interactions in FlagSync to measure feature impact and drive experiments. ## What Are Events? Events log user actions—like clicks, sign-ups, or purchases—in your app. You send them manually via the SDK’s `track()` function to capture behavior tied to features, providing raw data for metrics and experiments that help developers and product teams assess rollout effects. ## How Events Work Call `track()` with an `eventKey` to name the event, and optionally an `eventValue` (numeric) or `properties` (key-value pairs) for extra detail: ```typescript Client-side theme={null} client.track( eventKey: string, eventValue?: number | null, properties?: Record | null ); ``` ```typescript Server-side theme={null} client.track( context: FsUserContext, // User context required eventKey: string, eventValue?: number | null, properties?: Record | null ); ``` Once submitted, Events appear automatically in the FlagSync dashboard—no predefinition needed. * **Use Cases**: Track anything from button clicks to performance stats—whatever matters to your app. ## Events in Action Events fuel FlagSync’s power: Watch them live in [Live Events](/events/live-tail). Build conversion rates or aggregates in [Metrics](/metrics/overview). Link them to flags in [Experiments](/experiments/overview) to test hypotheses. Drop `track()` anywhere in your code—events auto-sync to FlagSync for analysis. Use events to spot trends or prove feature impact—no coding required to view results. ## Next Steps * Start tracking with [Tracking Events](/events/tracking). * Aggregate events in [Metrics](/metrics/overview). * Test with flags in [Experiments](/experiments/overview). # Tracking Events Source: https://docs.flagsync.com/events/tracking Capture user actions in FlagSync with Numeric and Property events. ## How Are Events Tracked? Manually track user actions in FlagSync via the `track()` function, providing the core data that all [Metrics](/metrics/overview) rely on for analysis. ```typescript theme={null} client.track( eventKey: string, eventValue?: number | null, properties?: Record | null ); ``` ## Tracking Event Types There are two types of events: Captures measurable data like time or counts. Captures rich context like purchase details. ### Numeric Events Use `eventValue` to capture measurable data like time or counts for [Numeric Metrics](/metrics-numeric/overview): ```typescript theme={null} // Track page load time in seconds client.track('page_load_time', 1.42); ``` Perfect for metrics like "Average Page Load Time"—tracks quantifiable outcomes for analysis. Test if a feature slows or improves your app—send this event, then review the average in Metrics. A developer might track load times across a new UI—e.g., 1.42s—to ensure performance holds. ### Property Events Use `properties` to capture rich context like purchase details for detailed [Numeric Metrics](/metrics-numeric/overview): ```typescript theme={null} const purchase = { productId: '0x123', price: 49.99, discount: 0.20, isReturningUser: true, }; client.track('purchase_event', null, purchase); ``` Allows the creation of multiple [Numeric Metrics](/metrics-numeric/overview) (e.g., "Average Purchase Price" from `price`, "Discount Usage" from `discount`) from one `purchase_event`. Test if a feature increases purchase amounts or targets returning users—analyze in [Metrics](/metrics/overview). Track a `purchase_event` to check if a 20% discount boosts \$49.99 purchases or engages returning buyers. Why not just use `price` as the `eventValue`? Properties let you track one `purchase_event` and create separate metrics for `price`, `discount`, or other keys—more flexibility than a single number. See [Metric Examples](/metrics-numeric/examples) for more detail. ## Best Practices * **Name Clearly**: Use descriptive event keys (e.g., `signup-cta-click`) to match metrics. * **Limit Data**: Include only relevant properties (e.g., `price`, `discount`) to avoid clutter. * **Validate Early**: Check events in [Live Events](/events/live-tail) before defining metrics. ## Next Steps * Learn basics in [Events Overview](/events/overview). * Explore live tracking in [Live Events](/events/live-tail). * Define metrics in [Quickstart: Define Metrics](/quickstarts/metrics) or explore in [Metrics](/metrics/overview). # Creating Experiments Source: https://docs.flagsync.com/experiments/create-experiment Set up and configure experiments in FlagSync to test feature variations. ## Experiment Creation Set up an experiment in FlagSync to test feature flag variants against metrics. This process integrates [Feature Flags](/flags/overview), [Events](/events/overview), and [Metrics](/metrics/overview) to evaluate performance and optimize your product with data. Define a name (e.g., "Button Text Test") and hypothesis (e.g., "Changing 'Buy Now' to 'Complete Purchase' will boost conversions due to clarity"). Experiment details form

A specific hypothesis aids result interpretation. Pick existing [Metrics](/metrics/overview) (e.g., conversion rates, totals) or create new ones, to measure success. Experiment metrics form

Select or create a flag with variants to test (e.g., "Buy Now" vs. "Add to Cart"). Experiment flag form

Pick the control variant (e.g., current "0% discount") to compare against others. Experiment baseline form

Typically the current production value, or best-performing variant. Allocate percentages to each variant (e.g., 50% baseline, 50% new)—must total 100%. Experiment rollout form

Changing traffic or variants starts a new experiment iteration for data integrity. * Save and start the experiment to collect data * Once active, FlagSync tracks impressions and events, aggregating metrics to compare variants. Run for a fixed time (e.g., two weeks) or until significant statistical results are achieved. FlagSync locks linked flags and metrics while running. ## Next Steps Get started with a guided flow in [Quickstart: Overview](/quickstarts/overview), then: * Learn about metrics in [Metrics](/metrics/overview). * Monitor results in [Monitoring and Analysis](/experiments/monitoring). # Monitoring and Analysis Source: https://docs.flagsync.com/experiments/monitoring Evaluate experiment performance in FlagSync with real-time and historical data. ## Monitoring Your Experiment Monitoring and analysis in FlagSync let you assess how feature flag variants perform during and after an experiment. By reviewing impressions, events, and metrics, teams can determine which variants optimize goals like conversions or user engagement, refining strategies with data-driven insights. ## Data Sources

Automatically logged when `client.flag()` serves a variant.

e.g., tracking which users see "Join Now" or "Register".

Captured via `client.track()` in your code.

e.g., logging sign-ups or purchases tied to those variants.

Aggregates impressions and events into conversion rates or numeric values for analysis.

e.g., average spend

## Interpreting Results

Compare the percentage of users acting after seeing a flag variant (events ÷ impressions).

e.g., if "Sign Up" has 25% conversions and "Register" has 15%, "Sign Up" may outperform.

Assess aggregated values per user—e.g., higher purchase amounts with a discount.

e.g., if no discount averages \$50 and a 10% discount averages \$60, the 10% variant wins. Use these insights to adopt the winning variant or inform the next experiment iteration. ### Real-World Example Here’s how the `Register Conversion` experiment plays out in a live FlagSync experiment, testing if new button copy increases sign-up conversions: Flag creation form filled out

It's clear that "Join Now" has resulted in more conversions. ## Accessing Experiment Data * **Live Monitoring**: View real-time results on the [Experiments Dashboard](https://www.flagsync.com/dashboard/experiments/) while the experiment runs. * **Past Iterations**: For completed experiments, go to the specific experiment page and select the "Previous Iterations" tab to review historical data. ## Next Steps Decided on a winner? * Keep the top variant live in [Feature Flags](/flags/overview). * Refine with a new experiment in [Create an Experiment](/experiments/create-experiment). # Overview Source: https://docs.flagsync.com/experiments/overview Test feature variations to optimize your product with data-driven insights. ## What Are Experiments? Experiments (or A/B/n testing) compare multiple feature variants (e.g., different button texts, layouts, or price discounts) and determine which performs best against goals like conversion rates, user engagement, or page time. By rolling out variants to user segments and measuring real-world results, teams gain data-driven insights to refine product design and user experience. ## Why Experiments Matter Validate changes with real user data, not guesses. Metrics cut through opinions with clear numbers. Test, tweak, and improve continuously. ## What Is a FlagSync Experiment? A FlagSync experiment integrates [Feature Flags](/flags/overview), [Events](/events/overview), and [Metrics](/metrics/overview) into a unified testing framework. It tests flag variants (e.g., "baseline" vs. "new design") against one or more metrics by correlating: * **Impressions**: What users see * **Events**: What users do This evaluates if a variant outperforms, underperforms, or matches the baseline—e.g., does "Join Now" increase conversions over "Register"?

**Impressions**: Automatically logged when `client.flag()` serves a variant.

**Events**: Manually tracked with `client.track()` to capture user actions.

## Best Practices * **Single Hypothesis**: Test one change at a time (e.g., text, not text + color) for clear results. * **Adequate Sample**: Ensure enough users experience each variant to avoid skewed results. * **Clear Goals**: Match metrics to hypothesis objectives (e.g., revenue, engagement) for actionable insights. ## Next Steps Get started with a guided flow in [Quickstart: Overview](/quickstarts/overview), then * Learn about event tracking at [Events](/events/overview). * Set up metrics in [Metrics](/metrics/overview). # Creating Flags Source: https://docs.flagsync.com/flags/create-flag Set up feature flags in FlagSync to manage and test variants. ## Creating a Feature Flag Start by setting up a FlagSync project (try the 14-day free trial, no credit card needed), then create a flag via the Flags dashboard. ### Flag Configuration * **Name**: A human-readable label (e.g., "Signup CTA")—editable later. * **Key**: A unique identifier (e.g., `signup-cta`) for code use. * **Description**: Optional summary of the flag’s purpose. Flag creation form filled out

On/off switches

**Perfect for**:

Enable/disable features

Beta feature toggles

Predefined options

**Common uses**:

Theme: `light-mode`, `dark-mode`

CTA: `Register`, `Join Now`

Numeric values

**Common uses**:

Rate limits: `1000`, `5000`, `10000`

Image quality: `75`, `80`, `100`

Complex objects

**Common uses**:

`{ "layout": "grid", "maxItems": 8 }`

Define the variants to serve (e.g., `0.00`, `0.10`, `0.20` for `discount-rate`). Flag variants filled out

Set defaults for `discount-rate`: * **Enabled**: `0.20` (20% discount). * **Disabled**: `0.00` (no discount). Flag variants filled out

* When the flag is **on**, the **enabled** variant (e.g., `0.20`) is served unless overridden by targeting. * When the flag is **off**, the **disabled** variant (e.g., `0.00`) applies to all users. Click "Create Flag" to save. * Toggle the flag on or off to control its rollout. * Integrate with code via [Quickstart: Integrate the SDK](/quickstarts/sdk). ## Next Steps * Configure targeting in [Targeting and Rollouts](/flags/targeting-and-rollouts). * Run experiments in [Quickstart: Create an Experiment](/quickstarts/experiment). # Overview Source: https://docs.flagsync.com/flags/overview Learn the basics of feature flags in FlagSync for flexible feature management. ## What Are Feature Flags? Feature flags enable teams to toggle features, roll out updates gradually, and run A/B tests without redeploying code. In FlagSync, they power [Experiments](/experiments/overview) and [Metrics](/metrics/overview) by serving variants (e.g., "On" or "Off") to users. ## Why Feature Flags Matter Test features with a subset of users before full release. Compare variants (e.g., "Buy Now" vs. "Add to Cart") in A/B/n tests. Enable or disable features instantly—e.g., during maintenance. Roll out to specific groups or percentages, ensuring stability before full deployment. ## Next Steps * Dive into flag creation in [Creating Flags](/flags/create-flag). * Follow the full guided flow in [Quickstart: Overview](/quickstarts/overview). * Set up tracking for [Events](/events/overview). * Explore [Experiments](/experiments/overview). # Targeting and Rollouts Source: https://docs.flagsync.com/flags/targeting-and-rollouts Control feature flag distribution in FlagSync with targeting and rollouts. ## Targeting Options FlagSync offers flexible ways to roll out feature flags: Serve a variant to everyone. Target specific users or groups using custom attributes. Distribute variants by percentage across users. ### All Users Serve a single variant to every user, ensuring a consistent experience with default settings. This approach relies on: * **Disabled Variant**: Applied when the flag is off, serving as a fallback (e.g., "0% discount" for all). * **Enabled Variant**: Applied when the flag is on, unless overridden by targeting or rollouts (e.g., "20% discount" for all). Defaults provide a safety net—e.g., reverting to "0% discount" during system issues. Default variant settings

### User Segments Target specific users by passing custom attributes via the SDK and defining rules in the dashboard to match those attributes. For example: * **Use Case**: Create a rule to serve a beta feature to "QA Testers" and "PMs" while others see the baseline. * **Implementation**: Provide attributes in the SDK—FlagSync auto-populates the rule creation UI with these attributes for targeting. ```typescript theme={null} import { FlagSyncFactory } from '@flagsync/js-sdk'; const factory = FlagSyncFactory({ sdkKey: 'your-sdk-key', core: { key: 'user123', attributes: { jobTitle: 'QA Tester', isVIP: false } } }); ``` In a real app, these values (e.g., `user123`, `QA Tester`) are typically sourced from a user or session object. User segment targeting rule creation

Use `key` instead of `custom` to target the unique identifier (e.g., `user123`). ### Percentage Rollouts Distribute variants by percentage to control rollout scope and risk. FlagSync simplifies this with: * **Allocation**: Set splits (e.g., 25% each for four variants)—must total 100%. * **Use Case**: Allow gradual releases—e.g., 10% rollout to test stability. Users are bucketed deterministically, ensuring they receive the same variant consistently during the rollout. Flag creation form filled out

## Next Steps * Create a flag in [Creating Flags](/flags/create-flag). * Learn about metrics in [Metrics: Overview](/metrics/overview). * Run experiments in [Creating Experiment](/experiments/create-experiment). # Introduction Source: https://docs.flagsync.com/getting-started/introduction FlagSync is a simple, powerful platform for feature management and A/B/n testing. Hero Light

## Welcome to FlagSync FlagSync lets teams control rollouts, run experiments, and optimize with confidence using these essentials: Roll out features safely and switch them off instantly if needed. Test variations to find what drives the best results. ## Next Steps * Learn the basics in [Key Concepts](/getting-started/key-concepts). * Start with [Quickstart: Overview](/quickstarts/overview). # Key Concepts Source: https://docs.flagsync.com/getting-started/key-concepts Learn the essentials to kick off your feature management journey. ## FlagSync Basics Master the building blocks of feature control: A feature flag toggles features on or off without redeploying code. Hide `beta-feature` until ready, then enable for testing. Group users by attributes (e.g., location, role) to target flags or experiments. Show `beta-feature` to premium users in Boston. Release features gradually to a fraction of users for safe testing. Enable `beta-feature` for 10% of users, scale up if stable. ## Data and Insights Understand how to measure your features: Record flag evaluations automatically when `flag()` is called. `flag('beta-feature')` logs if a user saw `Enabled`. Track user actions (e.g., clicks) via the SDK’s `track()` function. Log a `purchase_event` to measure `beta-feature`’s impact. Measure flag impact (e.g., conversion rates) using events and impressions. Track `beta-feature`’s click-through rate for engagement. Compare feature variations to measure impact via metrics. Test two `beta-feature` designs and pick the winner by clicks. ## How FlagSync Works FlagSync’s components work together to launch and optimize features—like a new checkout flow—with data-driven confidence: FlagSync lets you roll out, measure, and optimize features in one seamless flow. ## Next Steps * Set up a flag in [Quickstart: Create a Flag](/quickstarts/flag). * Explore [Experiments](/experiments/overview). # Generating Impressions Source: https://docs.flagsync.com/impressions/generating Learn how FlagSync captures impressions to track feature flag exposure. ## How Are Impressions Generated? Impressions are automatically logged each time a flag is evaluated with the `flag` function, capturing the variant served to the user. ```typescript theme={null} client.flag(flagKey: string, defaultValue?: T); ``` ### Example For a flag like `signup-cta` with variants `Join Now`, `Register`, `Sign Up`: ```typescript theme={null} const value = client.flag('signup-cta', 'Register'); console.log(`signup-cta is ${value}`); ``` If **User ABC** is shown `Join Now`, an impression is logged *"User ABC saw `Join Now` for `signup-cta`."* ## Next Steps * Review impressions in [Impressions: Overview](/impressions/overview). * Set up flags in [Quickstart: Integrate the SDK](/quickstarts/sdk). * Explore [Experiments](/experiments/overview) for variant testing. # Overview Source: https://docs.flagsync.com/impressions/overview Track feature flag exposure in FlagSync to measure flag variant impact. ## What Are Impressions? Impressions record which flag variant a user sees—e.g., "Join Now" or "10% discount". They serve as the foundation for measuring feature impact in [Metrics](/metrics/overview) and [Experiments](/experiments/overview). ## Why Impressions Matter Pair with events to calculate conversion rates (e.g., sign-ups per impression). Enable variant comparison—e.g., does "Sign Up" outperform "Register"? Provide exposure data for debugging or rollout validation. ## How to Access * **View All**: See real-time activity on the [Events Dashboard](https://www.flagsync.com/dashboard/events/). Live Events Dashboard showing tracked events

* **View for a Flag**: Go to the [Flags Dashboard](https://www.flagsync.com/dashboard/flags/), select your flag (e.g., `signup-cta`), and click "Live Tail". ## Next Steps * Learn more in [Generating Impressions](/impressions/generating). * Set up flags in [Quickstart: Integrate the SDK](/quickstarts/sdk). * Explore [Events](/events/overview) for action tracking. # Examples Source: https://docs.flagsync.com/metrics-numeric/examples See how numeric metrics aggregate event values in FlagSync. ## Examples For a `discount-rate` flag with variants 0%, 20%, and 30%, impressions are logged when users see the applied discount, and events are tracked when they complete a purchase. ```tsx checkout-page.tsx theme={null} // Step 1: Log impression const discountRate = client.flag('discount-rate', 0.00); // Step 2: Track the purchase event const item = { productId: '0x123', price: 50.00, discount: discountRate // 0.3 (30%) }; client.track('purchase_event', null, item); ``` ### Average or Sum Purchase Price Let’s explore how an average or sum metric tracks purchase value for the `discount-rate` flag, testing which variant drives higher spending: Select `purchase_event` and enter `price` as the value field to aggregate: * [Events](/events/overview) auto-populate from `client.track()`. * [Property Events](/events/tracking#property-events) let you derive multiple metrics from one `purchase_event`. Metric event value selection

Aggregate by average or sum: Numeric metric aggregation selection

See a simulated FlagSync dashboard for the `discount-rate` experiment, testing how discount variants impact average purchase value: Simulated dashboard showing average purchase value for discount-rate variants

Simulated dashboard showing average purchase value for discount-rate variants

* **Trend**: The chart shows 30% (pink) leading at \$147 average purchase value, followed by 20% (orange) at \$108, with 0% (blue) at \$83. The 30% variant is the clear winner, increasing average purchase value by 76.4% over the baseline. ## Next Steps * Learn concepts in [Numeric Metrics: Overview](/metrics-numeric/overview). * Explore [Experiments](/experiments/overview). # Overview Source: https://docs.flagsync.com/metrics-numeric/overview Aggregate event values per user in FlagSync to measure feature impact. ## What Are Numeric Metrics? Numeric metrics aggregate event values per user—counting occurrences, summing totals, or averaging amounts—to measure feature impact. Unlike conversion rates, they focus on raw values (e.g., purchase prices, session times). Equal weighting across users in [Experiments](/experiments/overview) is ensured by averaging data per user, preventing heavy user bias from skewing results. ## Aggregation Methods Numeric metrics require an aggregation method to process event data: The average count of events per user. **Example**: Average Purchase Count per User * *If User A makes 3 purchases and User B makes 1, the metric averages to 2.* * *(3 + 1) / 2 = 2* **Use Case**: See if a feature increases purchase frequency (e.g., via a new layout). Returning users raise the average, new users lower it. Other examples: The average number of video plays, help requests per user. The average sum of event values per user. **Example**: Average Total Spend per User * *If User A spends \$100 and User B spends \$50, the metric averages to \$75.* * *(\$100 + \$50) / 2 = \$75* **Use Case**: Test if a feature boosts total spend (e.g., via upselling). Frequent users increase the sum, new users dilute it. Other examples: The average total time spent watching videos, pages visited on your site. The average of per-user event averages. **Example**: Average Purchase Price per User * *If User A’s purchases average \$40 and User B’s average \$60, the metric is \$50.* * *(\$40 + \$60) / 2 = \$50* **Use Case**: Check if a feature changes typical purchase value (e.g., via a discount). The average reflects per-user values—new users’ data can shift it up or down based on their behavior. Other examples: The average time on site per session, items added to the cart. ## Next Steps * See examples in [Examples](/metrics-numeric/overview). * Track events in [Quickstart: Send Events](/quickstarts/events). * Explore [Conversion Rate Metrics](/metrics/conversion-rate). # Conversion Rate Source: https://docs.flagsync.com/metrics/conversion-rate Measure user actions as a percentage of flag exposure in FlagSync. ## What Are Conversion Rate Metrics? Conversion rate metrics measure the percentage of users who perform an action after seeing a flag variant—calculated as: ``` (# of events / # of impressions) = % conversion rate ``` They track how often a specific event (e.g., a `signup-complete`) follows a flag impression, revealing which variants drive behavior in [Experiments](/experiments/overview). ## Example: Sign-Up Conversion Let’s explore how a conversion rate metric tracks sign-ups for the `signup-cta` flag, testing which button text variant (`Join Now`, `Register`, or `Sign Up`) drives the most conversions: Logs an impression each time the `flag()` function gets the text variant: ```jsx theme={null} // landing-page.tsx const value = client.flag('signup-cta', 'Register'); ``` Track the `signup-complete` event when a user signs up: ```typescript theme={null} // register-page.tsx ``` * In an [Experiment](/experiments/overview), FlagSync links these `signup-complete` events to `signup-cta` impressions to calculate conversion rates. * If User ABC sees `Join Now` and later triggers `signup-complete`, FlagSync records it as a successful conversion. **Timing matters**: Only events tied to prior impressions count—FlagSync ensures the user saw the variant before acting, ensuring accurate cause-and-effect. ### Sample Conversion Results Here’s a hypothetical outcome of the `signup-cta` experiment, showing how many users sign up after seeing each variant (`Join Now`, `Register`, `Sign Up`) with 100 users per variant: | Variant | Impressions | Sign Up Completions | Conversion Rate | | -------- | ----------- | ------------------- | --------------- | | Register | 100 | 15 | 15% | | Sign Up | 100 | 25 | 25% | | Join Now | 100 | 35 | 35% | **Insight**: Join Now leads with 35%—it’s the most effective at driving sign-ups. ### Example Dashboard Insights See a simulated FlagSync dashboard for the `signup-cta` experiment, testing how button copy variants (`Join Now`, `Register`, `Sign Up`) impact sign-up conversions over time: Flag creation form filled out

* **Trend**: The chart shows `Join Now` (pink) leading over time, followed by `Sign Up` (orange), with `Register` (blue) trailing—confirming our example’s insight. ## Next Steps * Track events in [Quickstart: Send Events](/quickstarts/events). * Define metrics in [Quickstart: Define Metrics](/quickstarts/metrics). * Test in [Quickstart: Create an Experiment](/quickstarts/experiment). * Explore [Numeric Metrics](/metrics-numeric/overview). # Overview Source: https://docs.flagsync.com/metrics/overview Measure feature impact in FlagSync with event-driven metrics. ## What Are Metrics? Metrics show how feature rollouts affect users—like clicks, sign-ups, or purchases—by analyzing events and impressions. They’re essential for pinpointing optimal flag settings and driving data-backed experiments. ## Defining a Metric Metrics start with [Events](/events/overview) you’ve tracked (e.g., `signup-cta-click`). Here’s what defines them: Follow along in the Dashboard, click "+" next to **Metrics** or go to [Create a Metric](https://www.flagsync.com/dashboard/metrics/new/). ### Measurement Type Choose how to analyze data—each type powers experiments differently: Measures the percentage of users acting after seeing a flag (events ÷ impressions). Aggregates event values per user—e.g., counts, sums, or averages. ### Aggregation Method (Numeric Only) For numeric metrics, pick how to process values: * **Count**: Number of events per user (e.g., purchases). * **Sum**: Total value per user (e.g., spend). * **Average**: Average value per event (e.g., price). * See [Numeric Metrics](/metrics-numeric/overview) for details. ### Metric Impact Set the goal—does success mean more or less? This guides how results are interpreted in [Experiments](/experiments/overview): Higher values are better—e.g., more `signup-complete` events for registrations. Lower values are better—e.g., fewer `error-occurred` events for stability. ## Next Steps * Explore types in [Conversion Rate](/metrics/conversion-rate) or [Numeric](/metrics-numeric/overview). * Track events in [Quickstart: Send Events](/quickstarts/events). * Define a metric in [Quickstart: Define Metrics](/quickstarts/metrics). * Test with [Experiments](/experiments/overview). # Send Events Source: https://docs.flagsync.com/quickstarts/events Track user actions in FlagSync to measure feature impact. ## Sending Events Events track user actions like clicks, sign-ups, or purchases. In this third step, we’ll track two events for the `new-feature` flag (from [Quickstart: Set Up a Flag](/quickstarts/flag)) to test if the new layout boosts conversions in an experiment. * `Sign-Up CTA Click` (sign-up clicks within the layout (`Disabled` / `Enabled`) * `Sign-Up Complete` (completed sign-ups). Ensure the SDK is initialized (from [Quickstart: Integrate the SDK](/quickstarts/sdk)): ```typescript theme={null} import { FlagSyncFactory } from '@flagsync/js-sdk'; const factory = FlagSyncFactory({ sdkKey: 'your-sdk-key', core: { key: 'userId_0x123' } }); const client = factory.client(); await client.waitForReady(); ``` Add a `track()` call when users click the CTA: ```tsx React theme={null} ``` ```javascript Vanilla JS theme={null} document .getElementById('signup-btn') .addEventListener('click', () => { client.track('signup-cta-click'); }); ``` Log when users complete registration: ```typescript theme={null} function onSignUpComplete() { client.track('signup-complete'); } ``` * In the Dashboard, Click "+" next to **Metrics** or go to [Create a Metric](https://www.flagsync.com/dashboard/metrics/new/). * Check that `signup-cta-click` and `signup-complete` appear in the "Select Event" dropdown—they’ll auto-populate from these track calls. * You also also watch [Live Events](https://www.flagsync.com/dashboard/events/) from the Dashboard. ## Next Steps Events are flowing—now use them: * Define metrics in [Quickstart: Define Metrics](/quickstarts/metrics). * Learn more in [Events](/events/overview). # Create an Experiment Source: https://docs.flagsync.com/quickstarts/experiment Get up and running with FlagSync Experiments in minutes. ## Creating Your First Experiment Let’s tie it all together—using the `new-feature` flag ([Quickstart: Set Up a Flag](/quickstarts/flag)), its impressions ([Quickstart: Integrate the SDK](/quickstarts/sdk)), events ([Quickstart: Send Events](/quickstarts/events)), and metrics ([Quickstart: Define Metrics](/quickstarts/metrics))—to test if the new layout drives more sign-ups. In the dashboard, click "+" next to **Experiments** or go to [Create an Experiment](https://www.flagsync.com/dashboard/experiments/new/). * **Name**: New Feature Layout Test * **Hypothesis**: The `new-feature` layout will boost user sign-up conversions. Experiment details form

Add the metrics from [Quickstart: Define Metrics](/quickstarts/metrics): * `Sign-Up CTA Click`: Tracks sign-up clicks (conversion rate). * `Sign-Up Complete`: Tracks sign-ups (conversion rate). Experiment metrics form

Select the `new-feature` flag from [Quickstart: Set Up a Flag](/quickstarts/flag). Experiment flag form

Choose `Disabled` as the baseline (the old layout). Experiment baseline form

Split traffic across variants: * **Enabled**: 50% * **Disabled**: 50% Percentages must total 100%. Experiment rollout form

Click "Create Experiment" to save. From the **New Feature Layout Test** page, click **Start** to begin. ## Next Steps Your experiment is live—now see the results: * Monitor outcomes in [Monitoring and Analysis](/experiments/monitoring). * Review setup in [Events](/quickstarts/events) or [Metrics](/quickstarts/metrics). # Set Up a Flag Source: https://docs.flagsync.com/quickstarts/flag Get up and running with FlagSync in minutes. ## Creating Your First Feature Flag Go to [flagsync.com](https://flagsync.com) and sign in or start your 14-day free trial. In the Dashboard, click "+" next to **Feature Flags** or go to [Create a Flag](https://www.flagsync.com/dashboard/flags/new/). * Name: `New Feature` * Type: `Boolean` * Variants: `Enabled` and `Disabled` Flag creation form filled out

Click "Create Flag" to save. From the **New Feature** flag page, switch on the flag to serve the `Enabled` variant. Flag creation form filled out

## Next Steps Your flag is set—now bring it into your app: * Add it with [Quickstart: Integrate the SDK](/quickstarts/sdk). * Explore [User Segments](/flags/targeting-and-rollouts#user-segments) for targeted rollouts. * Try [Percentage Rollouts](/flags/targeting-and-rollouts#percentage-rollouts) for gradual releases. # Define Metrics Source: https://docs.flagsync.com/quickstarts/metrics Aggregate events into insights for FlagSync. ## Defining Metrics Metrics track how features affect users—like clicks or sign-ups—by correlating [events](/quickstarts/events) and [flag impressions](/quickstarts/flag) from users. Let’s create two: * `Sign-Up CTA Click` (sign-up clicks within the layout). * `Sign-Up Complete` (completed sign-ups). We’ll use these in an experiment with the `new-feature` flag (`Enabled`/`Disabled`) to test if the new layout boosts conversions. In the Dashboard, click "+" next to **Metrics** or go to [Create a Metric](https://www.flagsync.com/dashboard/metrics/new/). * **Name**: Enter `Sign-Up CTA Click`. * **Description** (optional): Add “Tracks clicks on the sign-up CTA button.” Metric details form

* Select `signup-cta-click` from the dropdown. Metric event form

* This auto-populates from SDK calls like: ```typescript theme={null} client.track('signup-cta-click'); ``` Events appear automatically—no need to predefine them. Track what matters in code, and it’ll show up here. Select "Conversion Rate". Metric type form

Measures click events vs. impressions (e.g., 100 clicks / 1,000 views = 10%) Select "Increase". Metric type form

We want more clicks compared to the baseline (Register). Click "Create Metric" to save. Repeat the process for the `Sign-Up Complete` metric: * **Name**: Enter `Sign-Up Complete`. * **Description** (optional): Add “Tracks sign-up completion.” * **Select Event**: `signup-complete` * **Type**: Conversion Rate * **Impact**: Increase ## Next Steps Metrics are set—now use them: * Test variants in [Quickstart: Create an Experiment](/quickstarts/experiment). * Check results in [Monitoring and Analysis](/experiments/monitoring). * Learn more in [Metrics](/metrics/overview). # Overview Source: https://docs.flagsync.com/quickstarts/overview Walk through FlagSync’s core workflow with these step-by-step guides. ## Get Started with FlagSync These Quickstarts walk you through setting up and testing a feature in FlagSync, from creating a flag to analyzing experiment results. Follow them in order to build a full experiment—or jump to what you need. Create your first feature flag in the dashboard. Add FlagSync to your app with the JavaScript SDK. Track user actions like clicks, sign-ups, or purchases. Measure sign-ups conversions, average purchase value, or other outcomes. Test variants like `Register` vs. `Join Now`. ## Next Steps New to feature flags? Start with [Key Concepts](/getting-started/key-concepts) for the basics. # Integrate the SDK Source: https://docs.flagsync.com/quickstarts/sdk Integrate the FlagSync JavaScript SDK to use your feature flags in code. ## Using the JavaScript SDK With your `new-feature` flag created, bring it into your app with the JavaScript SDK. Check out our [other SDKs](/sdks/overview) for **Node.js**, **Next.js**, **React**, and more. Install the SDK with your preferred package manager: ```bash npm theme={null} npm install @flagsync/js-sdk npm install -D @flagsync/cli ``` ```bash yarn theme={null} yarn add @flagsync/js-sdk yarn add -D @flagsync/cli ``` ```bash pnpm theme={null} pnpm add @flagsync/js-sdk pnpm add -D @flagsync/cli ``` Create a client with your SDK key and a unique user identifier, such as user ID or email. ```typescript theme={null} import { FlagSyncFactory } from '@flagsync/js-sdk'; const factory = FlagSyncFactory({ sdkKey: 'your-sdk-key', // Replace with your SDK key core: { key: 'userId_0x123' // Unique identifier } }); const client = factory.client(); ``` Get your SDK key from your [Workspace settings](https://www.flagsync.com/dashboard/settings/organization/workspaces/) for the target Environment. Ensure the SDK is ready before checking flags: ```typescript theme={null} await client.waitForReady(); console.log('SDK is ready!'); ``` Get the `new-feature` flag’s value: ```typescript theme={null} const value = client.flag('new-feature'); console.log(value); ``` Calling `flag()` automatically logs an impression, tracking which variant each user sees—vital for metrics later. Here's the full example: ```typescript theme={null} import { FlagSyncFactory } from '@flagsync/js-sdk'; const factory = FlagSyncFactory({ sdkKey: 'your-sdk-key', // Replace with your SDK key core: { key: 'userId_0x123' // Unique identifier } }); const client = factory.client(); await client.waitForReady(); console.log('SDK is ready!'); const value = client.flag('new-feature'); console.log(value); ``` ## Next Steps The SDK is ready—now track user actions: * Send events in [Quickstart: Send Events](/quickstarts/events). * Explore targeting in [Targeting & Rollouts](/flags/targeting-and-rollouts). * See other options in [other SDKs](/sdks/overview) # CLI Source: https://docs.flagsync.com/sdks-cli/cli Use FlagSync’s CLI to generate TypeScript type definitions. ## Overview The `@flagsync/cli` generates TypeScript type definitions based on your flag configurations. Latest version available on npm Explore the source code on GitHub ## Installation Install the CLI with your preferred package manager: ```bash npm theme={null} npm install -D @flagsync/cli ``` ```bash yarn theme={null} yarn add -D @flagsync/cli ``` ```bash pnpm theme={null} pnpm add -D @flagsync/cli ``` ## Quickstart 1. **Authenticate with your FlagSync account:** ```bash terminal theme={null} npx flagsync login ``` 2. **Generate type definitions:** ```bash terminal theme={null} $ npx flagsync generate ✓ Select your SDK: React i Found 4 flags ✓ Generated flag types, saved to "gen/flags.d.ts" ``` 3. **Use in your code:** ```typescript app.jsx theme={null} import React from 'react'; import { useFlag } from '@flagsync/react-sdk'; function MyComponent() { // TypeScript knows this returns a boolean const { value: isEnabled } = useFlag('show-new-feature'); // TypeScript knows this returns "light" | "dark" | "auto" const { value: theme } = useFlag('theme-preference'); return (

{isEnabled && }

); } ``` The generated types will be saved to `gen/flags.d.ts`. Most default `tsconfig.json` setups include this file via a broad pattern like `**/*.ts`, but if you're using a custom config, make sure it's covered by the include array: `"include": ["**/*.ts"]` ## Generated Types The CLI generates TypeScript types based on your flag configurations. ```typescript Boolean Flags theme={null} // For boolean flags declare module "@flagsync/node-sdk" { export interface FeatureFlags { "enable-dark-mode": boolean; "show-beta-features": boolean; } } ``` ```typescript String Flags theme={null} // For string flags with variants declare module "@flagsync/react-sdk" { export interface FeatureFlags { "theme-color": "blue" | "red" | "green"; "welcome-message": "hello" | "welcome" | "hi there"; } } ``` ```typescript Number Flags theme={null} // For number flags with variants declare module "@flagsync/nestjs-sdk" { export interface FeatureFlags { "max-items": 10 | 25 | 50 | 100; "timeout-duration": 1000 | 5000 | 10000; } } ``` ```typescript JSON Flags theme={null} // For JSON/object flags declare module "@flagsync/nextjs-sdk" { export interface FeatureFlags { "config-object": object; "feature-settings": object; } } ``` ## Integration Examples A few integration examples for FlagSync's SDKS. Supported SDKs: * [`@flagsync/react-sdk`](/sdks-client-side/react) * [`@flagsync/js-sdk`](/sdks-client-side/javascript) * [`@flagsync/node-sdk`](/sdks-server-side/nodejs) * [`@flagsync/nextjs-sdk`](/sdks-server-side/nextjs) * [`@flagsync/nestjs-sdk`](/sdks-server-side/nestjs) ### `@flagsync/react-sdk` ```typescript theme={null} import React from 'react'; import { useFlag } from '@flagsync/react-sdk'; function MyComponent() { // TypeScript knows this returns a boolean const { value: isEnabled } = useFlag('show-new-feature'); // TypeScript knows this returns "light" | "dark" | "auto" const { value: theme } = useFlag('theme-preference'); return (

{isEnabled && }

); } ``` ### `@flagsync/nextjs-sdk` ```jsx page.tsx theme={null} import { welcomeMessage } from '@/lib/flagsync'; export default function HomePage() { // TypeScript knows this returns "hello" | "welcome" | "hi there" const message = await welcomeMessage(); return

sdk).