Back to integrations

Integrate Optimizely with Strapi

Integrate Optimizely With Strapi

tweet selection
Optimizely and Strapi Integration.png

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

    Why Use Optimizely?

    Optimizely is a leading experimentation platform that helps businesses optimize digital experiences through data-driven decisions. The platform's core strength lies in its A/B testing and multivariate testing capabilities, letting you compare different versions of web pages, interfaces, or marketing messages. Optimizely stands out with its advanced personalization features that deliver tailored experiences to specific user segments based on location, device, or behavior. The platform's feature flagging functionality allows for controlled rollouts of new features while monitoring performance metrics.

    For implementation details and technical specifications, the Optimizely official documentation offers comprehensive resources and guides.

    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.

    See Strapi in action with an interactive demo

    Explore Strapi in an instant, hands-on demo set up just for you.

    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.

    003-strapi-5.png

    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.

    004-strapi-5.png

    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.

    005-strapi-5.png

    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.

    Strapi Articles Published

    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.

    007-strapi-5.png

    Test API

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

    008-strapi-5.png

    🖐️ 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=*

    vuejs strapi integration - api request.png

    Getting Started: Integrate Optimizely With Strapi

    Integrating Optimizely with Strapi creates powerful opportunities for A/B testing and personalization in content-driven applications. Whether you're starting fresh or considering a headless CMS migration, here's how to set up this integration properly.

    Configuring Strapi Environment

    Before integrating Optimizely, ensure your Strapi environment meets these requirements so you can fully leverage the Strapi benefits during integration: 1. Node.js compatibility: Strapi and the Optimizely SDK have specific Node.js version requirements. It is advisable to consult the official documentation or resources for each to ensure compatibility. Learn more about using Node.js with Strapi. 2. Database configuration: Ensure your .env.development file is configured correctly for your project's database requirements. Verify the database name, host, port, username, and password according to your environment and database server documentation. 3. Environment variables: Configure essential variables:

    1PORT=1337 
2ADMIN_URL can be set using environment variables. 
3JWT_SECRET should be specified under ADMIN_JWT_SECRET in the admin configuration. 
4API_TOKEN_SALT is set under API_TOKEN_SALT in the admin configuration.
    1. API verification: Ensure your content types and API routes are properly defined and accessible for Optimizely integration.

    Installing and Adjusting Settings

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

    1. Create an Optimizely account: Sign up for an account with permissions to manage experiments as described in Strapi's A/B testing guide.
    2. Install the SDK: For JavaScript/React projects:
    npm install @optimizely/react-sdk
# or
yarn add @optimizely/react-sdk
    1. Get your environment key: Retrieve this from your Optimizely account dashboard to initialize the SDK.
    2. Create feature flags: Strapi feature flags can be integrated with Optimizely for A/B testing by creating a feature flag in Optimizely named "store" with default variables like "add_to_cart" and "buy_now." These variables can be set to represent different user interactions, such as varying button labels or actions in an e-commerce context. Within Optimizely, you can then establish A/B testing variations to assess these interactions and monitor their effectiveness through events tied to each variable. This approach enables dynamic adjustment and testing of user interactions, enhancing user experience based on real-time data without the need for new code deployment.
    3. Set up tracking: Create events to monitor user interactions with your content. For comprehensive analytics, consider integrating event tracking with Strapi.

    Code Implementation for Integrating Optimizely With Strapi

    Now, for developers working with a headless CMS for developers, let's implement the integration:

    1. Initialize Optimizely:
    1import { createInstance } from '@optimizely/react-sdk';
2
3const optimizely = createInstance({
4  sdkKey: 'your-environment-key'
5});
6
7optimizely.onReady().then(() => {
8  console.log('Optimizely client ready');
9}).catch((error) => {
10  console.error('Optimizely initialization error:', error);
11});
    1. Implement feature toggles:
    1function ProductCTA({ userId }) {
2  const [variation, setVariation] = useState('default');
3
4  useEffect(() => {
5    const enabled = optimizely.isFeatureEnabled('store', userId);
6    if (enabled) {
7      const ctaVariation = optimizely.getFeatureVariable('store', 'cta_type', userId);
8      setVariation(ctaVariation);
9    }
10  }, [userId]);
11
12  if (variation === 'buy_now') {
13   return <button>Buy Now</button>;
14  } else {
15   return <button>Add to Cart</button>;
16  }
17}
    1. Track conversion events:
    1function handleAddToCart(productId) {
2  // Cart logic here
3
4  optimizely.track('add_to_cart', userId, {
5    productId: productId,
6    value: product.price
7  });
8}
    1. Integrate with Strapi content:
    1async function fetchProductContent(productId, userId) {
2  const response = await fetch(`/api/products/${productId}`);
3  const productData = await response.json();
4
5  const variation = optimizely.activate("product_description_test", userId);
6
7  if (variation === "variation_1" && productData.alternativeDescription) {
8    return {
9      ...productData,
10      description: productData.alternativeDescription,
11    };
12  }
13
14  return productData;
15}

    Strapi custom fields can extend content types by adding new field types, primarily for enhancing the user interface in the admin panel. For conditional content serving based on experimentation with services like Optimizely, additional customization or integration development may be required, potentially involving Strapi's API.

    Speak to our team

    Strapi’s Enterprise Edition is SOC2 compliant and best for organizations building large sites or apps and dealing with regulatory compliance.

    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 Optimizely documentation.

    tweet selection