Show Menu
TOPICS×

Add Adobe Target's Visual Experience Composer (VEC)

In this lesson, you will enable the Target Visual Experience Composer (VEC) for Mobile apps.
Adobe Target is the Adobe Experience Cloud solution that provides everything you need to tailor and personalize your customers' experience, so you can maximize revenue on your web and mobile sites, apps, social media, and other digital channels.
The Visual Experience Composer (VEC) for Native Mobile Apps lets you create activities and personalize content on native mobile apps in a do-it-yourself fashion without continuous development dependencies and app-release cycles.
In the lesson Add Extensions , you added the Target VEC extension to your Launch property. In the lesson Install the Mobile SDK you imported the extension into the sample application. Only a few minor updates are required to start setting up activities in Target's mobile visual experience composer!
Both the Target and Target VEC Launch extensions are required to use the Target VEC in your mobile application.

Learning Objectives

At the end of this lesson, you will be able to:
  • Enable the sample app for the Target VEC
  • Add parameters to the Target VEC request
  • Pair your device with the VEC
  • Create an activity using the VEC

Prerequisites

To complete the lessons in this section, you must:
  • Complete the lessons in Configure Launch section.
  • Have Approver-level access to the Adobe Target interface

The App Load request

Target will fire an "app load" request when the app first loads because of the settings we selected when we configured the Target VEC extension. This request prefetches all Target VEC activities that you created for your app.
In Android studio, filter Logcat to "Target r" to show the Target requests and responses. Notice the parameters for the application name and version. All Target VEC activities that you create will automatically be targeted to these properties.

Add Parameters

As you just saw in the last exercise, app Lifecycle metrics are automatically included as parameters in the Target VEC request. You can also add custom parameters to the requests, globally or for specific views in the app.
To add custom parameters globally
  1. In Android Studio, open DemoApplication file.
  2. Import the Target VEC extension by adding import ACPTargetVEC beneath the existing import
  3. Add the following sample code in the onCreate() function, before the extensions are registered. This example code shows how mbox parameters, profile parameters, product (or entity) parameters, and order parameters can be added to the TargetVEC request. This example uses static values, while in your actual app you would likely want to use dynamic variables to populate the values. And of course, you would only want to populate the parameters that are relevant to all views:
    Map<String, String>targetParams = new HashMap<>(); //params
    targetParams.put( "param1", "value1");
    Map<String, String>taregtProfileParams = new HashMap<>(); //profile params
    taregtProfileParams.put("profilekey1","profilevalue1");
    
    TargetVEC.setGlobalRequestParameters(new TargetParameters.Builder()
             .parameters(targetParams)
             .profileParameters(taregtProfileParams)
             .product(new TargetProduct("1234", "furniture"))
             .order(new TargetOrder("12343", 123.45, Arrays.asList("100", "200")))
             .build());
    
    
  4. You may notice errors in Android Studio, since the parameter code above requires the following imports, which you need to add to the file:
    import com.adobe.marketing.mobile.TargetOrder;
    import com.adobe.marketing.mobile.TargetProduct;
    import com.adobe.marketing.mobile.TargetParameters;
    import java.util.Arrays;
    import java.util.Map;
    import java.util.HashMap;
    
    
Now that you've added parameters to the app, it's time to confirm they are being passed in the request.
To verify the parameters
  1. Save the Android Studio project
  2. Rebuild the app and wait for it to reopen in the Emulator
  3. Open the Logcat pane of Android Studio
  4. Filter to show all statements with "Target r"
  5. The custom parameters you just added should be visible in the request
For more information, and details on how to pass parameters with specific views, see the documentation .

Pairing the Mobile App with the Target Interface

In order to create VEC activities in the Target interface, you must first pair Target with your app. This pairing is achieved with the use of deep links.

Create an activity in the Mobile VEC

Now let's create an activity in the Target interface.
To Create an Activity with the Target VEC
  1. Use the solution switcher to go to Target
  2. Launch Target
  3. Click the Create Activity button and select A/B Test
  4. Select Mobile App
  5. Make sure Visual is selected under Choose Experience Composer
  6. Click the Next button
  7. On the Select an app to use screen, click Add New App
  8. Enter the url scheme you just defined in the Enter URL scheme field, e.g. http://com.adobe.example.busbooking/
  9. Click Create Deep Link
    You have a few options to send the deep link to the app. You can:
    1. Email the deep link to a valid email address and then open the link with an email application on the device
    2. Take a photo of the QR code from your Android Device (in our tutorial, the device would have to be linked to Android Studio)
    3. Copy the deep link from the Target interface and send it to the device however you would like
  10. Click on the Copy & Send Link tab.
  11. Click on the generated URL (note that clicking on the URL will automatically copy it to your clipboard)
  12. Open a Terminal window (or switch back to it if you still have it open)
  13. Navigate to your Android platform-tools directory (you may already be here): cd Library/Android/sdk/platform-tools/
  14. Confirm that your emulator is attached: ./adb devices
  15. Open the adb shell: ./adb shell
  16. In the adb shell, replace # in the following command with the URL you just copied to your clipboard: am start -W -a android.intent.action.VIEW -d "[YOUR_TARGET_URL_WITH_TOKEN]" "com.adobe.busbooking"
  17. After the App has loaded, switch back to your browser tab where you have Target opened. You should see your app loaded in the VEC.
  18. Click on text and image assets in your app and you should see options to edit and replace them!
    If you don't see the Mobile VEC automatically open in the Target interface after opening the deep link in the mobile device, here are some things to try:
    1. Make sure you are using the exact same URL in the Target interface and didn't accidentally clip off any characters. When running the command in the adb shell, make sure the URL is in quotation marks
    2. Confirm that you added the additional dependencies to the build.gradle file that are required by the Target VEC. These dependencies should have been added during the Install the Mobile SDK lesson
    3. Try clearing the Data stored in the app detailed in the picture below
  19. Make some changes to the first screen in your app
  20. Now position the Emulator next to the browser with the VEC open
  21. Navigate to a different screen in the app and notice how the VEC updates with the Emulator!
  22. You can make updates to multiple views in your app, in a single activity!
  23. You can also visually add click-tracking metrics!
  24. Save and Approve your activity and verify that you can see it in the sample app
Pairing the device with the VEC is a one-time action. When you create more activities in the future on the same device, you will just be able to select the device from a list, as pictured below:
If you have a device open, but it is "Unavailable" in the selection menu, try closing and reopening the app on the emulator or device.

Building Audiences based on Lifecyle metrics

Lifecycle metrics built-in metrics about the visitor's usage of your app that are automatically included in calls made by the Adobe Mobile SDK. You can easily build audiences in Target based on these metrics.
To create an audience
  1. In the Target interface, click Audiences in the top navigation
  2. Click the Create Audience button
  3. Name the Audience Launches < 5
  4. Click Add Rule > Custom
  5. In the first dropdown, select the a.Launches parameter. All of the Lifecycle metric parameters begin with the "a." prefix. We will Target content based on the number of app Launches the user has, which is an excellent way to target first time users of your app with an instructional, first-time-user-experience (FTUE).
  6. In the next dropdown, select is less than
  7. In the third dropdown, enter 5
  8. Click Save
Note that there are a huge variety of out-of-the-box audience building options in Target. Additionally, you can send up custom data in the Target request for audience-building, use audiences shared from other Experience Cloud solutions such as Audience Manager and Analytics, and CRM data shared to Target using the Customer Attributes feature of the People Core Service.