Contentful

The Contentful plugin for Amplitude Experiment enables businesses to create variations of content in Contentful, and use Experiment to control which variant users see, and track performance of those variants.

Features

• Run A/B tests on Amplitude Experiment and author content in Contentful
• Read different properties (refreshed every 5 seconds) from Amplitude Experiment and build your content around this information

Requirements

To use the plugin, ensure you have the following:

• Access to an Amplitude plan with Amplitude Experiment enabled.
• Your Amplitude Org URL value. This value appears in the URL you use to access Amplitude: https://app.amplitude.com/experiment/<ORG_URL>/dashboard
• A Management API key, which you can find in the Experiment side bar.

Installation and use

Complete the following steps in Contentful and Amplitude to add and activate the Contentful plugin for Amplitude Experiment.

Install the plugin

1. Install the plugin from the Contentful marketplace.
2. In the plugin configuration, enter the data center, Org URL and Management API key you created in Experiment. Click Install to selected environments.
3. Click Save to complete the plugin setup.

When you enable the plugin, a Variant Container content model appears on the Content Model tab.

Add a variant container to one of your content models

The variant container in Contentful works with Amplitude Experiment to decide which variant of your experiment displays to each user.

For best results, Amplitude recommends you a Reference content type to hold experiments. In the Reference content type

To add a variant container:

1. Open the content model of the page to which you'll add the variant container.
2. Click + Add field. Select a Reference field.
3. Provide a name for the field. For best results, enter a name that corresponds with the purpose of the field. For example, Hero Banner or Demo CTA.
4. Select One reference as the Type. Click Add and configure.
5. On the Name and field ID tab of the field configuration, select Accept only specified entry type, and select Variant container. This ensures consistency with the Contentful API response when it serves page content.
6. Click Confirm to create the field, and click Save to update the content model.

Add content

After you configure the variant container and reference field, open the page on which you want to add an experiment.

1. In the Content editor, select the page.
2. Find the field you created in the previous step. It should have an + Add content selector. Select Variant Container as the content to add.
3. In the field configuration, enter the Flag Key of the experiment. The Flag Key field shows matching keys as you type.
4. When you select the Flag Key, any variants associated with that key appear in the Variants section.
5. For each variant, select to Link an existing entry or Create new content type to populate the variant.
6. Click Publish to publish the variant container.
7. Click Publish to publish the updated page with the experiment enabled.

Integrate with your front end

