Adobe Summit: Integrating Adobe DTM, Target, Analytics & AEM

Ryan Perea — Fri, 13 May 2016 21:40:06 +0000

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.

“”

Notes: Place snippet before the end of 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.

“”

Notes: Place snippet before the end of ;

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.

Adobe Summit: Integrating Adobe DTM, Target, Analytics & AEM was first posted on May 13, 2016 at 4:40 pm.
©2016 "Adobe". Use of this feed is for personal non-commercial use only. If you are not reading this article in your feed reader, then the site is guilty of copyright infringement. Please contact me at gserafini@gmail.com

Adobe Data Workbench – Adobe

Adobe Summit: Integrating Adobe DTM, Target, Analytics & AEM