Experience League | Image

Create Compelling Mobile Experiences That Engage and Convert with SDK 5

Table of Contents

Lab Overview

As more and more consumers move to mobile apps, it’s important to provide a well-optimized and personalized experience. But optimizing for mobile doesn’t have to start with a complex implementation. In fact, you’ll be surprised to learn about basic mobile optimization strategies that can get you well on your way to winning in mobile engagement.

For this lab, we have prepared two versions of the same app: One with the Experience Cloud pre-implemented and one without. The first two lessons focus on the marketer-oriented tasks associated with mobile app personalization such as creating and launching Target activities. The third lesson focuses on developer-oriented tasks such as adding the Adobe SDK and customizing the Target implementation and uses the non-implemented app.

Key Takeaways

  • How to set up activities using Target's new Mobile Visual Experience Composer (VEC)
  • How to set up activities in mobile apps using Target's Form Composer
  • Capabilities and limitations of each way to create Target activities
  • Implementing the new Mobile SDK and Target in a mobile app

Before we begin

IMPORTANT: At your workstation you should have a paper with your participant number, e.g. “01”. This number will be used for many purposes during the lab, such as for login credentials and to avoid collisions, and so on. Wherever you see “YOUR NUMBER” or “YOUR NAME” in this lab manual, replace it with your participant number or your name.

Lesson 1 - Create a Target Activity using the Mobile Visual Experience Composer (VEC)

Objective

  1. Learn how to pair an app with the Visual Experience Composer (VEC)
  2. Create an A/B Test activity with the Mobile VEC

Lesson Context

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 apps, websites 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 this lesson we will use the Mobile VEC to set up an A/B test activity.

Exercise 1.1 - Set up the local environment

Login to your lab machine with the following credentials:

  • Username: L732
  • Password: summit2019

Before we install the Adobe Mobile SDK, we need to customize the Lesson 1 app so that each users app can be distinguished from each other in the shared Target account.

To open the Lesson 1 app

  1. Open the resources/ folder on the Desktop

  2. Open the Lesson1/ folder

  3. Double-click the Luma.xcworkspace file to open the app in XCode

    Open the Luma.xcworkspace file in XCode

Next we need to customize the app settings to avoid conflicts with other users.

To customize the app settings

  1. Make sure you are in the Project Navigator view (the folder icon)

  2. Double-click Luma in the top left corner to open the Settings pane

  3. Make sure you are on the General settings tab

  4. Update the Display Name field from Luma Your-name to replace Your-name with your name (one word, all lowercase)

  5. Update the Bundle Identifier field from com.adobe.axp.your-name to replace your-name with your name (one word, all lowercase) Update the General settings in XCode

  6. Switch to the Info tab

  7. Expand the URL Types section

  8. Update the URL Schemes field from lumadeeplink.your-name to replace your-name with your name (one word, all lowercase)

    Update the Info settings in XCode

  9. Now open the Offers.swift file.

  10. Change luma-offers{your-number} (Replace your number here, it should look something like luma-offers32)

    Change mboxname in XCode

  11. Save the XCode project by hitting ⌘-S

  12. Run the app and launch it with an iPhone 8 simulator (we find the iPhone 8 simulator easier to use because it still has the "home" button which is easy to click with a mouse).

    Run the app and launch it in the emulator

  13. Wait for the simulator to launch and fully open and get to the home screen. This may take a few minutes. Close any modals about Notifications by clicking either Allow or Don't Allow.

    NOTE: If you get any "Build Failed" messages in XCode, please get the attention of a TA immediately

    Wait for the app to full open

  14. Click on the star icon to open the Offers screen Open the Offers screen

Exercise 1.2 - Log into Adobe Target

  1. Log into the Adobe Experience Cloud

    • Sign in with an Adobe ID
    • dwright+[YOURNUMBER]@adobetest.com
    • Password: Password1$
  2. Skip any screen related to adding a mobile phone number

  3. Skip any "Welcome to the Experience Cloud" intro screen

  4. You should see that you are in the Adobe AGS008 Org

  5. Click the Solution Switcher Icon icon to open the solution switcher

  6. Select Target

    Verify the deep link

  7. Launch Target

    Verify the deep link