Contentful returns JSON when a user requests the page.

  1{
  2 "__typename": "PageLanding",
  3 "sys": {
  4   "id": "2cayfg7wVF5WezADCHgSgL",
  5   "spaceId": "4y4crvvoco9a"
  6 },
  7 "internalName": "Homepage",
  8 "heroBanner": {
  9   "__typename": "VariationContainer",
 10   "experiment": {
 11     "id": "183980",
 12     "key": "contentful-hero-banner",
 13     "name": "contentful-hero-banner",
 14     "tags": [],
 15     "state": "running",
 16     "deleted": false,
 17     "enabled": true,
 18     "endDate": null,
 19     "decision": null,
 20     "variants": [
 21       {
 22         "key": "control"
 23       },
 24       {
 25         "key": "treatment"
 26       }
 27     ],
 28     "projectId": "289220",
 29     "startDate": "2024-02-22",
 30     "deployments": ["14"],
 31     "description": "",
 32     "bucketingKey": "amplitude_id",
 33     "bucketingSalt": "28fWNw1M",
 34     "bucketingUnit": "User",
 35     "decisionReason": null,
 36     "evaluationMode": "remote",
 37     "experimentType": "hypothesis-testing",
 38     "rolloutWeights": {
 39       "control": 1,
 40       "treatment": 1
 41     },
 42     "targetSegments": [],
 43     "stickyBucketing": false,
 44     "rolledOutVariant": null,
 45     "rolloutPercentage": 0
 46   },
 47   "experimentId": "contentful-hero-banner",
 48   "meta": {
 49     "control": "6rmYK8YKYtTkKcFRY9Pf2w",
 50     "treatment": "kwDjI2f2vKE2GvQoeqq1d"
 51   },
 52   "variationsCollection": {
 53     "items": [
 54       {
 55         "__typename": "Hero",
 56         "sys": {
 57           "id": "6rmYK8YKYtTkKcFRY9Pf2w",
 58           "spaceId": "4y4crvvoco9a"
 59         },
 60         "preHeadline": "Organic Products",
 61         "headline": "100% Fresh Food",
 62         "cta": "Shop Now",
 63         "description": "Whatever you want from your local stores, brought right to your door. \t\t\t\t\t\t\t",
 64         "image": {
 65           "__typename": "Asset",
 66           "sys": {
 67             "id": "6PkraSxWWd96AU6FTYVssd"
 68           },
 69           "title": "Fresh food",
 70           "description": "",
 71           "width": 2560,
 72           "height": 960,
 73           "url": "https://images.ctfassets.net/4y4crvvoco9a/6PkraSxWWd96AU6FTYVssd/69b8d7f7cabb9f578097d50f2bf8aa70/Hero-3-1-scaled.jpg",
 74           "contentType": "image/jpeg"
 75         }
 76       },
 77       {
 78         "__typename": "Hero",
 79         "sys": {
 80           "id": "kwDjI2f2vKE2GvQoeqq1d",
 81           "spaceId": "4y4crvvoco9a"
 82         },
 83         "preHeadline": "Exclusive Offer",
 84         "headline": "Loyalty Program",
 85         "cta": "Get Free Shipping",
 86         "description": "We missed you! Finish your order today and get free shipping when you join our loyalty program.",
 87         "image": {
 88           "__typename": "Asset",
 89           "sys": {
 90             "id": "6WFOK0460CwrW7aChl1QjM"
 91           },
 92           "title": "Loyalty Green",
 93           "description": "",
 94           "width": 1920,
 95           "height": 720,
 96           "url": "https://images.ctfassets.net/4y4crvvoco9a/6WFOK0460CwrW7aChl1QjM/e52fb2129b848203f6006ff9881309d9/Hero-_-loyalty-green.jpg",
 97           "contentType": "image/jpeg"
 98         }
 99       }
100     ]
101   }
102 }
103}

The experiment object contains helpful metadata about the experiment. To render the front end and include the experiment, use the meta and variationsCollection objects. Amplitude Experiment delivers the variant identifier, and matches it to an option in the meta object. After the variant is set, you can:

• Iterate through items in the variationsCollection object to show the variation with the matching ID.
• Make a direct call to Contentful with the variant ID to avoid searching through the array.

For more information, see the following React / Typescript example:

 1import { Experiment } from '@amplitude/experiment-js-client';
 2 import sdk from 'contentful-sdk';
 3 
 4 
 5 export const experiment = Experiment.initialize(process.env.NEXT_PUBLIC_AMPLITUDE_EXPERIMENT_CLIENT_KEY || "", {
 6 debug: true,
 7  });
 8 const [hero, setHero] = useState<Hero | null>(null);
 9 useEffect(() => {
10   const matchExperimentData = async () => {
11     await experiment.fetch({
12       user_id: userId,
13     });
14     const heroBanner = sdk.getEntry('ENTRY_ID_HERE');
15     const variant = experiment.variant(heroBanner?.experimentId ?? 'control');
16     let resolvedVariant;
17     if (heroBanner && variant.value) {
18       const variation = heroBanner.meta[variant.value];
19       resolvedVariant = heroBanner.variationsCollection?.items.find(hero => {
20         return hero?.__typename === 'Hero' && hero?.sys.id === variation;
21       });
22       setHero(resolvedVariant);
23     }
24   };
25   matchExperimentData();
26 }, [heroBanner, userId]);

Be sure to account for cases where users receive off as the value that experiment.variant() returns.