Integrate Optimizely with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Optimizely?

Optimizely is a digital experience platform that helps businesses optimize their websites, apps, and marketing campaigns through experimentation and personalization. Originally known for A/B testing, Optimizely has evolved into a comprehensive solution that includes content management, feature flagging, and data-driven decision-making tools.

With Optimizely, teams can test different variations of content, design, or functionality to see what performs best for their audience. It supports real-time analytics and allows marketers, developers, and product teams to collaborate on improving user experience and conversion rates. Optimizely is widely used by companies aiming to create more effective, tailored digital experiences across multiple channels.

Why Use Optimizely

Combining Strapi's headless CMS with Optimizely's experimentation platform creates a clear division of responsibilities—manage content through Strapi while Optimizely handles the testing logic. Understanding the differences between traditional vs. headless CMS helps in structuring your integration effectively. Each platform performs its specialized function.

This API-first architecture makes your content truly omnichannel. Strapi's REST API and GraphQL integration delivers content anywhere while Optimizely tests and personalizes across web, mobile, or IoT experiences.

With Strapi plugins for corporate websites available through its extensible plugin system, you gain complete control over content architecture, while Optimizely's SDKs integrate directly into your stack. Strapi v5 and Strapi Cloud scale efficiently for high-traffic experimentation without performance degradation.

Your teams can work independently. Content creators develop variants in Strapi while growth teams optimize conversion in Optimizely. A recent e-commerce implementation demonstrated how content creators updated product descriptions simultaneously with conversion optimization, without requiring developer intervention for each iteration.

Optimizely's audience targeting combined with Strapi's flexible content modeling enables tailored experiences based on user behavior, demographics, or custom attributes you define.

How to Integrate Optimizely with Strapi

The Optimizely-Strapi integration combines flexible content management with experimentation capabilities so you can deliver personalized experiences based on user data.

Prerequisites and Setup

Your environment needs:

• Node.js 16 LTS+ with npm 8+ or Yarn 1.22+ (leveraging the Node.js benefits for your Strapi integration)
• Strapi v4 project
• Optimizely account with Developer role access
• Environment variable management for credentials. If you're using Strapi Cloud, make sure to utilize Strapi multi-environment support for managing environment variables across different environments.

Create your Strapi project:

npx create-strapi@latest my-project

Set up your Optimizely project in the dashboard and retrieve your SDK key. Configure experiments and features that determine which content variations users see.

Add your Optimizely credentials to Strapi's .env file alongside your existing configuration to securely store API keys and keep sensitive data out of your codebase.

Implementing the Integration

Install the Optimizely SDK:

npm install @optimizely/optimizely-sdk

Add your SDK key to .env—never place API keys directly in your code. Utilize Strapi security plugins to configure proper authentication for your content endpoints using JWT tokens or OAuth and implement specific permissions based on what each component needs.

Design your Strapi content types with testing in mind. Include variant fields or tags to help serve different content based on experiment assignments.

Approaches to Integrate Optimizely with Strapi

You have two main options:

Backend Approach: Process experiment logic server-side in Strapi and serve the appropriate content variant through your API:

const optimizelySDK = require('@optimizely/optimizely-sdk');

const optimizelyClient = optimizelySDK.createInstance({
  sdkKey: process.env.OPTIMIZELY_SDK_KEY,
});

module.exports = {
  async find(ctx) {
    const userId = ctx.state.user?.id || 'anonymous';
    const variation = optimizelyClient.activate('homepage_experiment', userId);

    if (variation === 'variant_a') {
      return await strapi.service('api::content.content').find({ 
        filters: { variant: 'a' } 
      });
    } else {
      return await strapi.service('api::content.content').find({ 
        filters: { variant: 'b' } 
      });
    }
  },
};

Front-end Approach: Connect both services in your client-side code (e.g., React, Vue). Fetch content from Strapi while using Optimizely's client-side SDK to determine which variation to display. This provides more flexibility for dynamic interfaces and real-time personalization.

Configuration and Testing

Configure experiments in the Optimizely dashboard by defining test scenarios, variations, and targeting rules. Map experiment keys to your content logic in both your frontend application and Strapi backend.

We recommend starting with simple A/B tests like button colors or text variations before tackling complex content personalization. Verify that users get assigned to the correct experiment groups and receive appropriate content variants.

Track your integration using Optimizely's analytics dashboard and Strapi's API logs. Monitor experiment performance, conversion rates, and content delivery errors. The REST API documentation offers additional configuration options for advanced use cases.

Document your experiment configurations and use consistent naming conventions across both platforms for easier management and debugging.

Real-World Implementation: E-commerce A/B Testing with Strapi and Optimizely

This e-commerce case study demonstrates how a team integrated Optimizely with Strapi to test product descriptions and interface elements to increase conversion rates. Marketing teams managed content independently, while developers controlled testing logic.

The Challenge

The team needed to test different hero banners, product titles, and call-to-action buttons to find which combinations drove the highest add-to-cart rates. They required flexibility—marketing updating content without developer assistance while maintaining strict experiment controls.

Architecture

Strapi manages all product content, including variant titles and descriptions. Optimizely determines which variant each user sees based on audience segments and traffic allocation. React connects everything, using Optimizely's SDK to fetch the appropriate content from Strapi's API.

Implementation

Initialize Optimizely in your React application:

import * as optimizelySDK from '@optimizely/optimizely-sdk';

const optimizelyClient = optimizelySDK.createInstance({
  sdkKey: process.env.OPTIMIZELY_SDK_KEY,
});

Connect experiment variants to content delivery:

const variant = optimizelyClient.activate('homepage_experiment', userId);
const content = await fetch(`/api/strapi-content?variant=${variant}`);

Render based on experiment assignments:

const renderProductDescription = () => {
  if (variant === 'variation_1') {
    return <ProductCard layout="detailed" content={content.variantA} />;
  } else {
    return <ProductCard layout="simple" content={content.variantB} />;
  }
};

Results

Marketing teams updated content variants in Strapi while developers managed experiment logic in Optimizely. The team measured which product description formats created higher engagement and implemented the winning variant across their platform. This modular approach allowed them to test everything from button colors to entire page layouts while maintaining a single source of truth for content.

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, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

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