Exercise 1.3 Create an A/B Test

A/B tests are a powerful way to learn what experiences work best in your app or website. Combined with segmentation, they can lead to personalization insights. In this exercise, you will create an A/B test with Target's Mobile VEC.

To create the A/B test

  1. Click the Create Activity button and select A/B Test

  2. Select Mobile App

  3. Make sure Visual is selected under Choose Experience Composer

  4. Click the Next button

    Create an A/B Activity using the Mobile VEC

At this point you will be prompted to choose which app to load in the VEC. You just created your own unique app when you updated the app settings and saved them. Now you need to complete the one-time pairing process.

To pair your app

  1. On the Select an app to use screen, click Add New App

    Add a new app

  2. Enter the url scheme you just defined in the Enter URL scheme field, e.g. lumadeeplink.<your-name>://lumadeeplink

  3. Click Create Deep Link

    Enter your URL Scheme and Create the Deep Link

    NOTE: 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 if you have an iOS device linked to XCode
    3. Copy the deep link from the Target interface and send it to the device however you would like
  4. Click on the Copy & Send Link tab.

  5. Click on the link itself and notice how it is automatically copied to your clipboard

    Copy the URL

  6. Switch back to the Simulator

  7. Click the Home button to return to the Simulator's home screen

  8. Click the Safari icon to open the Safari browser

    Open Safari

  9. Paste the deep link URL into Safari's address bar and hit Enter on your keyboard.

  10. The first time you load the deep link, you will probably get a Google search results page. Paste the URL in the address bar a second time and hit Enter on your keyboard again.

  11. What we are expecting to happen is to be prompted to open the page in the "Luma <yourname>" app as pictured below.

  12. Click to open the app

    Paste the deeplink into the URL

    TIP: If you are unsuccessful when copy-and-pasting the URL from your Desktop to the Simulator try one of the following tricks:

    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:

      Toggle the Simulator's clipboard setting

    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.

    If these fixes don't work for you, please raise your hand so a TA can assist you

  13. 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.

  14. Navigate to a different screen in the app and notice how the VEC updates with the Simulator!

    App paired with the VEC

Great! You have paired your app with the VEC. Now, it's time to make some modifications to your app using the VEC.

To make changes with the VEC

  1. Position the Simulator next to the browser with the VEC open
  2. In Simulator, return to the home screen of the Luma app
  3. In the VEC, click on the women jogging image, and observe that two options namely Swap Image, and Edit Image Source open up Click on Swap Image in VEC
  4. Click on Swap Image
  5. Select Adidas Women's jogging image and click Save Select Image from Image Picker
  6. Observe that the image is changed in the app as well as in the interface
  7. In a similar fashion, change the image for Men's.
  8. Now we will try to perform text changes, click on Women label and then click on Edit Text button Change Text in VEC
  9. Change the text as you wish. Observe that changes are reflected real time on the device.
  10. Now lets try to rename the experiences to logical names Rename Experience
  11. Click on Next button to go to Targeting step
  12. In this step, we will change the targeting percentage for the 1st experience to 0% and the 2nd experience to 100%, so that we can easily validate the changes on the app. Change Targeting Percentage
  13. Click on the Next button to go to Goals & Settings step
  14. In this step, we can either use Target metrics or also use Analytics metrics
  15. Change the Reporting Source to Adobe Analytics
  16. Choose the AGS008 Prod report suite
  17. For the Goal Metric, select Use an Analytics metric
  18. Select any Analytics metric, for example Orders
  19. Click Save & Close to save the Activity Select Analytics Metrics
  20. When prompted, name your activity something unique (e.g. VEC <yourname>) and then click Save & Close Name the activity

NOTE: You can also make updates to multiple views in your app, in a single activity! You can also visually add click-tracking metrics!

Validation steps

  1. Once the activity is synced successfully, activate the activity by opening the dropdown and selecting Activate. Activate AB Activity
  2. Note that the Activity Location is tied to the app with the unique name you assigned to it in Exercise 1.1
  3. Now go back to the Simulator
  4. Double-click the Home button a few times until you get the screen showing all of your open apps.
  5. Close the Luma app by clicking-and-dragging it up and off of the screen Close the Luma app
  6. Open the app again, by pressing the Luma icon on
  7. Observe that our 2nd Experience is delivered and rendered successfully on the app. Offer Delivered on App
  8. This is what your app users should experience—they should qualify for a new VEC activity the next time they open the app!

