---
title: Code Based Experiences
slug: docs/uZAf-code-based-experiences
docTags: 
createdAt: 2024-06-03T15:40:24.578Z
---

Live Demos app (more info here: [Mobile App Overview](docId\:OF9SLIJWsGcA2mh-2gQlP)) supports AJO Code-Based experiences to insert and edit specific elements at individual and more granular locations of the app.

### Prerequisites:

[Create offers and selection strategy](https://experienceleague.adobe.com/en/docs/journey-optimizer/using/decisioning/experience-decisioning/selection-strategies)

### Displaying an offer on a dedicated mobile screen

To display a dedicated offer, e.g., a small ad banner within the app, we recommend using the "Experience Decisioning" component.

**Implementation steps:**

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Open the screen you would like to use to display the offer, e.g. in case of Luma project, Home screen. Edit it and add "Experience Decisioning" component.
:::

:::VerticalSplitItem


![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/ZnwLsZZlZebE-jnxSVVPZ_image.png)



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/q8UE-SdCcEnol607OPIcW_image.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Go to Adobe Journey Optimizer and create a new Channel Configuration. 

Provide the configurations as in screenshot.
:::

:::VerticalSplitItem


![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/_quOGqvuiS9R5rVEpe8vB_image.png)



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/yqy7DTA97EFvN8oCsu3lA_image.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Create a new campaign and provide a name.

Go to Actions tab and select Code Based Experience. Then select the existing configuration that was just created.
:::

:::VerticalSplitItem


![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/5osqZt5TIaP_AOaZ1edAW_image.png)



![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/vmTGXDSiAi2KY1LE1lFaC_image.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Click on content tab to create the Content for the Campaign.

Click **Decision Policy **from the left navigation menu, then select **Add Decision Policy. **A pop-up will appear prompting you to enter the decision policy details. Provide a name for the decision policy. Then, choose the selection strategy you previously created.

More info here on how to create offers and selection strategies -[https://experienceleague.adobe.com/en/docs/journey-optimizer/using/decisioning/experience-decisioning/selection-strategies](https://experienceleague.adobe.com/en/docs/journey-optimizer/using/decisioning/experience-decisioning/selection-strategies)

Add a fallback offer to show for all visitors. Click on Next and Create.
:::

:::VerticalSplitItem


![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/SFwnHrtq8FYmJyr5RbXeR_image.png)





![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/0S07ljWhPAf7oreQOVFwS_image.png)
:::
::::

::::VerticalSplit{layout="middle"}
:::VerticalSplitItem
Click on **Edit Code**, then navigate to **Decision Policy **on the left panel and select **Insert Policy. **Select required attributes to be returned in the json.

.
:::

:::VerticalSplitItem


![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/SN_8m9IjkW0AONRssikbq_image.png)
:::
::::







Sample offer content

```javascript
{
    "image":"{{item._demosystem4.content.mediaAssets.imageSmallRes.sourceURL}}",
    "url":"{{item._demosystem4.content.navigation.mobileDeepLink}}",
    "buttonText":"{{item._demosystem4.content.textContent.fullCTA}}",
    "title":"{{item._demosystem4.content.textContent.compactTitle}}",
    "text":"{{item._demosystem4.content.textContent.compactSubtitle}}"
} 

```

**Campaign Link:** [[https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/campaigns/summary/5b29ab06-51aa-4434-9c58-e310ccb458c7](https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/campaigns/summary/5b29ab06-51aa-4434-9c58-e310ccb458c7)](https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/campaigns/summary/090ba7d9-8d7e-4704-80c6-984e2f18186d)



Sample scenario is implemented in Luma public project. More info here: [Luma Mobile](https://dsn.adobe.com/docs/experience-decisioning#ywt3t)