Skip to main content

Guide to CMS Integrations like Contentful

Using Statsig with a CMS

One fairly common question we get is around how to use Statsig with an existing CMS. While we also offer a no-code solution - Sidecar, there are clever ways you can set up your code to integrate your CMS and Statsig so you can write code once, and then run experiments on arbitrary combinations of parameters in the future.

We recommend using Layers to wire this up, so take some time to read up before continuing.

info

Layers are a unit of mutual exclusion between experiments in Statsig. Every user participates in only one experiment in a layer at any given time. As such, we recommend you set up a layer for each surface you will be experimenting on with the help of your CMS

For the remainder of this guide, we will assume you are experimenting on a single surface - but repeat these steps if you plan to experiment on separate surfaces like your landing page, product page, blog, etc.

For the sake of example, let's assume we are parameterizing the Statsig landing page to plug in our CMS.

Screen Shot 2022-08-29 at 8 26 09 PM

First, lets create a layer. Navigate to "Experiments" in the left hand column, and then "Layers" in the title bar:

Screen Shot 2022-08-29 at 8 21 39 PM

Here, we'll create one for all content or parameters we want to experiment with on our landing page, so we call it "statsig_landing_page"

Screen Shot 2022-08-29 at 9 01 56 PM

Next, lets create some parameters. One for the title, subtitle, and primary CTA. For the value, we will use the actual ID of the content in the CMS

Screen Shot 2022-08-29 at 9 02 35 PM

It should look like this when you are done:

Screen Shot 2022-08-29 at 9 03 04 PM

Note that each layer parameter has a default value. If the user is not in any experiments in that layer, that's the default they will get, which will be backed by the cms.

Now, in code, your integration will look something like this:

const landingPageCmsIds = statsig.getLayer("statsig_landing_page");

const titleID = landingPageCmsIds.get("title", "<default_cms_title_id>"); // note that you have a default value in code as well

// exact library and function call will map to your cms client library
cmsClient.getEntry(titleID);

If you repeat this for the subtitle, CTA, and all the other parameters on your landing page, they all become dynamic! When you put a new CMS ID into statsig, your code will pull the updated content for that section.

Now, you can create new content in your CMS, and create an experiment in Statsig to try out that new variant. After creating the content, come back to your layer and hit "Create Experiment in Layer":

Screen Shot 2022-08-29 at 9 08 49 PM

Fill out the resulting form:

Screen Shot 2022-08-29 at 9 09 39 PM

And you have created an experiment! Now, we just need to set up the test and control groups for the experiment, and say which content will be used for each of the parameters we have set up. In the Groups and parameters section, select "Add Parameter" and then choose one of your existing parameters, like title:

Screen Shot 2022-08-29 at 9 10 14 PM

Screen Shot 2022-08-29 at 9 11 12 PM

Update the value of the parameter to the id of the new title: Screen Shot 2022-08-29 at 9 11 43 PM

If you want to create multiple experiment groups, or add more parameters, keep on adding until your experiment setup is complete. After you have validated the experience in all the groups is what you expect, start your experiment and wait for results - no code changes are required for all those parameters you already created, statsig will pull the updated ID, and then your code will load the updated content for each of those automatically!

The experimentation flow is the same as all other experiments on Statsig at this point, the value just ties to your CMS.

If you need more help setting up and running experiments, see Experiments