Lesson 2 - Create an Experience Targeting Activity (XT) with the Form Composer

Objective

In this lesson, you will use the Form Based Composer to create a more sophisticated activity in the app. As you learned in the previous lesson, the VEC is limited to changing images and text. Next we will create an activity using the Form Composer that will also change link behavior so we can feature different content on the Offers screen. The form composer can be used for limitless types of changes in mobile apps such as content, functionality, flow, etc.

We will use a type of activity called Experience Targeting. Experience Targeting is a type of activity that allows you to deliver targeted messages to specific audiences. In order to do this we will construct an audience that is based on one of the unique features of mobile app personalization—Lifecycle metrics.

At the end of this lesson, you will be able to:

  • Create audiences using Lifecycle metrics
  • Create an Experience Targeting activity (XT)

Exercise 2.1 - Building Audiences based on Lifecycle 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

    Create a new audience

  3. Name the Audience Launches <= 4 (yourname)

  4. Click Add Rule > Custom

    Select the Custom option

  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

    Audience for Launches <= 4

  9. Now build another audience called Launches > 4 (yourname) defined as a.Launches is greater than 4

    Audience for Launches > 4

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 (which we will look at in Lesson 3), 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.

Exercise 2.2 Create an Experience Targeting (XT) Activity

Now that we have our audiences, let's build an Experience Targeting activity that will serve content to each one.

To build an XT activity

  1. Click Activities in the top navigation to return to the Activities list

  2. Click the Create Activity button to open the dropdown

  3. Click Experience Targeting Create an XT activity

  4. Select Mobile App

  5. Select the Form Composer (note that the VEC can be used with XT activities, too)

  6. In the Choose Property dropdown, select No Property Restrictions

  7. Click the Next button

    Configure a Mobile App with Form composer and no property activity

  8. Change the name of the activity to Form Composer (yourname) (click on the current name to change it)

  9. Click the three dots icon to open the dropdown and then select Change Audience

    Change the audience

  10. Filter the audience list by yourname to locate the audiences you just created

  11. Click on the Launches <= 4 (yourname) audience so that it is highlighted blue and then click Done

    Choose your Launches <= 4 audience

  12. For Location 1 open the dropdown and add the location as luma-offers{your-number} (Replace your number here, it should look something like luma-offers32)

  13. For Content select Change JSON Offer

    Select Change JSON Offer

  14. We have created the offers for you to use, so in the content folder, just click Beginner's Luck so that it is highlighted in blue and then click Done

    Select the Beginner's Luck offer

  15. Notice that the JSON offer has properties for each of the elements that we want to change. The app has been provisioned to look for these properties in the Target response and update the app using these values. We will take a look at this in Lesson 3. You can use whatever JSON format and properties you want and provision your app to do whatever you want based on the offer.

  16. Click Add Experience Targeting

    Click Add Experience Targeting

  17. Filter the audience list by yourname to locate the audiences you just created

  18. Click on the Launches > 4 (yourname) audience so that it is highlighted blue and then click Done

    Choose the Launches > 4 audience

  19. For Content select Change JSON Offer

  20. In the Content modal, click Old Pros so that it is highlighted in blue and then click Done

    Select the Old Pros offer

  21. Click Next to proceed to the Targeting screen

    Click Next to proceed to the Targeting screen

  22. The Targeting screen shows a diagram of how the Audiences will be mapped to the experiences. Click Next to proceed to the Goals & Settings screen

    Click Next to proceed to the Goals & Settings screen

  23. Leave Target as the reporting source, select Revenue as the goal metric and enter orderConfirmPage as the conversion as the mbox

  24. Click the Save & Close button

    Click Save&Close

Congratulations! You have set up your first Mobile XT activity!

