You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
docs for the Eppo Contentful marketplace app (#487)
* docs for the Eppo Contentful marketplace app
* added danger and info on analysis
* Added app link
---------
Co-authored-by: Eric Metelka <[email protected]>
Copy file name to clipboardExpand all lines: docs/guides/marketing/integrating-with-contentful.md
+33-82Lines changed: 33 additions & 82 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,115 +6,66 @@ sidebar_position: 6
6
6
7
7
It is common for marketing and content teams to want an A/B testing solution with a point-and-click visual editor to make straightforward copy or image optimizations. However, these solutions most often rely on blocking scripts that cause performance degradations—slowing your site down by 200-500 milliseconds in best-case scenarios. You could avoid these performance issues by fully implementing feature flags for marketing experiments—but this will mean marketing has to rely on engineering for every test they want to run.
8
8
9
-
Using a headless CMS like Contentful, and a lightweight, robust feature flagging SDK, like Eppo, allows the best of both worlds: an easy way for marketing teams to run tests without sacrificing performance. In this tutorial, we will walk through how to set up Eppo’s Node SDK so Marketing teams can run their own experiments by updating [Content](https://www.contentful.com/help/content-model-and-content-type/) defined in Contentful and feature flags in Eppo.
9
+
Using a headless CMS like Contentful, and a lightweight, robust feature flagging SDK, like Eppo, allows the best of both worlds: an easy way for marketing teams to run tests without sacrificing performance. In this tutorial, we will walk through how to set up Eppo’s Node SDK so Marketing teams can run their own experiments by updating [Content](https://www.contentful.com/help/content-model-and-content-type/) defined in Contentful and feature flags in Eppo.
10
10
11
+
## Installing Eppo's Contentful marketplace app
11
12
12
-
## Setting up Contentful
13
+
Eppo now supports seamless integration with Contentful via the Eppo Contentful marketplace app. This app allows you to create experiements directly within a Contentful blog post.
13
14
14
-
For this example, imagine we are running an experiment on the Eppo homepage. There are a few places where we might want to experiment on this page:
15
+
To get started, visit [Eppo's Contentful app page](https://www.contentful.com/marketplace/eppo/) and click the `Get the app` button to install.
When installing the app, you should see a configuration screen that allows you to enter an **Eppo API key** along with various other settings.
17
18
18
-
1. The hero title (”Run reliable, impactful experiments”)
19
-
2. The hero body (”Eppo streamlines …”)
20
-
3. The CTA text (”Preview Eppo Now”), and the CTA link (”www.geteppo.com/get-access”)
21
-
4. The demo video
19
+
22
20
23
-
To build this experiment out in our Contentful space, create a new Content Model with the name “Homepage”. Add the following content fields:
21
+
Upon installation, you'll need to use an API key that has write access to **Feature Flags** and **Experiments**. To create a key, navigate to https://eppo.cloud/admin/api_keys, then click on **Create key**.
24
22
25
-
23
+
26
24
27
-
Now to create our variants, navigate to the content page and create two content entries using the Homepage Content Model you created above. Name one “Homepage Baseline” and the other “Homepage Redesign”. Each version should reflect the copy you want to test:
25
+
Copy the key that was generated and paste it into the **Eppo API key** field in Eppo's Contentful app configuration screen. You'll then need to select a **Default randomization entity** and **Default assignment logging table**. Click on **Install to selected environments**to finish installation.
## Configuring a Content Type to use Eppo Experiments
30
28
29
+
Next, we'll need to configure certain content types to use the Eppo plugin that we installed. In this example, we'll assume that we have a **page - Blog post**[content model](https://www.contentful.com/help/content-models/content-modelling-basics/) and that we want to directly run Eppo experiments within that model. To set this up, you'll need to click on **Content model** from the navigation menu, then click on **page - Blog post** from the list of models available.
31
30
32
-
:::note
33
-
For this tutorial, we are including a Control and Variant for an A/B test, but you can repeat this process to add additional variants.
34
-
:::
35
-
36
-
Now that we have the content defined, we’ll need to get the entry ID for our two pages. In Contentful, the entry ID can be found on the content page and by clicking on the 3 dots next to your content entries and clicking ‘Copy entry ID’. Save these for now, we will use them in our Eppo setup next.
Next, we’ll create a [corresponding flag in Eppo](/feature-flag-quickstart/) (Configuration >> Create). For each variant above, simply add a new variant in the Eppo UI. For each variant value, paste in the corresponding Contentful entry ID. Make sure to also save your Feature Flag key – you will need it for your Node implementation later.
43
-
44
-
45
-
46
-
## Setting up your Node environment
47
-
Now that we have the flag and a few variants defined, you can enable the flag in your local environment and start developing the page using the content defined in Contentful. For details on setting up your first flag, please see the [Feature Flag quick start section](/feature-flag-quickstart) of our docs.
31
+
48
32
49
-
The code example below does the following:
33
+
From within the "Fields" subpage of the "page - Blog post" management, you'll then want to click on **+ Add field**.
50
34
51
-
1. Initialize the Eppo and Contentful clients
52
-
2. Use the Eppo client to determine which variation a user should be assigned
53
-
3. Use the variation assignment to fetch content from Contentful
35
+
54
36
55
-
To get the implementation we built running locally, [clone this repo from Github](https://github.com/hhargreaveseppo/contentful_eppo_blog), and follow the README instructions. If you already know where you would like to implement this integration you can use the following code as boilerplate:
37
+
On the modal that pops up, click **Reference**, then type in the name `Eppo Experiment`.
56
38
57
-
```js
39
+
58
40
59
-
import { init } from"@eppo/node-server-sdk";
60
-
import*asEppoSdkfrom"@eppo/node-server-sdk";
41
+
Then, click **Add and configure**.
61
42
62
-
importcontentfulfrom"contentful";
63
-
import'dotenv/config'
43
+
64
44
65
-
// Eppo Specific methods
66
-
awaitinit({
67
-
apiKey:<EPPOSDKKEY>
68
-
});
45
+
On the configuration screen for the field, make sure you check **Accept only specified content type**, with `Eppo variant container` selected. Click **Confirm** to save your changes.
69
46
70
-
consteppoClient=EppoSdk.getInstance();
47
+
The Eppo Contentful marketplace app is now configured for use with the `page - Blog post` content type! You can repeat this process for other content types that you want to run experiments with.
space:<CONTENTFULSPACEID>, // Add your Contentful Space ID here
83
-
accessToken:<CONTENTFULACCESSTOKEN>// add your Contentful Access Token here
84
-
})
51
+
At this point, when you go to a blog-post entry in Contentful, you should see a new "Eppo Experiment" field. From here, click on **+ Add content**, then click on **Eppo variant container**.
console.log(entry) // see the different assignments that a user received
88
-
```
53
+
89
54
90
-
Once your application is running you should see your entry fields logged based on what variation that user ID was assigned.
55
+
In this example, we'll create two "component - Rich image" variants to determine which "hero image" to display for the blog post. You can select existing images by clicking on **Link existing entry**, or you can link an image that doesn't exist yet by clicking on **Create new entry and link**. Click publish once you've finished.
91
56
92
-
Once you publish, a message will appear at the top of the screen letting you know that a new feature flag has been created in the Eppo UI. Click on on the link that says **Go to Eppo feature flag** to confirm this worked. From the Eppo UI, you can then enable the flag.
94
60
95
-
### Initial Deployment
96
-
97
-
Engineering will still need to build the site to read from the CMS and render the page as appropriate. For the initial deployment, it may be easiest to only include one variant. The addition of new content and randomized variants can then all be managed in the Contentful and Eppo UIs.
98
-
99
-
We recommend having a default entry ID in case there are any issues initializing the Eppo client; in this case the Eppo SDK will return `NULL` for the variant value.
100
-
101
-
### Workflow for deploying a new content experiment
102
-
103
-
The recommended workflow for launching a content-based experiment is as follows:
104
-
105
-
1. Create a new entry in Contentful for the appropriate content model.
106
-
2. Create a new variant in Eppo with the `entry_id` from Contentful UI.
107
-
3. Create an allocation to test the new content in production (see screenshot below).
108
-
4. Load page to QA new content and [add screenshots to Eppo](/experiment-analysis/configuration/#adding-screenshots) for reference.
109
-
5.[Create an experiment allocation](/feature-flagging/concepts/experiment-assignment/) and launch the experiment.
110
-
6. Analyze experiment and make rollout decisions like any other Eppo experiment.
111
-
112
-
:::tip
113
-
This can all be done in the Contentful and Eppo UIs with no additional engineering support.
61
+
:::danger
62
+
The experiment is not running until the linked feature flag is enabled in the Eppo UI. Don't forget to enable the feature flag.
The experiment also has a linked experiment analysis that is automatically created for you when you publish. This is the experiment in the Eppo UI where metrics can be added and you can monitor the experiment results. Learn more about [configuring your analysis here](/experiment-analysis/index).
66
+
67
+
That's it! You now have a feature flag and experiment configured for this blog post.
117
68
118
-
## Conclusion
69
+
## Updating your codebase to support Eppo experiments
119
70
120
-
Now that you have Contentful and Eppo set up, you can see how easy it is to run no-code experiments. Once your content models are defined and Eppo feature flags are set up, teams can set up additional variations and define content in Contentful without any additional code releases.
71
+
Your codebase will require changes to support Eppo's Contentful marketplace app. Refer to the `README.md` instructions in Eppo's [contentful-pages-router-blog-sample](https://github.com/Eppo-exp/contentful-pages-router-blog-sample) repository to integrate your Codebase with Contentful.
0 commit comments