At this year’s summit Adobe Summit, we had the exciting opportunity to showcase Perficient as a leading Adobe partner. As a Silver Sponsor, we felt it was our duty to demo Adobe powerful products from the Marketing Cloud by integrating Adobe Dynamic Tag Management (DTM – formally known as Satellite), Adobe Experience Manager (AEM – formally known as CQ5), Adobe Target (formally known as Test&Target) and Adobe Analytics (formally known as SiteCatalyst) seamlessly into a hybrid mobile application.
Overview
Perficient was self tasked to feature a highly interactive, visually compelling Adobe Summit App built in AEM Mobile that allows users to see real-time analytics from Adobe Workbench, an interactive analytics application part of Adobe Analytics that allows you to build visualization dashboards, as well as experience personalized content based off their responses on the survey taken from their mobile device.
Challenge
Integrating DTM and Target on a single page application in AngularJs, a JavaScript front-end framework.
The application was built with Cordova (formally known as Adobe PhoneGap), a hybrid app development framework which consist of HTML, CSS and JavaScript, we were able to leverage the mobile platform’s Web view to render content. Since DTM is a JavaScript based container, we were able to integrate many of the other Adobe Marketing Cloud products that we come so accustom to.
Using DTM as a host for Adobe Tools such as Adobe Analytics and Target, you are able to push, configure, track, integrate and perform marketing initiatives such as performing A/B tests with different components on the page and tracking user activities on your app.
STEP 1
We built a base template for each page (“mobileapps/components/angular/ng-page”) and we extended our pages from that template by creating an AEM (CQ) project using Apache Maven, a building management tool.
STEP 2
After configuring our property in Adobe Dynamic Tag Management, we went to our first page in the app, in this case the login page, and inserted the DTM bootleg snippet.
“<script src=”https://assets.adobedtm.com/3215e845c9690cbe968752c99b825440070e111f/satelliteLib-21077d4adfcbef88029b6d7609a4be07d51b0616-staging.js”></script>”
Notes: Place snippet before the end of <head> section in the head.jsp;
Screenshots from CRXDE Lite (Adobe AEM) and Maven Project
STEP 3
In the login page component, go to body.jsp, and insert the DTM snippet in the body of the page.
“<script type=”text/javascript”>_satellite.pageBottom();</script>”
Notes: Place snippet before the end of <body>;
Screenshots from CRXDE Lite (Adobe AEM) and Maven Project
STEP 4
Since the summit app is an Angular SPA, we just needed to put the snippets in the first page, and the JS will be loaded/available for all other pages.
Therefore the next step was to UAT/QA and verify the JS was getting downloaded correctly.
STEP 5
Now we are ready to add our Adobe Analytics and Adobe Target tools in DTM, where we were able to implement our analytics solution design and run different personalize tests based data being collected from Adobe Analytics including custom variables and success events.
Nice! I’m curious… did you guys play with the Adobe Mobile Services SDK plugin at all?
I also found this info helpfule when integrating DTM with Cordova/PhoneGap…
http://www.hickendesign.com/site/2017/05/rock-mobile-apps-cordova-adobe-dtm-launch/