Thursday 9 March 2017

Angular JS Implementation for AEM Mobile Articles

AngularJS Articles in AEM Mobile

AEM Articles are normal HTML articles and it supports any front end technology, which a normal web page supports.

In this post, we will see how we can create an Angular JS article in AEM Mobile.

What is AngularJS?

Angular JS is a new Javascript technology which can be added to any HTML by adding relevant Angular library inside <script> tag.
Angular adds Directives to HTML page, and binds data to page with Expressions.

How to add AngularJS in an article?
AEM Mobile article structure contains an index.html with js, css, images, lib folders. This structure is used to create .article file using AEM Mobile packager.

Steps to create angular article:

  • Get Angular

We need to get latest AngularJS library from AngularJS website. Download 'angular.min.js' and any required angular additional libraries to your /js directory in article folder.


  • Create Controller

Now create a file controller.js in /js folder and add below code.

<!--Your Controller.js-->


var app = angular.module("myFirstAngular",['ngSanitize'], function ($compileProvider) {

  $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file):/);

});
app.controller("controller",function($scope,$window,$sce){
 
$scope.personsList =[
                {name:'John',age:'23'},
                {name:'Jannet',age:'24'},
                {name:'Mark',age:'25'}              
                ];
                }
                );
             

  • Update index file of article to involve AngularJS in article  

         
Add angularJS libraries in your index.html. Below we have added sanitizor also which helps to sanitize the urls.
             
        <head>          
            <script src="js/angular.min.js"></script>
            <script src="js/angular-sanitize.min.js"></script>
        </head>
  • Define body element which refers the controller and app.      

        <!-- Body-->
        <!-- ng-app defines an AngularJS application below-->
        <!-- ng-controller defines the application controller below-->
        <body ng-app="myFirstAngular" ng-controller="controller">
  • Add AngularJS code (which is of syntax 'ng-')
        <!--Div -->
        <!--ng-repeat repeats a set of HTML, a given number of times-->
        <div ng-repeat="person in personsList">
                        <div class = "your class">
                            <p class="name">{{person.name}}</p>
                            <p class="age" >{{person.age}}</p>
                        </div>                      
        </div>

  • Save and upload to AEM - On-demand Portal

Save all the files, drag and drop it to AEM Mobile Packager. Your angular '.article' file is ready. Upload this to AEM - On-demand portal.

When you use AngularJS, you may face issue in adding 'navto' as cross browser call.
Just add 'navto' in aHrefSanitizationWhitelist so that it gets white listed.

Read More:

 Various options in AEM integrated with AEM Mobile On-Demand Portal

 Add/MAP user to AEM Mobile project

 Create Article/Banner from AEM and publish it to AEM Mobile

 Integrate AEM with AEM Mobile

 Create an APP in AEM And Mapping with AEM Mobile On-Demand

 AEM Mobile Interview questions for developers

 Adjusting Home Navigation Menu from AEM Mobile On-Demand portal

Create 'push notifications' in AEM Mobile

Why Push Notifications?

Push notifications are used to re-engage passive users to the app again or conveying information about new content or products which are available in app. These push notifications can be created using the On-Demand Portal or through APIs. A separate Marketing Cloud license also provides different way of delivering push notifications through DPS.

We have different delivery options like, 'notifications which can send the message only to phone users', or by 'scheduling a delivery time'.

Types of push notifications:

Background notifications: Which download a specific item or collection.
Text notifications: Which sends a text message to users to notify something.

Need to create push notifications for Android and iOS independently. Below methods are used for the same.
  • Apple Push Notification Service (APNS) for iOS apps.(Support both text notifications and background notifications)
  • Google Cloud Messaging (GCM) for Android apps.  (Support only text notifications)
Here we will show how to send push notification through android devices.

There are four steps involved in sending push notification in Android.

  1. Configure your app for Google Cloud Messaging using the Google Developer Console.
  2. Configure notifications section of the On-Demand Portal.
  3. Build the Android app with push notifications enabled.
  4. Send the text notification.

Step 1:
Configure Google Cloud Messaging.
1) Go to https://developers.google.com/mobile/add?platform=android

Click on image to see it big

2) Enter values for option as below 'Create a new app or choose an existing app.'
App Name: A name for your app service
Android Package Name:  package name that you use for Bundle ID in On-Demand services (Project settings>Access>Entitlement & Authentication>Bundle ID)

3) Click 'Choose and Configure Services'

4) Select Cloud Messaging, and then 'Enable Google Cloud Messaging.'


5) Create the config file by selecting 'Generate configuration files.'

6) Keep back up of 'Server API Key' and 'Sender ID' values

7) Download the configuration file by clicking on 'Download google-services.json'



Step 2:
Configure Notification Section

1) Go to 'Notifications.'
2) Select the project which you want to update, and click Push Credentials. Then click the Android tab.
3) Select the Android app you created, and then click Add Credentials.