Validation Steps

  1. Once the activity is synced successfully, activate the activity by opening the dropdown and selecting Activate. Activate XT Activity

  2. Note that the activity is targeted based on the name of the request (luma-offers<your-number>), to the Workspace (Default Workspace), and to the audiences.

  3. Now go back to XCode

  4. Rebuild the app by clicking the Play icon Rebuild the app

  5. Wait for the Luma app to open again

  6. Click on the star icon to open the deals screen

  7. You should see the activity, with either the "Beginner's Luck" or "Old Pros" experience, depending on how many times you have Launched the app during this lab. You can delete and re-install the app to reset the number of Launches. Or rebuild it to increment the number of Launches.

    Go to the Offers screen to see the activity

Lesson 3 - Implement the Mobile SDK and Launch extension

Objective

In this lesson, we will look at the implementation fundamentals required to get the Target VEC and Form Composer activities working in your mobile application. We will guide you through each step, so don't feel like you need to be an expert mobile app developer to complete this lesson

At the end of this lesson, you will be able to:

  • Log into the Launch user interface
  • Create and configure a mobile Launch property
  • Add the Target and Target VEC extensions in Launch
  • Create, add changes to, and build a Launch library
  • Obtain the app installation instructions from the Launch UI and use them to deploy the Adobe Mobile SDK into your app
  • Add support for the Target VEC, including custom parameters
  • Add a Target request for Form Composer activities

Lesson Context

The new Adobe Mobile SDK is configured in Launch and then implemented in your application.

In this lesson, you will create a mobile Launch property with all of the configurations necessary to deploy Adobe Target in a mobile application and then deploy the Adobe SDK into a mobile app.

Exercise 3.1: Go to Launch

  1. Log into the Adobe Experience Cloud

    1. dwright+[YOURNUMBER]@adobetest.com
    2. Password: Password1$
  2. Skip any screen related to adding a phone number

  3. Skip any "Welcome to the Experience Cloud" intro screen

  4. Click the Solution Switcher Icon icon to open the solution switcher

  5. Select Activation from the menu

    Open the solution switcher using the icon and click Activation

  6. Under Launch, by Adobe, click the Go to Launch button

    Click the Launch button

  7. If you get a "Terms of Use" screen, accept the terms and continue

  8. You should now see the Properties screen:

    Properties Screen

If you use Launch frequently, you can also bookmark the following URL and log in directly https://launch.adobe.com

Exercise 3.2: Create a Property

A property is basically a container that you fill with extensions, rules, data elements, and libraries as you deploy tags to your app. A property can be shared across multiple apps if you track them similarly. For example, suppose that you have apps for iOS and Android that have identical functionality. You can apply one property to both of them.

To Create a Property

  1. Click the New Property button:

    Click New Property

  2. Name your property (e.g. "[YOUR_NUMBER] Summit Lab")

  3. As the platform, click Mobile

  4. Click the Save button

    Create a new Property

Your new property should display on Properties page. Note that if you check the box next to the property name, options to Configure or Delete the property appear above the property list. Click on the name of your property (e.g. YOUR_NUMBER Summit Lab) to open the Overview screen. Click the name of the property to open it

Exercise: 3.3 Add the Target Extensions

An extension is a packaged set of code that extends the Launch interface and the library functionality. Extensions give you the ability to choose only the parts of the Adobe Experience Platform SDK that you need for your specific app. Since you will be implementing Adobe Target with the VEC capabilities, you will add the necessary extensions required to support it.

IMPORTANT: Adding and removing Extensions in mobile Launch properties requires you to update the embed codes in your app. This is different from web Launch properties, in which you can add or remove extensions at any time, without having to update your website.

Adobe Target has two official extensions, the Adobe Target extension and the Adobe Target VEC extension. The Adobe Target extension supports all of the API familiar to users of our earlier mobile SDKs. The Adobe Target VEC extension requires the Adobe Target extension and adds support for Target's Visual Experience Composer, which allows marketers to build simple activities that change image and text elements on the page in a What-You-See-Is-What-You-Get (WYSIWYG) interface.

