{"id":1238,"date":"2017-05-31T11:33:51","date_gmt":"2017-05-31T18:33:51","guid":{"rendered":"http:\/\/www.hickendesign.com\/site\/?p=1238"},"modified":"2017-05-31T22:38:34","modified_gmt":"2017-06-01T05:38:34","slug":"rock-mobile-apps-cordova-adobe-dtm-launch","status":"publish","type":"post","link":"https:\/\/www.hickendesign.com\/site\/2017\/05\/rock-mobile-apps-cordova-adobe-dtm-launch\/","title":{"rendered":"Rock Your Mobile Apps! Cordova + Adobe DTM or Launch"},"content":{"rendered":"<p><img data-recalc-dims=\"1\" loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch-1024x478.png?resize=525%2C245\" alt=\"\" width=\"525\" height=\"245\" class=\"alignnone size-large wp-image-1263\" style=\"border: 0;\" srcset=\"https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch.png?resize=1024%2C478&amp;ssl=1 1024w, https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch.png?resize=300%2C140&amp;ssl=1 300w, https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch.png?resize=768%2C359&amp;ssl=1 768w, https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch.png?resize=500%2C234&amp;ssl=1 500w, https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch.png?w=1575&amp;ssl=1 1575w\" sizes=\"auto, (max-width: 525px) 100vw, 525px\" \/><\/p>\n<p>If you read <a href=\"http:\/\/www.hickendesign.com\/site\/2017\/05\/adobe-tag-managment-adobe-launch-what-are-they\/\">my last post<\/a>, 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&#8217;s a nice fail-safe when you realize later that you didn&#8217;t&nbsp;include something in your app that is time-sensitive.<\/p>\n<p>Below I&#8217;m going to show you the quickest way to setup a Cordova app with Adobe DTM or Launch. But I&#8217;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.<\/p>\n<p><strong>Working Sample Code at <a href=\"https:\/\/github.com\/markhicken\/cordova-adobe-launch\">this&nbsp;cordova-adobe-launch&nbsp;repository<\/a>.<\/strong><\/p>\n<p>The clip below shows bits of Adobe&#8217;s Launch application in its current Alpha testing state. A&nbsp;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&#8217;ll see a &#8220;custom code&#8221; rule that does a simple JavaScript alert and then updates content in the&nbsp;DOM&#8230;<\/p>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/jGqdKJyCPxc\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h2>Set up DTM or Launch<\/h2>\n<p>If you don&#8217;t already have a web property setup for your Cordova app, set one up. Then make sure you have a &#8220;Production&#8221; environment setup and take note of&nbsp;its embed code. The embed code will probably start with something like <code>assets.adobedtm.com<\/code>.<\/p>\n<h2>Create a New Cordova App<\/h2>\n<p>Obviously you can skip this step if you already have an app where you&#8217;d like to use DTM or Launch. If not, do the following in your terminal&#8230;<\/p>\n<pre lang=\"bash\" cssfile=\"none\">npm install -g cordova\ncordova create hello com.example.hello HelloWorld\ncd hello\ncordova platform add ios\ncordova platform add android\ncordova plugin add cordova-plugin-whitelist<\/pre>\n<h2>Configure App and Include DTM \/ Launch<\/h2>\n<p>In the root of your project folder you will see a &#8220;config.xml&#8221; file. Open it and validate the the <code>&lt;access origin=\"*\"&gt;<\/code> tag contains an origin which&nbsp;includes the domain where your embed is hosted. By default the value of <code>*<\/code> should include it.<\/p>\n<p>Open the &#8220;www\/index.html&#8221; file and update the Content Security Policy tag to include scripts with unsafe-eval for the &#8220;assets.adobedtm.com&#8221; domain. The tag should look something like this&#8230;<\/p>\n<pre lang=\"html4strict\">&lt;meta http-equiv=\"Content-Security-Policy\" content=\"\n  default-src 'self' data: gap: https:\/\/ssl.gstatic.com 'unsafe-eval'; \n  script-src https:\/\/assets.adobedtm.com 'unsafe-inline'; \n  style-src 'self' 'unsafe-inline'; \n  media-src *; \n  img-src 'self' data: content:;\n\"&gt;<\/pre>\n<p>While you have this file open, add your embed code to the <code>&lt;head&gt;<\/code> tag and the DTM \/ Launch footer code right before the <code>&lt;\/body&gt;<\/code> tag.<\/p>\n<h2>Test the App<\/h2>\n<p>That&#8217;s it! Pretty simple right? Now you can test the app&#8230;<\/p>\n<pre lang=\"bash\" cssfile=\"none\">cordova run ios<\/pre>\n<p>or<\/p>\n<pre lang=\"bash\" cssfile=\"none\">cordova run android<\/pre>\n<h2>More Goodies<\/h2>\n<p>Some mobile apps will need to capture data while offline. In these cases, the Adobe <a href=\"https:\/\/www.npmjs.com\/package\/adobe-mobile-services\">Mobile Services SDK<\/a> 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&#8217;d want to ensure that you are not making double tracking calls but there&#8217;s no technical limitation to using the both together.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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&#8217;s a nice fail-safe when you realize later that you didn&#8217;t&nbsp;include something in your app that is time-sensitive. Below I&#8217;m going to show you &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/www.hickendesign.com\/site\/2017\/05\/rock-mobile-apps-cordova-adobe-dtm-launch\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Rock Your Mobile Apps! Cordova + Adobe DTM or Launch&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":1264,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1238","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-technical"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.hickendesign.com\/site\/wp-content\/uploads\/2017\/05\/CordovaDTM_Launch-Wide.png?fit=5000%2C1813&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/posts\/1238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/comments?post=1238"}],"version-history":[{"count":17,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/posts\/1238\/revisions"}],"predecessor-version":[{"id":1294,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/posts\/1238\/revisions\/1294"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/media\/1264"}],"wp:attachment":[{"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/media?parent=1238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/categories?post=1238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hickendesign.com\/site\/wp-json\/wp\/v2\/tags?post=1238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}