---
title: Personalise the App experience
slug: tesco-hol-q12026/personalise-the-app-experience
docTags: 
createdAt: 2025-07-09T14:36:50.185Z
---

## Reinforce the meal deal message in the mobile app

Journey Optimizer allows you to personalize the mobile app experience you deliver to your customers through inbound journeys or campaigns.

In our use case, Customers may ignore email but open the app. We want to keep the Meal Deal messaging consistent across channels. 

We will configure a **Code-based experience** for the mobile app channel, which will use the same Selection Strategy as the Email channel. 

## Exercise 4: Configuring the code based experience for mobile app

1. From the actions tab, choose **Action** and drag it onto the :FontAwesome[]{icon="fa-solid fa-circle-plus"} **icon** after the Meal Deal Offer Email. 
2. Choose **Code-based experience** from the action types.
3. Select **Add**.
4. Click on the activity to open the detailed view.

   1. Set the **label** to `Meal Deal Offer App`.
   2. Select **Configure action.**
   3. Choose `DSN_Mobile_App_CBE` from the code-based experience configuration dropdown.
   4. Select **Edit Content** to open the editor and start designing your code-based experience.

      :::hint{type="warning"}
      We appreciate this level of technical depth is not neccessary for all attendees, feel free to skip to the next section - it won't impact your experience in the rest of the Lab.
      :::

   ![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/QzbXdfwmXwAMizx5xHmFM_screenshot-2026-02-24-at-014811.png)
5. To create our code-based offer, select **Edit Code**
6. In the expression editor,
   1. Select **Decision policy **from the left menu.
   2. Select **Add decision policy**
   3. Set the name of the decision policy to:`Your name meal Deal Offer Decision`
   4. Click **Next**.
   5. Under **Strategy sequence**, select **+Add > Selection Strategy.**
   6. Select the `Meal Deal Win Back Selection Strategy` from the list.
   7. Click** Save** to close the window.
   8. Click **Next** and review your decision policy. Click **Create**.

Now we want to use this decision policy in our Code-based experience. To do this,

:::Paragraph{listStyleType="decimal" indent="2"}
Select **+Insert policy **from the Decision policy menu
:::

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/mU9R9jF2Rmffaa-MfSydH_screenshot-2026-02-24-at-015935.png" size="100" isUploading="false" width="1908" height="908" darkWidth="1908" darkHeight="908" showCaption="false" indent="1"}

This inserts an `each`loop that exposes each returned offer as `item. Use item.<org>.<offerAttributes>` to reference offer custom attributes inside your JSON.

The code-based experience must output valid JSON that the mobile app parses, we will produce an object with `image URL,` and `text` keys personalised.

1. To construct this JSON code-based experience, copy and paste the following code into the expression editor inside the `each` function

   ```json
   {
       "image":"{{item._demopotemea.offerAttributes.imageURL}}",
       "url":"",
       "buttonText":"Claim Offer",
       "title":"Meal Deal",
       "text":"Get your regular {{item._demopotemea.offerAttributes.offerName}}"
   } 
   ```

:::hint{type="info" indent="1"}
As you will notice, the image URL and Offer Name custom attributes that have been referenced in the JSON expression will be replaced with the customers personalised offer name and image when the Code-based experience renders in the app.
:::

Your complete JSON expression should look like:

![](https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/sUIrdDulqDikgQD8Bu26F_screenshot-2026-02-24-at-021101.png)

1. Click **Save and Close.**
2. Click on :FontAwesome[]{icon="fa-solid fa-angle-left"} **icon** to go back to the journey. Your screen will look like this. Click **Save** to save the configuration of the Code-based experience step in the journey.

::Image[]{src="https://api.archbee.com/api/optimize/1Jp0iolWv35Z_mkI7oUiT/yQeF27UlXSk7IY36rN2Rl_screenshot-2026-02-24-at-021329.png" size="100" isUploading="false" width="1917" height="873" darkWidth="1917" darkHeight="873" showCaption="false" indent="1"}

:::hint{type="success"}
You've successfully created a code based experience that will display in the mobile app.
:::