Add the Target extension

  1. Click the Extensions tab to go to the extensions page

    Go to the extensions tab

  2. Note that the Mobile Core and Profile are pre-installed in every mobile property.

    1. The Mobile Core extension represents the core Adobe Experience Platform SDK required for any app implementation. The core contains common set of functionality and frameworks such as a Experience Cloud Identity services, data event hub, rules engine, reusable networking, disk access routines, etc., which is required by all Adobe and third-party extensions.
    2. The Profile extension allows the SDK to store data in a client-side profile.
  3. Click on the Catalog tab to see the uninstalled extensions

  4. Search for the word "target" to locate the target extensions

  5. Find the Adobe Target extension and click Install

    Go to the Extensions catalog and click Install to add the Target extension

  6. Enter adobeinternalags008 your Client Code (this is the unique identifier of the Target account we are using)

  7. Leave the Environment Id empty (this creates a new host in Target for the app, for customers who use the host groups feature)

  8. Leave the Timeout set to 5 seconds (this is the maximum amount of time the app will wait for the Target response before showing default content)

  9. Click the Save button

    Configure the Target settings

Add the Target VEC extension

Now that the Target extension has been added, you can add the Target VEC extension.

  1. Click on the Catalog tab to see the uninstalled extensions

  2. Search for the word "target" to locate the target extensions

  3. Find the Adobe Target VEC extension and click Install

    Go to the Extensions catalog and click Install to add the Target extension

  4. Turn on Auto-Fetch Target Activities. This will pre-fetch all of the Target activities when the app first loads, reducing the number of requests that need to be made.

  5. Leave the Fetch In Background option off. This setting only appears when Auto-Fetch Target Activities is used. Leaving this setting off will allow you to run VEC activities on the home screen of the app, but will also add a slight delay to the app start up to ensure that the Target request has completed or timed out before the home screen displays. We recommend that you leave this setting off when you are running activities on the home screen and toggle it on when you are not. This setting can be changed at any time in the Launch interface without updating your app.

  6. Leave the Target Workspace Property blank. This is a Target Premium feature that allows enterprise customers to control which users can launch activities in different apps or websites.

  7. Click the Save button

    Configure the Target VEC settings

That's it! Now that you have added the extensions to your property, you can add them to a library.

Exercise 3.4: Save Your Changes to a Library

After configuring your extensions, you need to package them into a library that you can deploy in your app so you can leverage your marketing solutions.

  1. Go to the Publishing tab

  2. Click Add New Library

    Add New Library

  3. Name the Library Initial Setup

  4. Select Environment > Development

  5. Click Add All Changed Resources

    Add All Changed Resources

  6. Note that all of the extensions that the default and Target extensions are now listed as "New Resources" in the library.

  7. Click Save & Build for Development

    Save and Build for Development

  8. After a few moments, the status dot will turn green indicating the library successfully built.

    Library Built

Exercise 3.5 - Set up the local environment

Before we install the Adobe Mobile SDK, we need to close the Lesson 1 app and customize the Lesson 3 app in the same manner that we did to the Lesson 1 app in Exercise 1.1. First, let's close the Lesson 1 app.

To close the Lesson 1 app

  1. In XCode, Click the stop icon

  2. Once the processes have stopped, click the red circle to close the window

    Close the Lesson 1 workspace

  3. In the Simulator, open the Simulator dropdown and click Quit Simulator

    Close the Lesson 1 simulator

Now we can open the Lesson 3 version of the Luma app

To open the Lesson 3 app

  1. Open Finder and navigate to the resources/ folder

  2. Open the Lesson3/ folder

  3. Double-click the Luma.xcworkspace file to open the app in XCode

    Open the Luma.xcworkspace file in XCode

Next we need to customize the app settings to avoid conflicts with other users.

To customize the app settings

  1. Make sure you are in the Project Navigator view (the folder icon)

  2. Double-click Luma in the top left corner to open the Settings pane

  3. Make sure you are on the General settings tab

  4. Update the Display Name field from Luma Your-name to replace Your-name with your name (one word, all lowercase)

  5. Update the Bundle Identifier field from com.adobe.axp.your-name to replace your-name with your name (one word, all lowercase) Update the General settings in XCode

  6. Switch to the Info tab

  7. Expand the URL Types section

  8. Update the URL Schemes field from lumadeeplink.your-name to replace your-name with your name (one word, all lowercase) Update the Info settings in XCode

  9. Now open the Offers.swift file.

  10. Change luma-offers{your-number} (Replace your number here, it should look something like luma-offers32)

