--- title: Mobile A/B Test slug: docs/mobile-ab-test docTags: createdAt: 2024-06-04T12:49:09.578Z --- The goal of this scenario is to present Adobe Target changing the mobile app content and branding using A/B Testing :::hint{type="info"} The app allows not only swapping e.g., banner image but completely change the app layout, move components around, change logo and app styles ::: ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/qspj6FkQpz864NAA-7HI-_image.png) **PREREQUISITES:** 1. Install the DXDemo App. 2. Launch property created via[ Quick Setup](https://dsn.adobe.com/quick-setup) or your own with the Target extension. **CONFIGURATION:** 1. Use your mobile project in [Experience Builder](https://dsn.adobe.com/projects) or create a new one. 2. Go to the integrations tab and make sure the Launch property is added there. In case of non-AEP scenarios, sandbox name will remain empty ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/nS2jckTsnSIoWOjlvulxa_image.png) ### UPDATE BRANDING WITH TARGET Switch to the project branding tab - Make sure the switch to enable targeting is on - Fill the mbox name: e.g. userId-myproject-branding - If you will click on "Sample offer content" you will see an offer that will be accepted by Target to update branding. You can update the branding values to change your app look and feel ![](https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-BENIblQ4w3fZOayVaptDF-20241202-071142.png) ![](https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-FFoybvEvMaZUBGMz5SKl7-20241202-071250.png) ### UPDATE CONTENT WITH TARGET Make sure you are on the screens tab - Select the screen that you want to use targeting on (each screen can be targeted separately with different mbox) e.g. click on the Home screen - Expand the Targeting section on the right - Make sure the switch to enable targeting is on - Fill the mbox name: e.g. userId-myproject-home - If you will click on "Sample offer content" you will see an offer that will be accepted by Target to update page content. You can change the content manually by updating the fields and json structure ([Learn more about mobile components](https://docs.adobedemo.com/projects/components/mobile-components)) or - try the visual scenario to create json offer[How to create Target offer content mobile offer in the Experience Builder visual editor](docId\:QfwMk3Y-hT2tmr0tfiR_f) ::Image[]{src="https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-CD7CWTn3Zg8i9wYjbTkZT-20241202-080016.png" size="38" width="574" height="1626" position="center" showCaption="false"} ![](https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-N2x2wVJQRaSiFRZqT3bfX-20241202-080304.png) 5\. Connect your mobile app with your project - Click "Run" in the builder project - Open the app on your phone, go to settings tab, click on the qr code next to the Project ID and scan the qr code from your computer screen Go to Target and create new A/B Test ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/1JtXW1u7VeulnZChMV5xx_image.png) ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/MfKY7ZiNMxAyeGooMe1VU_image.png) 7\. Create one or more locations - depending on how many mboxes you have set up in your mobile project. Use separate location for branding, ![](https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-BSIU-DqMv1CnWgGPe2yBa-20241202-081429.png) 8\. Create experience B for your locations and create json offers with content and branding updates ![](https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-UmLIkZQQ8pU61Tp5LGR4g-20241202-081537.png) 9\. To test you can split the experience between 0-100% audience to experience B ![](https://api.archbee.com/api/optimize/bAgVaanSi1tFmfc8PghaH/u_rT5MKVtLO29IF-6br9z_image.png) 9\. Publish the activity to make it live 10\. Pull down to refresh on the home page of your app ![](https://api.archbee.com/api/optimize/RqpBF32LrA0vzAhJTN80f-fSIuv-EDrwKLAaitSYRRI-20241202-081916.png) Branding Offer Content used in the example above: ```javascript { "logo": "https://contentviewer.s3.amazonaws.com/helium/luma-logo01.png", "bodyFont": "Proxima Nova", "textColor": "#8B8B8B", "headingFont": "Proxima Nova", "buttonTextColor": "#FFFFFF", "panelDropShadow": "10px 5px 5px black", "topBarTextColor": "#1979C3", "panelBorderColor": "#dedede", "textOnImageColor": "#ffffff", "panelBorderRadius": 0, "appBackgroundColor": "#ffffff", "bottomBarTextColor": "#707070", "buttonBorderRadius": 0, "panelBackgroundColor": "#ffffff", "buttonBackgroundColor": "#1979C3", "topBarBackgroundColor": "#ffffff", "bottomBarHighlightColor": "#1979C3", "bottomBarBackgroundColor": "#F5F5F5" } ``` Home Page Offer content used in the example above: ```javascript { "data": [ { "meta": { "id": "4Qx9gjSkf", "order": 0, "component": "banner", "absoluteIndex": 0 }, "content": { "size": "large", "image": "https://demo-system-next.s3.amazonaws.com/assets/luma/luma-banner2-mobile.png", "title": "GET FIT AND LOOK FAB", "layout": "full-overlay", "linkTo": "Women", "target": "Women", "subtitle": "New Luma Collection", "buttonLabel": "SHOP NOW", "horizontalAlignment": "left" } }, { "meta": { "id": "1DGEKHZnDz", "order": 1, "component": "title", "absoluteIndex": 1 }, "content": { "size": "medium", "text": "LATEST ARRIVALS", "weight": "bold" } }, { "meta": { "id": "u02zC62zmv", "order": 2, "layout": "horizontal", "component": "panel", "panelTitle": "", "showBorder": false, "panelMargin": 0, "panelPadding": 8, "absoluteIndex": 1, "itemsAlignment": "center", "panelBorderRadius": 0 }, "content": [ { "meta": { "id": "9UmprrP9F", "component": "list", "absoluteIndex": 2 }, "content": { "type": "horizontal", "items": [ "product4", "DgXwjE2AP", "product3", "B8lXeJc9S" ], "layout": "horizontal", "imageWidth": 110, "itemRenderer": "banner-stacked" } } ] }, { "meta": { "id": "4JexxOhnsB", "order": 3, "component": "offerRenderer" }, "content": { "text": "Offer", "decisionScope": "{\"xdm:activityId\":\"xcore:offer-activity:152588913345aa0a\",\"xdm:placementId\":\"xcore:offer-placement:14de0ac3a8ad8bd4\"}" } }, { "meta": { "id": "wVavONsiml", "order": 4, "component": "title", "absoluteIndex": 3 }, "content": { "size": "medium", "text": "OUR BEST BLOG STORIES", "weight": "bold" } }, { "meta": { "id": "_tHfUd$pWc", "order": 5, "layout": "horizontal", "component": "panel", "showBorder": false, "panelMargin": 8, "panelPadding": null, "absoluteIndex": 5, "itemsAlignment": "center", "panelBorderRadius": null }, "content": [ { "meta": { "id": "UAJE3wRB33", "component": "list", "absoluteIndex": 6 }, "content": { "type": "horizontal", "items": [ "article1", "article3", "article2" ], "layout": "horizontal", "imageWidth": 135, "itemRenderer": "banner-overlay" } } ] }, { "meta": { "id": "9GsaTko8er", "order": 6, "component": "banner", "absoluteIndex": 4 }, "content": { "size": "small", "image": "https://demo-system-next.s3.amazonaws.com/helium/assets/yoga-eq.jpeg", "title": "VIEW OUR BEST GEAR", "layout": "partial-overlay", "linkTo": "Equipment", "target": "Equipment", "subtitle": "Belts and Mats for all sizes", "horizontalAlignment": "left" } } ] } ```