--- title: Code Based Experiences - DEPRECATED slug: docs/code-based-experiences-deprecated docTags: createdAt: 2024-06-03T15:40:24.578Z --- DSN Mobile app (DX Demo) - 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. There are two ways you can implement Code Based Experience in your project: sending an offer to a dedicated section (use component "Offer -v2") or replacing full screen content to change the full experience of the app :::hint{type="info"} As for now this feature works only on iOS devices ::: ### 1.Displaying an offer on a dedicated mobile screen To display a dedicated offer e.g. a small ad banner withing the app, we recommend using the "Offer - v2" 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, Blog screen. Edit it and add "Offer v2" component. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/jpoJLSSRUC7AxToeDGNFZ_image.png) ::: :::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem Go to Adobe Journey Optimizer and create a new Campaign. Select Code Based Experience. Campaign is created using surface **offer.** So value for "Enter Uri" field for surface is mobileapp\://com.adobe.demosystem.dxdemo/surface, surface should be replaced with surface name. For demo, it is **mobileapp\://com.adobe.demosystem.dxdemo/offer**. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/6lT9ayzwfrDOOw0MLXHHS_image.png) ::: :::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem ... ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/Y6yoKgXDi2JEyDfM0jncC_image.png) ::: :::: Sample offer content ```javascript { "title": "Unlock the Vault: Your Journey to Gold Membership", "image":"https://demo-system-next.s3.amazonaws.com/assets/luma/luma-gold-members-offer.jpg", "text":"Upgrade to gold and elevate every aspect of your membership!", "link":"" } ``` **Campaign Link:** [https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/campaigns/summary/090ba7d9-8d7e-4704-80c6-984e2f18186d](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: [Code Based Experiences](docId\:aSiA3IKhVZyOaRTxN1irY) ### 2. Replace mobile screen with offer content To replace the full screen with an offer to create more customized user experience. **Implementation steps** ::::VerticalSplit{layout="middle"} :::VerticalSplitItem Configure mobile project. Navigate to any screen in the mobile project. For demo purpose, we are using products screen. Click on Products screen and then click on Personalization in the sidebar. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/sRCCsyzMYXPK8XWVUFxBp_image.png) ::: :::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem Select AJO Code-Based Experience. It will display a field to provide surface id. Provide a value here. For demo, we would use value "products". ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/g4SNStr2XK4T1pj-hEVEo_screenshot-2024-06-03-at-125635-am.png) ::: :::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem Click on Sample Offer and copy the code. This will be used when creating campaign in AJO. ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/OpDY-rsn2Q5TlbGrq9oUC_image.png) ::: :::: :::::VerticalSplit{layout="middle"} ::::VerticalSplitItem Go to AJO. Create a campaign. 1. Select the **Code-based experience** action. 2. Enter the code-based experience surface.Select **Create**. 3. Complete the steps to create a campaign, such as the campaign properties, and , audience, and schedule. 4. Edit your content using the personalization editor. From the campaign edition screen, select **Edit code.** 5. The [personalization editor](https://experienceleague.adobe.com/en/docs/journey-optimizer/using/content-management/personalization/expression-editor/personalization-build-expressions) opens. It is a non-visual experience creation interface which allows you to author your code. 6. Switch the authoring mode from HTML to JSON. Paste the sample offer code that was copied earlier. Make modifications as per the need. :::BlockQuote \{ "data": \[ \{ "meta": \{ "component": "list" }, "content": \{ "items": \[ "Women" ], "layout": "vertical/grid", "itemsInRow": 1, "itemRenderer": "banner-overlay" } } ] } ::: 7.Click **Save and close** to confirm your changes. Click on **Review to activate** and then **Activate.** :::: :::VerticalSplitItem ::Image[]{src="https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/BJCk80Mfv2koXOfmp44NU_screenshot-2024-06-03-at-10549-am.png" size="94" width="3448" height="1590" position="center" showCaption="false"} ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/LTH2vR7eQpvCm7LJMdBXD_image.png) ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/VCElzPH9Jo9PN43ZMLrri_image.png) ::: ::::: ::::VerticalSplit{layout="middle"} :::VerticalSplitItem Open the app and navigate to Products screen. You should see the new content which is fetched from AJO. List of products should now only display "Women" ::: :::VerticalSplitItem ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/LcojF1EyxGuZ4orNMpYae_image.png) ::: :::: **Campaign Used :** [https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/campaigns/summary/bada4498-6246-4697-b206-c071acf4cd5e](https://experience.adobe.com/#/@demosystem4/sname\:public-luma/journey-optimizer/campaigns/summary/bada4498-6246-4697-b206-c071acf4cd5e) ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/nuTGMr5LxMyUfbpVqhpfF_image.png)