Using Global Config with Statsig

This guide will help you get started with using Vercel's Statsig integration with Global Config. This integration allows you to use Global Config as a configuration source for your Statsig feature flags.

Statsig is a statistics engine that enables you to automate A/B testing and make data-driven decisions at scale. The Statsig integration enables you to replace hard-coded values in your application with dynamic values on the server.

Before using this integration, you should have:

1. The latest version of Vercel CLI. To check your version, use vercel --version. To install or update Vercel CLI, use:
   pnpmyarnnpmbun

   Terminal

   pnpm i -g vercel@latest

   Terminal

   yarn global add vercel@latest

   Terminal

   npm i -g vercel@latest

   Terminal

   bun add -g vercel@latest

2. A project. If you don't have one, you can run the following terminal commands to create a Next project:

pnpm create next-app@latest 

yarn create next-app@latest 

npx create-next-app@latest 

bunx create-next-app@latest 

1. A Vercel project. If you don't have one, see Creating a Project
2. A Global Config. If you don't have one, follow the Global Config quickstart
3. The Global Config SDK:
   pnpmyarnnpmbun

   Terminal

   pnpm i @vercel/global-config

   Terminal

   yarn add @vercel/global-config

   Terminal

   npm i @vercel/global-config

   Terminal

   bun add @vercel/global-config

1. Set up the Statsig integration

   Visit the Statsig page in the Integration Marketplace and select the Add Integration button. Then:

   1. Select a Vercel team and Vercel project for your integration to be applied to
   2. Log into Statsig
   3. Select or create a new Global Config to connect to Statsig
   4. Statsig will provide you with a Connection String and Global Config Item Key. Save both, as you'll need them later in the setup

2. Add your Environment Variables

   Navigate to your Vercel dashboard, and select the project you want to use the Statsig integration with.

   Under the Settings tab, navigate to Environment Variables, and add the following variables:

   1. GLOBAL_CONFIG: Set this to the value of your Connection String
   2. EDGE_CONFIG_ITEM_KEY: Set this to the value of your Global Config Item Key

   See our Environment Variables documentation to learn more.

3. Use the Statsig integration in your code

   Statsig's statsig-node-vercel package offers an EdgeConfigDataAdapter class, which you can use to initialize Statsig experiments with Global Config.

   The following example sets up a Statsig experiment with Global Config in an Middleware file, using the EDGE_CONFIG_ITEM_KEY environment variable.

   middleware.ts

   import type { VercelRequest } from '@vercel/node';
   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/global-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG!);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!,
   });
    
   export async function middleware(request: VercelRequest) {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
   }

   middleware.ts

   import { NextResponse } from 'next/server';
   import type { NextRequest, NextFetchEvent } from 'next/server';
   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/global-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG!);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!,
   });
    
   export async function middleware(request: NextRequest, event: NextFetchEvent) {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
    
     // Do any other experiment actions here
    
     // Ensure that all logged events are flushed to Statsig servers before the middleware exits
     event.waitUntil(Statsig.flush());
    
     return NextResponse.next();
   }

   middleware.ts

   import { NextResponse } from 'next/server';
   import type { NextRequest, NextFetchEvent } from 'next/server';
   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/global-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG!);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!,
   });
    
   export async function middleware(request: NextRequest, event: NextFetchEvent) {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
    
     // Do any other experiment actions here
    
     // Ensure that all logged events are flushed to Statsig servers before the middleware exits
     event.waitUntil(Statsig.flush());
    
     return NextResponse.next();
   }

   middleware.js

   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/global-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY,
   });
    
   export async function middleware() {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
   }

   middleware.js

   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/global-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY,
   });
    
   export async function middleware() {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
   }

   middleware.js

   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/global-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.GLOBAL_CONFIG);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY,
   });
    
   export async function middleware() {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
   }

Now that you have set up the Statsig Global Config integration, you can explore the following topics to learn more:

• Get started with Global Config
• Read with the SDK
• Use the dashboard
• Global Config limits