Dynamic Content - Full Config Replacement - Setup Guide
Est. 9 minutes to complete.
Follow this guide to understand how to setup dynamic content, segmentation and ab testing in Joystick. In this scenario, we will use Joystick to Segment and AB Test a hypothetical marketing offer. Go through the Joystick Quick Start first if you have not yet.
1. The Setup
Copy the below snippet, then create a new config in Joystick called "simple_offer". You can just remove the config from your environment after you are done.
2. Get the Config Over API
Get an API key in the environment where you created "simple_offer", then head over to our offer Dynamic Content demo page using this link.
Dynamic Content Demo: https://app.getjoystick.com/demo
Paste your API Key and Config Content Id, click "Show Result". The demo page makes a simple call to the Joystick API, gets the config content you just created, and renders the offer on the right.
3. Add Full Config Dynamic Content
Click on the "Add Dynamic Mapping" button to open the Dynamic Content editor panel.
The Dynamic Map defines how the data will be transformed for different segments or ab tests.
Copy and paste the following snippet Dynamic Mapping into the panel and click "Save". You'll see that the parameter overlayType is set to FullConfig, which indicates that this is a full config overlay. When this is set, then the fullConfig object will be used to override the entire configuration.
fullConfig
fullConfig must be an object (specifically in Typescript: Record<string, unknown>). It is a special object will be used to override the entire configuration for a specific segment or ab test. It is used when overlayType set to FullConfig.
[
{
"expression": "location = 'a'",
"name": "fullConfig-segment-only",
"info": "Optional, additional info.",
"overlayType": "FullConfig", // use FullConfig to indicate this is a full config overlay
"fullConfig": {
"SpecialPricingOffer": {
"OfferTitle": "Full Config - Segment Only",
"PercentBonus": "1",
"Price": "1.99",
"BackgroundColor": "Blue",
"ButtonColor": "Blue",
"ButtonActionText": "Buy Blue"
}
}
},
{
"expression": "location = 'b'",
"name": "fullConfig-with-ab-test",
"info": "Optional, additional info.",
"overlayType": "FullConfig", // use FullConfig to indicate this is a full config overlay
"groups": [
{
"variantName": "variant_a",
"mod": [
[0, 199] // This will be a 20% test group. Must past in "u" param on request to have ab testing work.
],
"fullConfig": {
"SpecialPricingOffer": {
"OfferTitle": "Full Config - AB Test - Variant A",
"PercentBonus": "2",
"Price": "2.99",
"BackgroundColor": "Orange",
"ButtonColor": "Orange",
"ButtonActionText": "Buy Orange"
}
}
},
{
"variantName": "variant_b",
"mod": [
[ 200, 499] // this will be a 30% test group. Must past in "u" param on request to have ab testing work.
],
"fullConfig": {
"SpecialPricingOffer": {
"OfferTitle": "Full Config - AB Test - Variant B",
"PercentBonus": "3",
"Price": "3.99",
"BackgroundColor": "Yellow",
"ButtonColor": "Yellow",
"ButtonActionText": "Buy Yellow"
}
}
}
]
}
]
4. Segmentation and AB Testing in Action
As you change the request parameters, you'll get different results based on the dynamic content mapping you just created.
| Request Parameters | Description |
|---|---|
{"u": "a", "p": {"location": "a"}} |
You'll see the title: "Full Config - Segment Only". |
{"u": "a", "p": {"location": "b"}} |
You'll see the title: "Special Offer - AB Test - Variant B". |
{"u": "b", "p": {"location": "b"}} |
You'll see the title: "Special Offer - AB Test - Variant A". |
What's Next?
Nice! You just setup dynamic content with segmentation and ab-testing using full config overlay. There's much more!