Back

This guide shows you how to set up Adobe Target in your mobile app without installing the Adobe SDK. This solution uses the Tealium SDK webview and the Remote Commands module to send and receive requests to the Adobe Visitor API (Experience Cloud) and the Adobe Target API.

In this article:

Table of Contents Placeholder

Before You Begin

Install the Tealium SDK

The sample app for this solution uses Tealium for Swift, but this can be accomplished with any of the Tealium mobile libraries that contain a Webview and Remote Commands module.

Understand Remote Commands and the Custom Remote Command Tag

There are some resources available within the learning community and GitHub that provide examples of how to define and set up remote commands. Here are a few:

Understand the Adobe Target API

To set this up in Tealium IQ, you need the following information from either your Adobe representative or the Adobe Target dashboard.

How It Works

We send an HTTP request out from within the mobile app code using the Custom Remote Command tag (formerly TagBridge). The response returned from Adobe Target contains the experience data that the developers can use to display the appropriate experience to the user. That response is either parsed in TiQ from within a JS Code extension, or the entire response is sent back to the app so the developer can parse with native app code. Either way, the Target data is returned to the app without using the SDK. This can also allow business users to easily add other mbox requests from within Tealium.

adobetargetremoteapi.png

Use Cases

  • Use Case #1 - Account Signup Test (A/B/C)
    Test three different signup flows to see which version has the highest conversion rate.
  • Use Case #2& - Experiential Dog Affinity Test (Experiential)
    Run a Target Experiential Test that changes all images on the mobile app to include dogs for someone who came in from a "Dog Affinity" Audience Campaign. Need to compare control vs. experiential group.

iQ Tag Management Setup

This demo is based on the Adobe Target API postman collection.

Tags

In these steps you will add two Custom Remote Command tags (formerly TagBridge) tags and the Adobe Experience Cloud ID tag.

  1. Add the Experience Cloud ID Tag
  2. Add the Custom Remote Custom Command tag named "Adobe Target Request"
  3. Set the Load Rule: lifecycle_type EQUALS "launch"
  4. Set the Command ID to: _http
  5. Map the following variables (add them if they do not exist):
    • target_url -> url
    • target_method -> method
    • target_body -> body
    • target_callback -> callback_function

tagmappings.png

  1. Add another Custom remote Command tag named "Display Experience"
  2. Set the Load Rule to: adobe_content is populated
  3. Set the Command ID to: display_xxx (whatever is set in the RemoteCommand within the App)
  4. Add the data mapping: adobe_content -> contenttagmappings2.png

Extensions

The following extensions are also needed to construct the HTTP calls to the Adobe API.

Adobe Target Request Variables

  1. Add a Set Data Values extension that is scoped to the Adobe Target Request Custom Remote Command tag.
  2. Set the following variables
    • target_url - set to the Adobe provided URL for this use case.
      Text value: https://xxxxx.tt.omtrdc.net/rest/v1/mbox/xxxxTestSession-1?client=xxxxx
    • target_method - the method of the API call.
      Text value: "POST"
    • target_body - set to the Adobe provided request JSON body. Set here as a JS Code value. (Learn more about the Adobe Target API.)

      Coordinate with your Adobe representative to validate the values in this object.

      JS Code value:
      {
          "mbox": "mobile-home-screen",
          "thirdPartyId": "xxxxUser-xxxx",
          "marketingCloudVisitorId": b.adobe_mid,
          "tntId": "123456xxxxx",
          "requestLocation": {
              "pageURL": "https://www.xxxxx.com/",
              "impressionId": "1",
              "host": "xxxxx.com"
          },
          "mboxParameters": {
              "name": "John Doe"
          },
          "profileParameters": {
              "custState": "prospect"
          }
      }

      tagridgeextension.png

Adobe Target Callback

Add a JavaScript Code extension that defines the target_callback.

The target_callback can be a very simple callback or a complicated one depending on what Adobe is returning in the API call. In the first use case, Adobe returns a multi-level nested object in the JSON response that is not easy to parse in the Safari web view, JavaScript Code extension is used to parse the response.

Ask your Adobe representative to create an experience response with a flat JSON response.

The callback function takes two parameters - code and body. The body is the API response, which is passed back to the Custom Remote Command tag we added earlier (Display Experience, in this case UID 3).

Once this tag is triggered, the data will be sent to the app and the corresponding RemoteCommand ("display_xxx") will be executed.

  • Multi-level Object Callback:tagbridgecallback1.png
  • Flat Object Callback
    b.target_callback = function(code, body) {
        if (body && body.toString().indexOf('null') === -1) {
            utag.link({
                adobe_content: body
            }, null, [3]);
        }
    };
    tagbridgecallback2.png

Here is the code within the block referenced above (from a demo app):

if signInRemoteCommandAdded == nil {
    signInRemoteCommandAdded = TealiumRemoteCommand(commandId: "display_signin",
                                                    description: "Display Experience Data") { (response) in
        let customCommandData = response.payload()
        guard let converted = ConvertKeys.init(fromDictionary: customCommandData) else {
            assertionFailure("Error converting keys in Custom Command Data")
            return
        }
        TealiumManager.targetData.experience = converted.experience
    }
    TealiumManager.shared.tealium?.remoteCommands()?.add(signInRemoteCommandAdded!)
}

The TealiumManager.targetData.experience is used in the view to display whatever experience necessary.

Demo App

The above example can be viewed in full by downloading the Adobe Target demo app.

Tags (1)