Mobile A/B Test
9 min
The goal of this scenario is to present Adobe Target changing the mobile app content and branding using A/B Testing
The app allows not only swapping e.g., banner image but completely change the app layout, move components around, change logo and app styles
PREREQUISITES:
- Install the DXDemo App.
CONFIGURATION:
- 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
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
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)
or
- try the visual scenario to create json offerHow to create Target offer content mobile offer in the Experience Builder visual editor
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
7. Create one or more locations - depending on how many mboxes you have set up in your mobile project. Use separate location for branding,
8. Create experience B for your locations and create json offers with content and branding updates
9. To test you can split the experience between 0-100% audience to experience B
9. Publish the activity to make it live
10. Pull down to refresh on the home page of your app
Branding Offer Content used in the example above:
{
"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:
{
"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"
}
}
]
}