Contentful Statsig Integration Blog Page Example

This Repository serves as an example of how you can integrate your application to use Statsig's Contentful Integration. Before proceeding, follow the guide in these docs to setup your Contentful space to be configured with Statsig.

Integration Instructions

This example shows how you can run experiments on page - Blog posts, serving different component - Rich images to users through a Statsig experiment automatically generated via Contentful.

Make sure to checkout Contentful's Next.js Blog Starter Template to get your test Blog Page app started first.

Setup a Statsig SDK

You will need a Statsig SDK to get your Statsig experiment assignment for a given user. To add a Statsig js-client sdk to your Blog Page app, run the command:

yarn add @statsig/js-client

Now, add a client SDK key as a STATSIG_SDK_KEY in your .env file (see .env.example). You can setup an example statsig client following this changeset as a guide.

Add Experiment Fields to GraphQL

Now you can setup your experiments to be pulled through GraphQL. Follow this changeset as a guide to add a StatsigExperimentFields fragment, and add to your Content Type's graphql files. Then, to generate the types in graphql, run the command:

yarn graphql-codegen:generate

Add Experiment to Content Types

Now that the graphql fragments are setup, we can add our experiment to each place the content types are used. In this changeset, we will replace the Featured Image of our blogs with the content pulled from the associated Statsig experiemnt for all blogs on the landing page. This is highly customizable, and can be adapted to fit your actual app's exact needs. this changeset also outlines the mapping between the experiment in Contentful, and the associated parameter of the experiment in Statsig.