-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[flags-sdk] Add README for statsig example (#1091)
### Description This PR adds a README to the statsig example ### Demo URL <!-- Provide a URL to a live deployment where we can test your PR. If a demo isn't possible feel free to omit this section. --> ### Type of Change - [ ] New Example - [ ] Example updates (Bug fixes, new features, etc.) - [ ] Other (changes to the codebase, but not to examples) ### New Example Checklist - [ ] 🛫 `npm run new-example` was used to create the example - [ ] 📚 The template wasn't used but I carefuly read the [Adding a new example](https://github.com/vercel/examples#adding-a-new-example) steps and implemented them in the example - [ ] 📱 Is it responsive? Are mobile and tablets considered? --------- Co-authored-by: Dominik Ferber <[email protected]>
- Loading branch information
Showing
1 changed file
with
69 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,69 @@ | ||
# Statsig Flags SDK Example | ||
|
||
This example uses [Statsig](https://vercel.com/marketplace/statsig) for feature flags with the [Flags SDK](https://flags-sdk.dev) along with the `@flags-sdk/statsig` [Statsig adapter](https://flags-sdk.dev/docs/api-reference/adapters/statsig) and the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar). | ||
|
||
## Demo | ||
|
||
[https://flags-sdk-statsig.vercel.app/](https://flags-sdk-statsig.vercel.app/) | ||
|
||
## How it works | ||
|
||
This demo uses two feature gates on Statsig to control the visibility of two banners on the page. | ||
Both gates are configured to show/hide each banner 50% of the time. | ||
|
||
Once you visit the page, you can see a variation of both/one/none of the banners. | ||
Since this example is using a stable id to identify users, you will see the same variation all the time. | ||
|
||
To test different variations, you can use the Dev Tools at the bottom to reset the stable id and reload the page. | ||
This allows you to test different variations of the banners. | ||
|
||
If you deployed your own and configured the feature gates on Statsig, you can also use the [Flags Explorer](https://vercel.com/docs/workflow-collaboration/feature-flags/using-vercel-toolbar) to test different variations by creating overrides. | ||
|
||
## Deploy this template | ||
|
||
The easiest way to get started with Statsig is through the native integration in the [Vercel Marketplace](https://vercel.com/marketplace/statsig). | ||
|
||
[](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/flags-sdk/experimentation-statsig&env=FLAGS_SECRET&envDescription=The FLAGS_SECRET will be used by the Flags Explorer to securely overwrite feature flags. Must be 32 random bytes, base64-encoded. Use the generated value or set your own.&envLink=https://vercel.com/docs/workflow-collaboration/feature-flags/supporting-feature-flags#flags_secret-environment-variable&project-name=statsig-flags-sdk-example&repository-name=statsig-flags-sdk-example&products=[{\"integrationSlug\":\"statsig\",\"productSlug\":\"statsig\",\"type\":\"integration\",\"protocol\":\"experimentation\"}]) | ||
|
||
### Step 1: Link the project | ||
|
||
In order to use the Flags Explorer, you need to link the project on your local machine. | ||
|
||
```bash | ||
vercel link | ||
``` | ||
|
||
Select the project from the list you just deployed. | ||
|
||
### Step 2: Pull all environment variables | ||
|
||
This allows the Flags SDK and the Flags Explorer to work correctly, by getting additional metadata. | ||
|
||
```bash | ||
vercel env pull | ||
``` | ||
|
||
### Step 3: Create feature flags on Statsig | ||
|
||
Head over to the [Statsig Console](console.statsig.com) and create the two feature flags under Feature Gates: | ||
|
||
- `Summer Sale` with the gate id `summer_sale` | ||
- `Free Shipping` with the gate id `free_delivery` | ||
|
||
You can also find the gate ids in the `flags.ts` file. | ||
|
||
### Step 4: Configure the Feature Gates | ||
|
||
Select the `Free Delivery` and `Free Shipping` feature gates and configure them on the Statsig Console. | ||
|
||
Create a new rule by clicking on "+ Add New Rule" and set the percentage to 50%. | ||
|
||
After that, click on "Save" at the bottom right corner. | ||
|
||
### Step 5 (optional): Set additional environment variables | ||
|
||
If you provide the `STATSIG_CONSOLE_API_KEY` and `STATSIG_PROJECT_ID` environment variables, the Flags Explorer will fetch additional metadata from the Statsig API. | ||
|
||
This will show the description (if set) and displays a link to the feature gate on the Statsig Console. | ||
|
||
You can find both values in the [Statsig Console](https://console.statsig.com/settings/project). |