Description
++ This is an example front-end app that uses Contentful as it's Content + Management System. In Contentful there is a Growthbook app plugin that + once installed, will let your content creators create experiments on + their own. This app has an example of how you can take a `Growthbook + Experiment` content model and show the right variation to the user. +
+Configuration
+-
+
- Setting up Growthbook +
- + First, create a free{" "} + + GrowthBook Account + {" "} + and add a new SDK Connection, selecting JavaScript (or React) as + the language. + +
- + {" "} + Create a new{" "} + + datasource + {" "} + and connect it to your data warehouse + +
- + {" "} + Go to Settings->API keys and create a key with an + `admin` role. (This is needed for Contentful to connect to + Growthbook and add experiments and feature flags.) + +
- Setting up Contentful +
- + Next, create a free{" "} + + Contentful Account + {" "} + +
- + Click the gear icon in the upper right and go to API keys{" "} + and create a new API key. (This is used by your front-end + app/this example app to connect to Contentful to get the + content.) + +
- + Also go to the gear icon and click on CMA tokens and + create a new token. (This is used by a script within this + example app to create example Content Models and Content within + Contentful without you having to set it up manually.) + +
-
+ Add the Growthbook App to your Contentful Space by going to{" "}
+
Apps->Marketplace->A/B tests->Growthbook{" "} + and clicking Install. +
On the configuration page, enter the URL of your + Growthbook instance, the Api Key from step 1c. and the + Datasource from step 1b. This will create a new content model + calledGrowthbook Experimentthat you can use to + create experiments in Contentful. +
+ - Setting up this example app +
-
+ Next, in this example root, copy
.env.local.example{" "} + to.env.localand fill in the values from your + GrowthBook SDK Connection (step 1a), the Contentful API key info + (step 2b), and the Contentful CMA token (step 2c). +
+ -
+ In the terminal run:{" "}
+
npm run create-contentful-content. This will create + theGrowthbook Example Pageand the{" "} +Growthbook Example ProductContent Models in + Contentful. It will also create a{" "} +Growthbook Example Product Pageand four products + as Contentful Content. +
+ -
+ Run
npm run devand go to the{" "} + + product page + {" "} + to see the contentful content. +
+ - Pretend to be a Content Editor creating a GB A/B test. +
- + In the Contentful app go to the{" "} + Growthbook Example Product Page click the three dots next + to the Control t-shirt in the Products collection and + click Remove. + +
- + Click Add content and select Growthbook Experiment{" "} + as the Content Type.{" "} + +
-
+ Enter
Contentful Examplefor the Experiment name. +
+ - + Click "Add Variation" and select the Link an existing variant + option. Select the Control t-shirt + +
- + Click "Add Variation" and select the Link an existing variant + option. Select the Variant t-shirt + +
- + The Create New Experiment should now be clickable. Click + it. + +
- Click start experiment. +
- + Click publish. + +
- Click <- to go back to the Product Page +
- + Click Publish on the Product Page + +
- + Go to the{" "} + + product page + {" "} + to see which content Growthbook has chosen to show. As this + example initialized growthbook with a random targeting attribute + id, it pretends each page load is a new user. You can refresh a + few times to see Growthbook serve the control t-shirt sometimes + and the variant t-shirt the other times. + +
-
+
-
+
-
+
-
+
How it Works
++ This example uses server-side Growthbook. For client-side growthbook + see the next-js example. +
+
+ The code in src/app/lib/growthbookExperiment.ts shows
+ the GraphQL to get the Growthbook Experiment content model
+ which contains the featureFlagId and the{" "}
+ variationsCollection. The getVariation{" "}
+ function show how to get the variation from it. Basically calling
+ gb.getFeatureValue with the featureFlagId will return
+ the index of the variation to show in the{" "}
+ variationsCollection.
+
+ The src/app/pages/[slug]/page.tsx file contains the
+ growthbook object and initialization.
+
+ Server-fetched feature flags and experiment definitions are
+ persisted in the Next.js data cache for 60 seconds (configurable in{" "}
+ src/app/lib/growthbookServer.ts). For faster updates,
+ there is a POST /revalidate route handler that can be
+ triggered from an SDK Webhook in GrowthBook.
+
+ Data about which variation the user saw is sent to the client where
+ an analytics event is triggered (or console.log in these examples).
+ This happens via the GrowthBookTracking client
+ component defined in src/app/lib/GrowthBookTracking.
+