CMS, Digital Marketing

iBeacon & AEM Mobile Integration

iBeacon & its Significance

iBeacon is a small electronic device, supported by Bluetooth Low Energy (BLE) technology. From other point of view, you can think of iBeacons as small digital lighthouses, just like those used to indicate where a port of shoreline is. Normally, the observer/receiver is an iOS/android mobile app, while the broadcaster/transmitter can be a battery-powered sensor, an USB Bluetooth dongle or an iOS device.

Higher customer engagement is one of the prime focus for any business today, as it leads to higher sales. To achieve this, a successful in-store digital transformation is required by adopting the right strategy & technology tools to keep pace with the shopper’s expectations.

Beacons are one of the technology innovations which helps in delivering location based marketing services to consumers by proximity detection in various verticals such as Restaurants, Malls, Hotels, Classrooms & Education, Loyalty Programs, Airports and Museums.

AEM Mobile App + iBeacon Explained

The standard beacon consists of an UUID, a major and a minor value only. For example:

UUID: B9407F30-F5F8-466E-AFF9-25556B57FE6D
Major ID: 1
Minor ID: 2

The broadcaster (iBeacon) doesn’t do anything else besides sending this piece of information every fraction of a second or so. The UUID is an unique identifier.

For Example, inside each store of a super market – XYZ, they would place beacon devices and configure each of them to use a different “minor” values. Let’s say at the store A, they would place all beacon devices broadcasting the XYZ UUID, major value 1, minor 1 near the door, minor 2 near the mugs display and minor value 3 near the cashier. At store B, they would use the same UUID, but major 2 and minor values according to the location inside the store. The mobile App developed in AEM, will keep detecting registered beacons and notify the respective users how close (or far) the phone is from each of them and then perform actions, display alerts to the user, offer discounts, turn lights on and off, open doors and so on.

Intro of AEM Mobile Apps

Adobe Experience Manager provides an environment for authors to create and manage content for mobile applications. AEM Mobile have access to Adobe Experience Manager Mobile On-Demand Services. Features provided by AEM Mobile On-Demand Services,

  1. Distribute content to mobile apps.
  2. Manage text notifications.
  3. Content and notification services like APNS & GPNS (Apple & Google Push Notification Services)

Other Products that can be integrated with AEM Mobile

  1. Adobe Target integration
  2. Adobe Mobile Analytics
  3. Mobile Marketing, including In-App Messaging, Push Notifications, and Acquisition Tracking

AEM Mobile App Development

Adobe PhoneGap and Adobe Publishing Solutions allows you to create and manage both content-rich and utility-based cross-platform mobile applications. Simply uploading your HTML5, CSS, and JavaScript assets to the Adobe PhoneGap Build cloud service will do the work of compiling for you.

Adobe ContentSync & Adobe Analytics are fully integrated into AEM apps from which users can easily download page and content updates Over-the-Air (OTA) to their devices without having to re-install the application and allows detailed tracking of distribution, geolocation, operating systems, devices, click-streams, iBeacon tracking and more.


Developers can use the AEM PhoneGap Starter Kit along with additional resources found in to bootstrap AEM apps with PhoneGap, including a reference native app running Cordova Webviews.


App includes pages, JavaScript and CSS client libraries, reusable AEM components, Content Sync configurations, and PhoneGap app shell content.

The top level locale page typically inherits from the foundation ‘splash-page’ component (/libs/mobileapps/components/splash-page) which takes care of the initialization necessary to support the installation of over-the-air Content Sync updates (contentInit code can be found at /etc/clientlibs/mobile/content-sync/js/contentInit.js). Shell directory which hosts the configuration files used by the PhoneGap command line interface and PhoneGap build to turn your web content into a runnable application.

Building APPS

App can be built either by using Phone Gap Command Line Interface or PhoneGap Build. Free PhoneGap Build accounts are allowed one private application. PhoneGap builds fail if you are building an additional private application.

Push Notifications

Push notifications is an interesting and useful feature of a mobile app

Once installed and configured (as explained below) it works like this:

  1. A push notification is created in AEM, and sent to the service provider (Amazon SSN or Pushwoosh).
  2. The service provider receives it and sends it to the core provider (APNS or GCM).
  3. The core provider pushes the notification to all devices registered for that push.  For each device it uses the phone data network or WiFi, whichever is currently available on the device.
  4. The notification displays on the device if the app it is registered for is not running and a user tapping on the notification will start the app and display the notification within the app.  In the case that the application is already running, only the in-app notification is displayed.

Mobile App & iBeacon Integration

Add page properties on Home Page to author iBeacon’s properties like UUID, Name, Minor and Major

Configure Cordova Plugins in config.xml under the path – \content\mobileapps\app_name_placeholder\shell\_jcr_content\pge-app\app-content\phonegap

3. Configured page properties are read in JavaScript as shown below and used to identify if the mobile is in the range of configured iBeacon

4. Using cordova.plugins.locationManager.Delegate() function, we can call iBeacon’s didEnterRegion(), didExitRegion(), didDetermineStateForRegion(), didRangeBeaconsInRegion() etc.

5. By Entering or Existing the iBeacon’s region, the user is re-directed to the configured offer page in the app.

About The Author

Leave a Reply