Rock Your Mobile Apps! Cordova + Adobe DTM or Launch

If you read my last post, you probably recognized the benefits of including Adobe DTM or Launch in your web-based mobile apps built with Cordova or PhoneGap. At the very least, it’s a nice fail-safe when you realize later that you didn’t include something in your app that is time-sensitive.

Below I’m going to show you the quickest way to setup a Cordova app with Adobe DTM or Launch. But I’m going to assume that you have a basic working knowledge of publishing in DTM or Launch and that you have Node and NPM installed.

Working Sample Code at this cordova-adobe-launch repository.

The clip below shows bits of Adobe’s Launch application in its current Alpha testing state. A lot is going to change before most people get their hands on it, but the concept of building a rule and publishing it will remain the same. In this clip, you’ll see a “custom code” rule that does a simple JavaScript alert and then updates content in the DOM…

Set up DTM or Launch

If you don’t already have a web property setup for your Cordova app, set one up. Then make sure you have a “Production” environment setup and take note of its embed code. The embed code will probably start with something like assets.adobedtm.com.

Create a New Cordova App

Obviously you can skip this step if you already have an app where you’d like to use DTM or Launch. If not, do the following in your terminal…

npm install -g cordova
cordova create hello com.example.hello HelloWorld
cd hello
cordova platform add ios
cordova platform add android
cordova plugin add cordova-plugin-whitelist

Configure App and Include DTM / Launch

In the root of your project folder you will see a “config.xml” file. Open it and validate the the <access origin="*"> tag contains an origin which includes the domain where your embed is hosted. By default the value of * should include it.

Open the “www/index.html” file and update the Content Security Policy tag to include scripts with unsafe-eval for the “assets.adobedtm.com” domain. The tag should look something like this…

<meta http-equiv="Content-Security-Policy" content="
  default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
  script-src https://assets.adobedtm.com 'unsafe-inline'; 
  style-src 'self' 'unsafe-inline'; 
  media-src *; 
  img-src 'self' data: content:;
">

While you have this file open, add your embed code to the <head> tag and the DTM / Launch footer code right before the </body> tag.

Test the App

That’s it! Pretty simple right? Now you can test the app…

cordova run ios

or

cordova run android

More Goodies

Some mobile apps will need to capture data while offline. In these cases, the Adobe Mobile Services SDK may be a better fit. You might be asking if you can use the SDK in the same app as a traditional embed. The answer is yes! You’d want to ensure that you are not making double tracking calls but there’s no technical limitation to using the both together.

 

Adobe Tag Management and Adobe Launch: What are they?

At Adobe Summit, we announced the product I’ve been working on at Adobe for the last year…

Launch

If you haven’t yet heard, Launch is the next evolution of Adobe DTM –  part of the Marketing Cloud Activation core service and it is truly an evolution in the online marketing space!

What is Launch?

Launch has 2 primary functions…

  1. Launch helps you deploy multiple tags (such as analytics or the Facebook tracking pixel) to your website. It does this by combining these JavaScript/HTML libraries into a single embed file and hosting it on Akamai for you. Then you include that in your web-based content. You also have the option to download your build or have Adobe push it to your SFTP server.
  2. Launch is essentially a very powerful if/then engine for your web-content. It allows you to capture data and take actions based on conditions that you specify. You can build rules for your website based on events such as hover, click, etc. When those actions occur, you can trigger analytics tracking, special offer popups, or just about anything else you can imagine via custom code.

One truly awesome benefit of Launch is that it allows you to deploy data collection, tracking, decisioning to any website without ever having to touch the source code. Launch provides you with a JavaScript embed that you include on the page. You don’t ever need to touch it again. Any organization that deals with approval workflows and other red tape when trying to deploy updates to their web content, could greatly benefit from this. So, as you might expect, there is a rights-based workflow for submitting, approving and publishing content in Launch.

Revolutionary? Really?

What’s revolutionary about Launch, is that it allows Adobe internal solutions AND 3rd party developers to extend its functionality! It is truly an open platform. If, you wish to trigger an action for an event that Adobe has not provided, you can create your own extension that makes that event available. You might want to reread that last sentence!

Launch Use Cases

Launch is primarily designed for the world of marketing but there are so many interesting use cases for it! Let’s take a look at just a few creative cases that might be a bit off the beaten path…

Use Case 1 – E-Learning Courseware

Working in the e-learning space, you want to know why some people are skipping question 3 of your Captivate course. You could deploy Adobe Analytics (or Google Analytics) to your courseware via Launch, then you could build a rule in Launch that goes something like this…

  • If a user hits assessment question 3 but doesn’t ever hit question 4 and then leaves the course…
  • …and the user is on a desktop machine…
  • Capture their department, time in course, time on question 3, last action taken, visitor id, etc to Adobe Analytics or Google Analytics.

You could then build an analytics report that starts to help you understand why people are leaving prematurely. Perhaps question 3 is worded in a way that doesn’t make sense to a specific audience, or maybe the course navigation is not easy to use. With Launch, it would be simple to iterate on this rule, improving it until you hone in on the actual cause of student’s lack of completion. You could do with this without ever having to republishing the course.

Use Case 2 – Cordova/PhoneGap Mobile Apps

Web-based mobile apps (such as Cordova/PhoneGap) can include a Launch embed. For example, you may own a small mobile game app which uses IAP (in app purchases) to unlock new features. You know that Christmas is coming up and you’d like to take that seasonal opportunity to make a few extra in-app sales but you don’t have time to update and publish a new version of the app. If you have included Launch in your app, you could add a new page load rule that pops up a special offer when the app loads. You could even change the content of this offer based on data about the user or their location.

Of course there are a million-and-one other use cases that are not specific to online marketing.

The Launch Team

The DTM / Launch team is full of absolutely brilliant leaders, designers and engineers and it’s been a privilege to work as a front-end engineer with them! I think this is just the beginning of great things to come from this team!

To learn more check us out at Adobe’s Launch Website or Adobe’s Launch blog post!

Don’t Go Away!

Keep an eye out for my next post where I’ll share a working Cordova + Adobe DTM/Launch project.