Specify the Server API Key and Project Number (Which you backed up in previous section step 6).

Step 3:
Building an Android app and sign it.

1) Login to On-Demand Portal and re-check 'Bundle ID' which is configured for 'Step 1, Android package name is matching project's bundle id.
2) Go to on demand Apps> App Details Tab, 'Android Push Notifications', then select 'Enable push notifications '




3) Click Upload, select the JSON file downloaded from the Google Developer Console.
4) Build , Sign, install the app on your android device.

Step 4:
Send the text notifications :


1) Click Notifications, and then click Android > Click Create > Text Notification>Details : mention below details
Destination App ID: The app which you need to send notification for
Text Notification Message: Enter the text notification message which needs to be send to users.

2) Click Delivery Options, and specify the following options:
Notification Audience: At present the options are All users, phone, tablet, users who are not app-online for a month.
Delivery Time: Immediate/ scheduled based on time zone,date time.

3) Click Create to send or schedule the message notification.

The Text notifications appear on any Android device in which the app is installed(user must have opted in to receive push notifications).

 Notes:
  • As of now push notification does not allow linking to a specific collection. Cancel option is available for scheduled push notification, if a scheduled text notification has not yet been sent.
  •   If we need to send message to users within the app, we can use In-App Messaging(Which is part of Mobile Marketing SDK). In-App Messaging is a premium product. 

Read More:

 Various options in AEM integrated with AEM Mobile On-Demand Portal

 Add/MAP user to AEM Mobile project

 Create Article/Banner from AEM and publish it to AEM Mobile

 Integrate AEM with AEM Mobile

 Create an APP in AEM And Mapping with AEM Mobile On-Demand

 AEM Mobile Interview questions for developers

 Adjusting Home Navigation Menu from AEM Mobile On-Demand portal

AEM Mobile related default reports in Adobe Analytics


Overview:
AEM Mobile analytics data can be configured to Adobe Analytics(SiteCatalyst/ Omniture) & Analytics Essentials(Mobile Marketing).

SiteCatalyst provides report generation for all levels of Mobile content. Analytics Essentials provides some additional options like in App message,Acquisition tracking, Location and target etc. Analytics Essentials are part of Adobe Marketing Cloud.

AEM Mobile apps are per-configured to report analytics information to Adobe data centers. all app related information like life cycle of the application are saved by default.

Click on image to see it big

Each project in AEM Mobile on demand portal will have a report suite, which is automatically created. Generally mobile app stores information like Path, Dashboards, Favorites, App and Mobile metrics and app-specific items (For e.g. Articles, Collections, Banners).

How to customize AEM Mobile Menu?
As of now the menu is not customizable. In case if customization is required, you need to contact your Adobe Analytics Administrator.

Default reports available in Reports & Analytics tool

Article Reports : All article reports like Article Impressions, Article Clicks, Article Views, Article Scroll, and Social Share.

Collection Reports: All information like Collection and Article Impressions, Collection Open, and Article Click.

Social Share Report: Number of social shares.

Social Share Channel Breakdown Report: Device specific social share referral.

Banner Metrics: Banner impressions, clicks.

Overlay Reports: Hyper link clicks are tracked.

Video Engagement Report: Reports like count, percentage of completion, duration , average time on video etc.

Visitor Profile Reports: Visitor reports like unique visitors, overall visitors etc.

Key Metrics Report: App level reports like installation, launches details etc.

Can we get analytics report for Web Viewer?
Yes . But Web Viewer only supports clicks reports not mobile related swipes or taps.

Read More:

 Various options in AEM integrated with AEM Mobile On-Demand Portal

 Add/MAP user to AEM Mobile project

 Create Article/Banner from AEM and publish it to AEM Mobile

 Integrate AEM with AEM Mobile

 Create an APP in AEM And Mapping with AEM Mobile On-Demand

 AEM Mobile Interview questions for developers

 Adjusting Home Navigation Menu from AEM Mobile On-Demand portal

Adobe Analytics integration for AEM Mobile

Create Sign In in AEM Mobile


Usual mobile apps provides a login screen on launching the application. But AEM Mobile provides this as an app menu. Which means, we need to tap on App Menu> Signin to launch the signin screen. The default collection is displayed on launching the app.

People ask in AEM Mobile, is there any way to provide such option a login screen/window that automatically opens after the splash screen upon app launch. AEM Mobile  directly does not provide such option. They have radmap to provide such option in future.

How can we achieve it manually?
Dynamic Banner is one of the option to do this. We need to provide an HTML Dynamic banner in home screen and on tapping this, the launchSignInUI API can be called from backend. Please note, this API works with both Custom Authentication and authentication via a Direct Entitlement Server. And always there will be a Sign In option avaliable in the app menu.

 If the Direct Entitlement APIs authentication is enabled, then the native sign in dialog will display. Custom Authentications like SAML, OAuth2 or Generic Identity Provider, displays a web view with sign in UX. 

