GrowthBook

Why Use GrowthBook?

GrowthBook is an open-source platform that seamlessly combines feature flagging and A/B testing in one solution. By integrating GrowthBook with Strapi, you can enhance your content management system with powerful experimentation capabilities. The platform builds a foundation for data-driven decisions throughout your organization, whether you're rolling out changes gradually or running complex multivariate tests.

GrowthBook shines with lightweight SDKs for real-time feature evaluation, statistical analysis engines, and integration with over 15 popular tools like Segment and Amplitude. If you're interested in exploring A/B testing further, check out A/B testing with Strapi for more insights. What sets GrowthBook apart is its reliability—handling more than 100 billion feature flag lookups daily while reducing engineering overhead. Teams across marketing, engineering, and product benefit from having one central system for all experimentation needs.

For all capabilities and implementation details, check the official documentation.

Why Use Strapi?

Strapi is the leading open-source headless CMS offering features, like customizable APIs, role-based permissions, multilingual support, etc. It simplifies content management and integrates effortlessly with modern frontend frameworks.

Explore the Strapi documentation for more details.

Strapi 5 Highlights

The out-of-the-box Strapi features allow you to get up and running in no time:

1. Single types: Create one-off pages that have a unique content structure.
2. Draft and Publish: Reduce the risk of publishing errors and streamline collaboration.
3. 100% TypeScript Support: Enjoy type safety & easy maintainability
4. Customizable API: With Strapi, you can just hop in your code editor and edit the code to fit your API to your needs.
5. Integrations: Strapi supports integrations with Cloudinary, SendGrid, Algolia, and others.
6. Editor interface: The editor allows you to pull in dynamic blocks of content.
7. Authentication: Secure and authorize access to your API with JWT or providers.
8. RBAC: Help maximize operational efficiency, reduce dev team support work, and safeguard against unauthorized access or configuration modifications.
9. i18n: Manage content in multiple languages. Easily query the different locales through the API.
10. Plugins: Customize and extend Strapi using plugins.

Learn more about Strapi 5 feature.

Setup Strapi 5 Headless CMS

We are going to start by setting up our Strapi 5 project with the following command:

🖐️ Note: make sure that you have created a new directory for your project.

You can find the full documentation for Strapi 5 here.

Install Strapi

npx create-strapi-app@latest server

You will be asked to choose if you would like to use Strapi Cloud we will choose to skip for now.

 Strapi   v5.6.0 🚀 Let's create your new project

 
We can't find any auth credentials in your Strapi config.

Create a free account on Strapi Cloud and benefit from:

- ✦ Blazing-fast ✦ deployment for your projects
- ✦ Exclusive ✦ access to resources to make your project successful
- An ✦ Awesome ✦ community and full enjoyment of Strapi's ecosystem

Start your 14-day free trial now!


? Please log in or sign up. 
  Login/Sign up 
❯ Skip 

After that, you will be asked how you would like to set up your project. We will choose the following options:

? Do you want to use the default database (sqlite) ? Yes
? Start with an example structure & data? Yes <-- make sure you say yes 
? Start with Typescript? Yes
? Install dependencies with npm? Yes
? Initialize a git repository? Yes

Once everything is set up and all the dependencies are installed, you can start your Strapi server with the following command:

cd server
npm run develop

You will be greeted with the Admin Create Account screen.

Go ahead and create your first Strapi user. All of this is local so you can use whatever you want.

Once you have created your user, you will be redirected to the Strapi Dashboard screen.

Publish Article Entries

Since we created our app with the example data, you should be able to navigate to your Article collection and see the data that was created for us.

Now, let's make sure that all of the data is published. If not, you can select all items via the checkbox and then click the Publish button.

Enable API Access

Once all your articles are published, we will expose our Strapi API for the Articles Collection. This can be done in Settings -> Users & Permissions plugin -> Roles -> Public -> Article.

You should have find and findOne selected. If not, go ahead and select them.

Test API

Now, if we make a GET request to http://localhost:1337/api/articles, we should see the following data for our articles.

🖐️ Note: The article covers (images) are not returned. This is because the REST API by default does not populate any relations, media fields, components, or dynamic zones.. Learn more about REST API: Population & Field Selection.

So, let's get the article covers by using the populate=* parameter: http://localhost:1337/api/articles?populate=*

Getting Started: How to Integrate GrowthBook With Strapi

When you integrate GrowthBook with Strapi, it enables content teams to run experiments independently without developer intervention for each test. This powerful combo lets you make data-driven content decisions while taking advantage of Strapi's content management flexibility.

Installing and Adjusting Settings for Integration

With your environment ready, follow these steps to integrate GrowthBook with Strapi:

1. Install GrowthBook SDK: Add the SDK to your Strapi project:

npm install @growthbook/growthbook

2. GrowthBook Account Setup:
   • Sign up at GrowthBook's site
   • Choose between cloud-hosted (free for small teams) or self-hosted options
   • Create an SDK Connection for a client key to access the API
3. Analytics Integration:
   • Connect an analytics platform like Google Analytics or Mixpanel by exporting data to a supported database format for GrowthBook to analyze experiment results.
   • For more advanced options, explore analytics integration in Strapi
   • Use the exported data as a data source in GrowthBook for analysis.
4. Feature Flags Creation:
   • Create feature flags in GrowthBook to control your content variations
   • Learn more about feature flags in Strapi
   • Set targeting rules or rollout percentages as needed
5. Strapi Content Structure:
   • Use Strapi's Dynamic Zones to assemble and customize page layouts with reusable components, providing flexibility in content structure.

At this point, you might find it helpful to check out other essential Strapi plugins that can enhance your project's capabilities.

Code Implementation to Connect GrowthBook and Strapi

Connect both systems with code like this example:

// Import GrowthBook
import { GrowthBook } from '@growthbook/growthbook';

// Initialize GrowthBook
const growthbook = new GrowthBook({
  apiHost: "https://cdn.growthbook.io",
  clientKey: "your-client-key", // Replace with your actual client key
  trackingCallback: (experiment, result) => {
    // Log experiment data
    console.log(`Experiment ${experiment.key} - Variation ${result.variationId}`);
  }
});

// Fetch features from GrowthBook
fetch("https://cdn.growthbook.io/api/features/your-client-key")
  .then((res) => res.json())
  .then((json) => {
    growthbook.setFeatures(json.features);
  });

// Use feature flags in your Strapi controllers
module.exports = {
  async find(ctx) {
    if (growthbook.isOn("new-listing-algorithm")) {
      // Use new algorithm
      return await strapi.query('api::product.product').findMany({
        // New algorithm parameters
      });
    } else {
      // Use old algorithm
      return await strapi.query('api::product.product').findMany({
        // Old algorithm parameters
      });
    }
  }
};

For frontend implementation, use GrowthBook's React SDK or other client libraries to show content variations based on your feature flags. If you're considering different API approaches, understanding REST and GraphQL integration can offer valuable insights.

By integrating GrowthBook with Strapi, your team can run experiments and collect performance data, helping you make smarter content decisions without needing developers for every change.

To further enhance your workflow, consider exploring productivity Strapi plugins that can streamline your development process.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours Monday through Friday at 12:30 pm - 1:30 pm CST: Strapi Discord Open Office Hours

For more details, visit the Strapi documentation and GrowthBook documentation.