Change mboxname in XCode

Exercise 3.6: Install the Mobile SDK

In this exercise, you will implement the Mobile SDK with the extensions and settings corresponding to your Launch property's Development environment. Along the way, you will learn about two main concepts of Launch—Environments and Embed Codes.

At the end of this exercise, you will be able to:

  • Obtain the installation instructions for your mobile Launch property
  • Understand the difference between a Development, Staging, and Production environment
  • Import the Mobile SDK into your AppDelegate file
  • Verify that the SDK has been implemented successfully

Get the Installation Instructions

The Installation Instructions for mobile Launch properties is a collection of code snippets that you either run in your Terminal or add to specific locations in your mobile app.

In Launch, click on the Environments tab in the top navigation to go to the environments page. Note that Development, Staging, and Production environments have been pre-created for you.

Click Environments in the top nav

Development, Staging, and Production environments correspond to the typical environments in the code development and release process. Code is first written by a developer in a Development environment. When they have completed their work, they send it to a Staging environment for QA and other teams to review. Once the QA and other teams are satisfied, the code is then published to the Production environment, which is the public-facing environment which your visitors experience when they download your app.

Launch permits additional Development environments, which are useful in large organizations in which multiple developers are working on different projects at the same time.

The Development environment is the only environment we will use in the lab.

Now let's copy the embed code:

  1. In the Development row, click the Install icon Install icon to open the modal.

  2. If you have previously used Launch in websites, one of the first things you will notice is that there is a lot more information in this modal than for web Launch properties.

  3. Now, beneath the Environment, change the operating system to iOS

    Install icon

Let's go through the instructions to update the App.

About the Podfiles

The Adobe Mobile SDK for iOS uses the CocoaPods to manage dependencies between its various components to make it easier to keep your app updated with compatible libraries. The first four steps in the installation instructions are related to creating a podfile, adding Adobe dependencies to the podfile, and then installing them in your app.

NOTE: For the sake of time in this lab, we have preinstalled the Pods into the Lesson 3 app and we will skip the first four installation instructions related to the podifles.

Update the AppDelegate

Now it's time to import the SDK into the App

