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.
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
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
Test the App
That’s it! Pretty simple right? Now you can test the app…
cordova run ios
cordova run android
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.