Dynamic Content | Setup Guide

Est. 12 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.

{
  "SpecialPricingOffer": {
    "OfferTitle": "Special Offer",
    "PercentBonus": "10",
    "Price": "4.99",
    "BackgroundColor": "LightGreen",
    "ButtonColor": "LightSalmon",
    "ButtonActionText": "Buy Now"
  }
}

2. Get the Offer

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. Declare Dynamic Content

Let's setup an AB test of the offer title, but only for users in Switzerland.

First, declare dynamic content in the configuration. Take a look at the updated configuration below.

{
  "SpecialPricingOffer": {
    "OfferTitle": "#LK-OfferTitle:string:Special Offer#",
    "PercentBonus": "10",
    "Price": "4.99",
    "BackgroundColor": "LightGreen",
    "ButtonColor": "LightSalmon",
    "ButtonActionText": "Buy Now"
  }
}

Create a new version of simple_offer and paste in the updated JSON snippet from above (Don't hit save yet).

If you have used the correct declaration syntax, then the detected key will show up on the right side panel, along with the default value.

4. Setup the Segmentation and AB Test

Click on the "Add Dynamic Mapping" button to open the Dynamic Links 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". Don't worry, we explain in Section 6 below.

[
    {
        "expression": "location = 'ch'",
        "name": "offer_title_test",
        "info": "Optional, additional info.",
        "groups": [
            {
                "variantName": "variant_a",
                "mod": [
                    [0, 199]
                ],
                "values": {
                    "LK-OfferTitle": "Extra Special Offer"
                }
            },
            {
                "variantName": "variant_b",
                "mod": [
                    [ 200, 499]
                ],
                "values": {
                    "LK-OfferTitle": "Offer Just For You!"
                }
            }
        ]
    }
]

You will notice that on the right of the config editor, the added segmentation information will be shown. Click "Save" in the top right to add this new version of the configuration with the segmentation information to Joystick.

5. Segmentation and AB Testing in Action

Go back to the Dynamic Content Demo page.

On the left panel, do the following

1. Make sure the API Key is correctly filled in.
2. Make sure the Config Content Id is correctly filled in (simple_offer if you are following the example).
3. Fill in the letter d (lower case) for the User ID
4. In User Parameters, set location to ch: "location": "ch"

Click "Show Result", and on the right side you will see that the Offer Title has been changed!

Try the following combinations...

Extending the Example

Now that you have create a simple overlay, let's add a few more variables. Create a new version of simple_offer, then update the Configuration Content and Dynamic Mapping with the following two snippets.

{
  "SpecialPricingOffer": {
    "OfferTitle": "#LK-OfferTitle:string:Special Offer#",
    "PercentBonus": "#LK-Bonus:number:10#",
    "Price": "#LK-Price:number:4.99#",
    "BackgroundColor": "#LK-BackgroundColor:string:LightGreen#",
    "ButtonColor": "#LK-ButtonColor:string:LightSalmon#",
    "ButtonActionText": "#LK-ButtonActionText:string:Buy Now#"
  }
}

[
  {    
    "expression": "location = 'ch'",    
    "values": {
      "LK-OfferTitle": "Limited Time",
      "LK-Bonus": 50,
      "LK-Price": 1.99,
      "LK-BackgroundColor": "Orange",
      "LK-ButtonColor": "LightBlue",
      "LK-ButtonActionText": "Redeem Offer"
    }
  }
]

Go back to the Dynamic Content Demo page. This time with just "location": "ch", you should see some dramatic differences in the offer.

What's Next?

Nice! You just setup content with segmentation and ab-testing. There's much more!