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 sections
  • Have Approver-level access to the Adobe Target interface

Add Parameters

Lifecycle metrics are automatically included as parameters in the Target VEC request. You can also add custom parameters to the requests.
To add custom parameters
  1. In Xcode, open the BookingViewController.swift file. This file is used by the Home screen.
  2. Import the Target and Target VEC extensions beneath the existing imports
    import ACPTarget
    import ACPTargetVEC
    
    
  3. In the viewDidLoad() function, after the line with super.viewDidLoad() add the following code. This example code shows how 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 want to use dynamic variables to populate the values. And of course, you would only want to populate the parameters that are related to the view:
    let params = ["param1":"value1"]
    let profileParams = ["profilekey1":"profilevalue1"]
    let product : ACPTargetProduct = ACPTargetProduct.init(id: "1234", categoryId: "furniture")
    let order : ACPTargetOrder = ACPTargetOrder.init(id: "12345", total: 123.45, purchasedProductIds: ["100", "200"])
    let targetParams : ACPTargetParameters = ACPTargetParameters.init(parameters: params, profileParameters: profileParams, product: product, order: order)
    ACPTargetVEC.setGlobalRequest(targetParams)
    
    
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 Xcode project
  2. Rebuild the app and wait for it to reopen in the Simulator
  3. Click in the Console pane of Xcode
  4. Use ⌘-F to open the Find box
  5. Search for targetvec in the Find box
  6. Hit Enter to jump to the Target request and Post body. Locate the custom parameters you just added to the request:

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 UI.
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. BusBookingSwift://com.adobetarget.BusBookingSwift
  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 iOS Device (in our tutorial, the device would have to be linked to Xcode)
    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 anywhere on the link to automatically copy the link to your clipboard
  12. Switch back to the Simulator
  13. Open Safari in the Simulator
  14. Paste the deep link URL into the address bar
  15. Click the Open button to open the app
    If you are unsuccessful when copy-and-pasting the URL from your Desktop to the Simulator it's usually for one of these two reasons:
    1. The URL copied from the Target interface doesn't paste into the Simulator This happens when the Desktop and Simulator clipboards are not synced. If this happens, try toggling off and on the Automatically Sync Pasteboard setting in the Simulator and copy/pasting again:
    2. Pasting the URL lands on the Google Search results page Try repasting the deep link URL into the address bar and hitting Enter . You might need to repeat this a few times.
  16. 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.
  17. Click on text and image assets in your app and you should see options to edit and replace them!
  18. Make some changes to the first screen in your app
  19. Now position the Simulator next to the browser with the VEC open
  20. Navigate to a different screen in the app and notice how the VEC updates with the Simulator!
  21. You can make updates to multiple views in your app, in a single activity!
  22. You can also visually add click-tracking metrics!
  23. 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, background the app by returning to the Home screen and then move the app back into the foreground to make it "Available" again.

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.