To import the SDK

  1. Open the Luma > Luma > AppDelegate.swift file

    Copy the Swift import statements to your clipboard

  2. In the Launch interface, scroll to the Add Initialization Code section and click the Swift tab

  3. Copy the import statements, by clicking the first Copy icon in the Add Initialization Code section:

    Copy the Swift import statements to your clipboard

  4. In XCode, paste these import statements into the AppDelegate file after the line with // import Adobe Experience Cloud SDK5 (or you can just uncomment the import statements already in the AppDelegate.swift file)

    Paste the Swift import statements into your AppDelegate file

  5. Scroll down the AppDelegate.swift file to the section with the comment: // Init Adobe Experience Cloud Mobile SDK (v5) Remove the comments (the /* and */) that are surrounding the section so that it looks like this

    Uncomment the SDK initialization section

  6. In the Launch interface, copy the two lines related to the ACPCore, by clicking the second Copy icon in the Add Initialization Code section. The first line turns on console logging statements (available options are "debug", "verbose", "warning", and "error"). The second line points to the unique identifier of your Launch environment and will be different from our screenshot.

    Copy the Core statements to your clipboard

  7. In XCode, paste these Core statements into the AppDelegate file, just after the line with // Init Adobe Experience Cloud Mobile SDK (v5), replacing the two similar lines already there to customize the app to read your new Launch property:

    Paste the Core statements into your AppDelegate file

  8. The next section turns on special debugging statements for the Target VEC. Note that this code is not part of the Launch installation instructions, although it is in the Target Mobile VEC documentation.

    Leave the Target Debug statements alone

  9. In the Launch interface, copy the extension statements, by clicking the third Copy icon in the Add Initialization Code section: Copy the Extension statements to your clipboard

  10. In XCode, paste these extension statements, replacing the existing, similar code. (There shouldn't be any references to Analytics or Campaign when you are done):

    Paste the Extension statements to your clipboard

Verify the implementation

Now, lets make sure that everything is working so far.

To verify the implementation

  1. Use ⌘-S to save your XCode project

  2. Run the app and launch it with an iPhone 8 simulator (we find the iPhone 8 simulator easier to use because it still has the "home" button which is easy to click with a mouse).

    Run the app and launch it in the emulator

  3. Wait for the simulator to launch and fully open and get to the home screen. This may take a few minutes.

    NOTE If you get any "Build Failed" messages in XCode, please get the attention of a TA immediately

    Wait for the app to full open

  4. Confirm that calls are being made to the Adobe servers in the XCode Debug Console. If the Debug Console doesn't automatically open, open it via the View > Debug Area > Activate Console menu option

    Opening the Debug Console Wait for the app to full open

Here are examples of some specific calls you can look for:

  1. Calls to retrieve the Launch configuration (filter your console to adobedtm.com). Note the extension configurations which you entered in the earlier lesson. While adding the extension requires an update to the app, these settings can be managed externally in Launch and changed at any time:

    [2019-01-15 12:11:44.518220-0500 Luma[52399:5056293] [AMSDK DEBUG <RulesDownloader>]: Successfully downloaded Rules from 'https://assets.adobedtm.com/launch-EN360aefc739b04410816f751a95861744-development-rules.zip'
    {"target.propertyToken":"","target.timeout":5,"global.privacy":"optedin","analytics.backdatePreviousSessionInfo":true,"analytics.offlineEnabled":true,"build.environment":"dev","rules.url":"https://assets.adobedtm.com/launch-EN360aefc739b04410816f751a95861744-development-rules.zip","target.clientCode":"techmarketingdemos","experienceCloud.org":"7ABB3E6A5A7491460A495D61@AdobeOrg","target.autoFetch":true,"target.fetchBackground":true,"lifecycle.sessionTimeout":300,"target.environmentId":"busbookingapp","analytics.server":"tmd.sc.omtrdc.net","analytics.rsids":"tmd-mobile-dev1","analytics.batchLimit":0,"property.id":"PRb4881271498b4f2cbaf67d38a8f3891a","global.ssl":true,"analytics.aamForwardingEnabled":true}](2019-02-21 18:23:12.223574-0500 Luma[39907:282412] [AMSDK DEBUG <RulesDownloader>]: Successfully downloaded Rules from 'https://assets.adobedtm.com/launch-ENbb65530deb4b4a38afcfccf2e64fdb66-development-rules.zip'
        "rules.url" = "https://assets.adobedtm.com/launch-ENbb65530deb4b4a38afcfccf2e64fdb66-development-rules.zip";
        "rules.url" = "https://assets.adobedtm.com/launch-ENbb65530deb4b4a38afcfccf2e64fdb66-development-rules.zip";
     {"target.timeout":5,"target.propertyToken":"","global.privacy":"optedin","build.environment":"dev","rules.url":"https://assets.adobedtm.com/launch-ENbb65530deb4b4a38afcfccf2e64fdb66-development-rules.zip","experienceCloud.org":"93412AC5562E004A7F000101@AdobeOrg","target.clientCode":"adobeinternalags008","lifecycle.sessionTimeout":300,"target.autoFetch":true,"target.fetchBackground":false,"target.environmentId":"","property.id":"PRe87aae85780a4e3da9d217920fc8fe41","global.ssl":true})
    
  2. Request to the ID Service (filter your console to demdex.net)

    [ 2019-01-15 12:11:45.164590-0500 Luma[52399:5056322] [AMSDK DEBUG <com.adobe.module.identity>]: Sending request (https://dpm.demdex.net/id?d_rtbd=json&d_ver=2&d_orgid=7ABB3E6A5A7491460A495D61@AdobeOrg&d_mid=17179986463578698626041670574784107777&d_blob=j8Odv6LonN4r3an7LhD3WZrU1bUpAkFkkiY1ncBR96t2PTI&dcs_region=9)](2019-02-21 18:23:14.149510-0500 Luma[39907:282436] [AMSDK DEBUG <com.adobe.module.identity>]: Sending request (https://dpm.demdex.net/id?d_rtbd=json&d_ver=2&d_orgid=93412AC5562E004A7F000101@AdobeOrg&d_mid=17615499922891563414881652725772701640&d_blob=j8Odv6LonN4r3an7LhD3WZrU1bUpAkFkkiY1ncBR96t2PTI&dcs_region=9))
    

Our AppDelegate file also had a line ACPTargetVEC.allowDebugLogging(true) in it. This is a special debugging command, which is not part of the Launch installation instructions. It exposes details related to the Target request used for VEC activities.

To locate the Target VEC request

  1. Click in the console

  2. Use ⌘-F to open the Find box

  3. Search for targetvec in the Find box

  4. Hit Enter to jump to the Target request and Post body (Note that the Lifecycle parameters are automatically included):

    Verify Target VEC Logging

Note that the Target VEC request is made automatically since we used the "Auto-Fetch Target Activities" option in the Launch extension configuration. Other than importing the extension into your app and adding the line for the deeplink support, there's nothing else you need to do to get started with the Target VEC in your own app!

Congratulations, you've added the SDK to a mobile app!

Exercise 3.7: Adding Additional Parameters to the Target VEC Request

In this exercise, we will enhance our VEC request by adding some parameters to the call.

Adding parameters to the request will allow you to enhance your personalization capabilities by sending new options for audience creation and machine-learning modeling to Adobe Target. They also play an important role in delivering Recommendations content and registering order metrics.

To add custom parameters

  1. In XCode, open the Home.swift file

  2. Uncomment the imports for ACPCore, ACPTarget, and ACPTargetVEC

    Add Imports to Home.swift

  3. In the viewDidLoad() function, after the //TargetVEC Extension Request Parameters comment, uncomment the parameter code by removing the /* and */. This example code shows how request 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 values from a Dictionary to populate the values:

    Add Parameters to the TargetVEC request

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. Use ⌘-S to save the XCode project

  2. Rebuild the app, by clicking the play icon in Xcode

  3. When the app has opened successfully click in the Console pane of XCode

  4. Use ⌘-F to open the Find box

  5. Search for mboxparam in the Find box

  6. Hit Enter to jump to the Target request and Post body

  7. You should see all of the parameters above now passed in the Target VEC request (after locating mboxparam1, scroll up to see the rest of them)

    Verify Parameters to the TargetVEC request

Exercise 3.8: Adding a Request for the Form Composer activity

Supporting activities with more functionality, such as our Form Composer activity, require slightly more implementation. A custom Target request and response handling must be embedded in the app and released with an update to the app store. Successful optimization programs will determine reusable locations in their apps to position this code so that after the initial implementation, marketers can continually update the content via the Target interface without additional updates needed in the app code itself (e.g. by creating new JSON offers).

To add custom request

  1. In XCode, open the Offers.swift file

  2. Uncomment the import for ACPCore and ACPTarget

  3. Uncomment the code in the // Adobe Target: Getting an Offer section by removing the /* and */

    Verify Parameters to the TargetVEC request

The code that you just uncommented will make a request with the name "luma-offers{yournumber}" whenever a visitor opens the Offers screen in the app. If the request is part of an experience set to show "default" content, or if their request times out, they will execute the "default-content" code, which if you look further down in the Offers.swift file you will see is defined in the setDefaultOffers() function.

If the visitor qualifies for a personalized experience, they will execute the setOfferFromAdobeTargetResponse function, which will extract the JSON from the Target offer and use it in the setOffer() function also defined later in the Offers.swift file.

So, you see that the the app needs to be provisioned to make the request (custom parameters can be added) as well as handle the response that comes back. There needs to be coordination between the app developers and the marketers about what Target needs to do and the format of the Target offer.

To verify the request

  1. Use ⌘-S to save the XCode project

  2. Click the play icon in XCode to rebuild the app

  3. When the app has opened successfully click on the star icon to open the Offers screen

    Open the Offers screen

  4. In XCode, click in the Console pane

  5. Use ⌘-F to open the Find box

  6. Search for luma-offers in the Find box

  7. Hit Enter to jump to the new Target request and Post body

    Open the Offers screen

Was your Experience Targeting activity delivered in the response?

Additional Resources