Adobe PhoneGap – Adobe

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

AEM Mobile Part 1: A Fresh Approach to Mobile Apps

Dan Klco — Mon, 07 Mar 2016 15:22:35 +0000

Recently, Adobe introduced AEM Mobile, a new way to build, maintain and deploy mobile apps. AEM Mobile makes it vastly easier to manage mobile apps by enabling marketers to maintain mobile app content, which has traditionally been done by developers. AEM Mobile is the centerpiece of a new platform Adobe has built around enabling marketing to maintain mobile apps and market to mobile app users.

As one of Adobe’s top partners, Perficient had a chance to preview AEM Mobile and get a glimpse into the technology underlying this new platform.

The Tech Behind the Scenes

This new platform is composed of several different technologies, each of which has been deeply integrated, to build a seamless mobile app publishing experience.

Adobe Digital Publishing Suite: Easy maintenance of mobile app content

Adobe Digital Publishing Suite (or DPS), which Adobe unveiled in 2010, provides Marketers the ability to maintain mobile app content without having to involve developers or resubmit apps through the app store. This tool has been used by numerous organizations to manage their apps, however it does have some limits. DPS, does not give full access to the mobile APIs and has limited functionality compared to native apps. Adobe Mobile takes what is best about DPS, the Marketing content management and integrates it into the powerful PhoneGap platform.

Adobe PhoneGap: Publish apps across all mobile platforms

Adobe PhoneGap is a powerful platform for publishing multi-platform mobile apps. These apps are built with HTML and CSS and are wrapped in a native app wrapper. The deep API integrations and powerful rendering engines in modern phones allows these apps to compete in performance and features with native apps without requiring separate development efforts for each platform. By integrating Adobe PhoneGap into AEM Mobile, Adobe has unleashed the power of the PhoneGap platform and integrated with the ease of content publication provided by Adobe Experience Manager and Adobe Digital Publishing Suite.

Adobe Experience Manager: Author content & managed digital assets in an friendly interface

In AEM Mobile, Adobe Experience Manager extends it’s powerful content authoring and Digital Asset Management features to enable marketers to manage and deploy mobile apps through a familiar and intuitive user interface. In AEM Mobile, mobile content authors can use the same drag and drop features to build their mobile app content via reusable components.

Adobe Analytics: Quick & easy measurement of mobile interactions

Adobe has created a version of Adobe Analytics specifically targeted at measuring mobile app interactions. Of course, companies can still integrate with Adobe Analytics Standard and Premium to get the full breadth of measurement possibilities, but this mobile-specific framework enables quick and low-effort measurement of a large number of mobile-specific interactions.

Adobe Target: Deliver dynamic content

Along with the new AT.js, Adobe has released a version of Adobe Target geared for mobile apps. Using Adobe Target, marketers can deliver dynamic content to users to market within the device, increasing relevance, conversion rates and engagement.

Bringing it all Together

By combining all of these technologies into a single platform, Adobe has created a mobile app platform with unparalleled features, flexibility and ease of use. No longer should mobile apps be separate from the rest of your digital marketing technology or should they be unmeasured or un-marketed. By leveraging, AEM Mobile you can build and maintain more apps and derive more value out of every dollar you put into mobile.

Perficient is extremely excited by the possibilities offered by AEM Mobile and for Adobe Summit, we have some very special demos planned to demonstrate the potential of the platform. Stay tuned for the second part of this blog series for more information!

AEM Mobile Part 1: A Fresh Approach to Mobile Apps was first posted on March 7, 2016 at 9:22 am.
©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