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.