How do you create banners
? Read this blog

Another less preferred option is normal HTML Article,
Create an HTML article with SignIn information and set it as the first item in Top Level Collection. The top level means it will always be the first item that gets displayed to users. ANother option could be creating a link/ button on home article clicking on this launches Sign In. But this also requires an API Call and will work with both Custom Authentication and authentication via a Direct Entitlement Server.

Note: Since we are setting this as top level one, place a logic to display this only when the Sin in is not done. Else it can have bad impact on user experience.
 
Read more on Authentication and Login APIs
https://helpx.adobe.com/digital-publishing-solution/help/identity-providers.html
https://helpx.adobe.com/digital-publishing-solution/help/app-runtime-api.html


Adobe Analytics integration with Adobe Campaign

Adobe Analytics integration with Adobe Campaign

Adobe campaign: Adobe Campaign lets you design and orchestrate targeted and personalized campaigns on multiple channels, such as e-mail, direct mail, SMS, Wap Push, search, social etc.

Adobe Analytics: Analytics service provide various levels of views like visitor geo-location, most frequent visit days, and how long they’re staying as well as several metrics based on e-commerce data, CRM attributes, engagement, etc

Adobe Analytics data can be used to create effective Adobe campaign across channels. Adobe Analytics & Campaign Combined Together can delver following capabilities.
  • Performance measurement in real time
  • 360-degree qualification and targeting
  • Highly personalized re-marketing

Campaign to Mobile App

The Mobile App Channel lets you use the Adobe Campaign platform to send personalized notifications to iOS and Android terminals via apps. Basically there are two delivery channels available:
  • An iOS channel
  • An Android channel
There are ways to opt-out it. The NMAC opt-out management (mobileAppOptOutMgt) workflow updates notification un-subscriptions on mobile devices.

Adobe Campaign is compatible with both binary and HTTP/2 APNS.

To use the functionalities of the Adobe Campaign Mobile App Channel, you need to change/adapt your mobile application to integrate it into the Adobe Campaign platform using Two SDKs (one for android , other for iOS)

Steps involved in campaign set up are.

Configure connectors
Collecting information (collect the technical specifications which define the set of parameters that enable Adobe Campaign and the mobile application to communicate, like integration key, variables, urls etc)

Creating the service
Adobe Campaign administrator needs to create and configure a service linked to the mobile application

Push Notification services.
  • APNS (Apple Push Notification Service) for Apple
  • GCM (Google Cloud Messaging) for Android.
Adobe Campaign uses two types of APIs:

•    Generic data access APIs for querying the data model data
•    Business specific APIs that let you act on each object: deliveries, workflows, subscriptions, etc.

Collecting data by Campaign
Action, Event activities support below data collection methods

1) The Data loading: The Data loading (RDBMS) activity lets you access this external database directly and to collect only the data required for targeting.

2) The Loading: The Loading (SOAP) activity is used in addition to the data loading (RDBMS) activity when it is not possible to collect data directly via the FDA in an external database.

3) Data loading (file): The Load (File) activity lets you directly access a source of external data and use it in Adobe Campaign. A scheduler can be run to retrieve the file.

Read More

 Various options in AEM integrated with AEM Mobile On-Demand Portal

 Add/MAP user to AEM Mobile project

 Create Article/Banner from AEM and publish it to AEM Mobile

 Integrate AEM with AEM Mobile

 Create an APP in AEM And Mapping with AEM Mobile On-Demand

 AEM Mobile Interview questions for developers

 Adjusting Home Navigation Menu from AEM Mobile On-Demand portal

Thursday 23 February 2017

Article operations in AEM Mobile


Article operations in AEM Mobile

How do we modify the existing article?

Unzip the .article as below using any zip extractor.
[Click on image to see it big]


Now we will have a folder with structure as below. To modify


Go to respective folder / file and update as required. Once done, drag and drop this article to 'AEM Mobile Packager', so you will have a new .article file.

Note: Front end development knowledge is required to modify the articles.

Upload error, how to find out reason.

Some times while uploading an edited article, we find 'Upload Failed' error as below.


To find reason click on the red 'Upload Failed' error. You can see a pop up with error details.


How to fix the error?

The reason is manifest file does not match MD5 calculated internally. To fix this remove the manifest file and drag and drop it to 'AEM Mobile Packager' again and try re uploading.



Read More

 Various options in AEM integrated with AEM Mobile On-Demand Portal

 Add/MAP user to AEM Mobile project

 Create Article/Banner from AEM and publish it to AEM Mobile

 Integrate AEM with AEM Mobile

 Create an APP in AEM And Mapping with AEM Mobile On-Demand

 AEM Mobile Interview questions for developers

 Adjusting Home Navigation Menu from AEM Mobile On-Demand portal