Friday 7 April 2017

Personalization in AEM 6.2 and later

Personalization in AEM 6.2

In AEM 6.2 personalization works based on Experience, Activities and ContextHub. Let us see how can we test a basic Personalization in AEM 6.2.

Below are the steps to create personalization in Latest AEM.

  • -Add and configure ContextHub Segments
  • -Create a Brand and related Activity, (We need to select ContextHub as Engine and create its Experiences from the new segments);
  • -Add targets and relevant personalization components for each Experience.
  • -Configured the targeted component to use ContextHub as Engine;
Programmatic Personalization: Previous Posts
Programmatic personalization
Create personalization in older version of AEM
Watch the Personalization video here

Let us create a sample personalization component in Geometric site.

Once we open a Geometric Outdoors page we can see the  Targeting option as below. By default BRAND is selected as 'Geometric Outdoors'.



To create our own activity for the selected brand, click on the '+' symbol as shown below . In the new activity form  Enter a name (For eg:'My Target') and select target engine. (Context Hub is selected to ensure we are using our own segmentation from AEM). We can also use Adobe Target configuration to create personalization.



Once new activity is created, select the activity as shown below.



Now in Targeting mode, click on 'Start Targeting', A default experience will be always enabled. Now add new experience by clicking on  '+ Add Experience Targeting'



Select the Context Hub Segments which you have created referring Previous post. Basically we have one male(Test Male CH) and one female(Test Female CH) ContextHub segments created as experience.




Now author an image component in empty area of the page.



Right click , select Target, so that the component is enabled for target.



Now right click and  select Experiences,



Once you select the 'My Target', you can see all configured experiences appearing.( We can disable any of them in case they are not needed.)



Now go back to targeting mode, start targeting, select the component and select the experience to be updated. Click on 'add offer'.



Select the new image to be appeared on the corresponding experience. Click 'Next' for 'Create', 'Target', 'Goals & Settings' and save the Targeting.



We are done with our targeting configuration.

Testing the configuration:

Now click on preview select the user/ Persona and change for male and female.



Once male user is selected from PERSONA



Once female user is selected from PERSONA




We can test the persona, Geo-changes using Client context also.

Watch the video here

Related Posts:

ClientContext in AEM

The Client Context holds dynamic user data. Content Targeting works based on Client Context. Various user aspects can be used to target specific people and this data comes from Client Context. Client Context data can be used for analytics and other usage in a page using Javascript. Touch UI uses Context Hub instead of Client Context.



Client Context works based on below aspects:

The session store: Holds the dynamic user data.
The Simulation UI: Which displays the user data and assists in simulating the user experience.
A javascript API: Page can interact with session stores.

In classic UI, selecting the icon opens the Client Context as shown.

Related Posts:

Simulation examples:

We can click on the user icon as shown below and select different types of users and test the user personalization in various pages.





Now click on preview select the user/ Persona and change for male and female.



Once male user is selected from PERSONA



Once female user is selected from PERSONA


ContextHub/Segments - Audience Creation

ContextHub/Segments - Audience Creation

ContextHub is a new form(Touch based) of Segments available in previous version of AEM. The ContextHub page provides information about the default and user created stores and UI modules that have been created, the client library folders that are loaded, and links to useful pages.

Click on below link to open your local ContextHub Audience Page in AEM 6.2
http://localhost:4502/libs/cq/personalization/touch-ui/content/audiences.html

It provides grid/ list views.

Related Posts:

ContextHub 'Create' provides 2 options

  1. Create Target Audience: Helps to configure the Target Audience by selecting the Target Configuration, which is already configured.
  2. Create Context Hub Segment: A section where we can add new segments and update existing ones.


Below screen lists the segments available.


Once you click on Create Context Hub Segment, below screen appears
Enter the segment title and boost value if it has to be boosted on evaluation



Once Context Hub Segment is created, select the newly created one and edit it



Now click on the + Icon and Insert New Component,  select 'Container AND'



Again click on the newly added container AND and select 'Comparison: Property - Property'



Now the container appears as below with property null.



Now edit the property as below , so that the newly added Context Hub Segment becomes a 'male' test based on profile.



Once we select the user/persona as shown below the Segment satisfy the condition





If persona is selected as female the condition becomes un-satisfied.

Related Posts:

Monday 27 March 2017

Upgrading Previous versions of CQ/AEM to AEM 6.2

Notes on Upgrading to AEM 6.2

We worry a lot when we get a request from client to Upgrade AEM from older version to AEM 6.2. Let us see some important things to be taken care while doing this activity.
Basically we go with product upgrades for two reason. Firstly the support for old versions gets expired. secondly, there are lots of new features and security upgrades in newer versions. AEM upgrade activities should include implementation, regression, full testing, downtime, go-live and production operations etc.

Adobe recommends In place upgrade method for upgrading to AEM Latest versions. This is one of the most tested method whith in Adobe. There are many individual tasks that are performed during an in-place upgrade. Also AEM 6.2  requires JRE 1.7.x (64bit) or later.

Upgrade Steps in High Level

  • Analysis
  • Planning
  • Preparation
  • Execution
  • Post Upgrade Activities

AEM upgrade has two steps basically.
1)Upgrading the repository. (Using crx2oak tool)
2)Upgrading AEM to 6.2.
Note: For AEM 6.1 to 6.2 upgrade, we don't have to do step (1) since we already have OAK(CRX3).

Version dependencies:
AEM versions 5.4 to AEM 6.1 can be directly upgraded to 6.2.
AEM 5.3 and below versions needs to upgrade first to version 5.4 or above, then to AEM 6.2.
AEM 6.1 to 6.2 upgrade can be carried out by just upgrading AEM(Not repository), In all other versions we need to upgrade the repository.

Some precautions. 

If your code is well maintained, and components are granular, you are safe. Ensure the infrastructure team is fully understood the architectural changes. Another success factor is you testing the upgrade activities minimum 3 times in development machines, to ensure all integration, third party APIS work perfectly.




Upgrade Steps:

Preparing the source instance: Here we are ensuring our environment is ready for upgrade.

  •     Create a full backup - Take a backup of content and any custom codes
  •     Cleanup any content -  remove unwanted content, packages, workflows
  •     Consistency and Traversal Checks - Validate system checks using Adobe tools
  •     Run a test suite - Ensure you have a test suite with all  functionality checking
  •     Disable custom authentication mechanisms - Disable any hooks related to authentications.
  •     upgrade customization - Upgrade your customs codes to reflect new APIs, removing deprecated ones.
  •     Stop the instance 
  •     Archive then delete the log files - Delete all old log files.

 
Content Repository Migration : Migrate the repository to Apache Oak Using crx2oak tool.

AEM Upgrade: Start the AEM 6.2 quickstart jar with the appropriate run modes (author, publish)

Post Upgrade : 

  • Verify the upgrade.log and error.log for any issues.
  • Ensure the home page is loading fine.
  • Run the same test suite which you ran before upgrade and ensure things are normal.
Related Posts:


Current scenarios: At present teams are upgrading various cq/aem versions as below.
CQ 5.3 to AEM 6.2
CQ 5.4 to AEM 6.2
CQ 5.5 to AEM 6.2
CQ 5.6 to AEM 6.2
CQ 5.6.1 to AEM 6.2
AEM 6.0 to AEM 6.2
AEM 61. to AEM 6.2


Thursday 9 March 2017

AEM: Adobe Analytics integration with Adobe Campaign

Basically Analytics integration for AEM website and mobile app procedure remains same. Below given mobile app procedures.

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, what days they come the most frequently, 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
--------------Similar Posts:----------
-------------------------------------------

There are ways to optout it. The NMAC opt-out management (mobileAppOptOutMgt) workflow updates notification unsubscriptions 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)

How Campaign Collects Data
Action, Event activities support below data collection methods.

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

2) The Loading- SOAP: 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.

Campaign set up procedure steps are given below. 

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.



Thursday 23 February 2017

Sample WCMUse Java File for AEM

The VehicleService.Java WCMUse class below, build and deploy it using maven to your AEM.

    package com.aem;

    import org.apache.sling.api.SlingHttpServletRequest;
    import com.day.cq.wcm.api.Page;
    import java.util.HashMap;
    import java.util.Map;
    import com.adobe.cq.sightly.WCMUse;

    public class VehicleService extends WCMUse {
        private Map<String, String> map;

        @Override
        public void activate() throws Exception {
            SlingHttpServletRequest request = getRequest();
            Page currentPage = getCurrentPage();
            createVehicleDetails(request, currentPage);
        }


        /**
         * This will Create vehicle map
         *
         * @return
         */
    private void createVehicleDetails(SlingHttpServletRequest request, Page currentPage) {
        map = new HashMap<String, String>();
        map.put("name", "NewVehicle");
        map.put("price", "1000");    
        }

        /**
         * This will return vehicle
         *
         * @return vehicle map
         */
   
        public Map<String,String> getVehicleDetails() {
       
            return map;
        }
   
    }

--------------Similar Posts:----------
-------------------------------------------

Integrating the AngularJS Framework into AEM HTL

Integrating the AngularJS Framework into AEM HTL(Sightly) with working example.


I have seen many webpages with similar topic, but complex while we try to replicate it in our local environment. Some times they dont work or quite tough to make it work. Here I am going to take you through an easy Angular JS integration with Sightly.

Note: Please ensure you verify the angular syntax using any online tool when you update the code, because angular is strict on syntax.

What is angular JS?
Angular JS is a JavaScript library that simplifies the creation of powerful components, by extending HTML vocabulary for your application.

Why Angular JS with AEM HTL?
Angular JS is the current trend. When we need to declare dynamic views in web applications to make it extra ordinary powerful, we need Angular JS.

What is the aim of this sample?
Through this demo, you will know how to create a simple angular JS Component which performs below tasks,

  1.  - Takes user iput and diplay through angular JS tags
  2.  - Takes user click and show an element using angular JS
  3.  - User click invokes a backend WCMUse Java file and displays the data through HTL + Angular JS


Steps involved in developing AEM + Angular + HTL Component.

Create a template
    Create a new template as shown below at /apps/htl/templates

Create a folder 'page' at /apps/htl/components
Create a new component at /apps/htl/components/page as shown below

Update the 'templateHTL.jsp' file content at /apps/htl/components/page/templateHTL/templateHTL.jsp with below code.
    <html>
    <%@include file="/libs/foundation/global.jsp" %>
    <cq:include script="/libs/wcm/core/components/init/init.jsp"/>
    <body>
    <h1>Here is your Angular HTL Component</h1>
    <cq:include path="par" resourceType="foundation/components/parsys" />
    </body>
    </html>

Create and render component that uses the template
    Create a component as shown below

 

Go to path /apps/htl/components/angular/angular.html and modify the 'angular.html' with below code
     <div ng-app>
            <p>Enter a value: <input type="text" ng-model="name">
            <p ng-bind="name"></p>
             <div ng-view></div>
            <ul class="menu">
                <li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>
                <li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
            </ul>
           <div ng-view></div>
            <div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
            <script type="text/ng-template" id="/tpl1.html">
                <p> First name: <input type="text" ng-model="firstname"/>
                    Last name: <input type="text" ng-model="lastname"/>
                    </p>
                    <p>First name:<p ng-bind="firstname"></p>
                    <p>Last name:<p ng-bind="lastname"></p>
            </script>
            <script type="text/ng-template" id="/tpl2.html"  data-sly-include="template.html">

            </script >
        </div>
 
Create a 'template.html' at path /apps/htl/components/angular

    <div data-sly-use.vehicleService="com.aem.VehicleService" >
      <div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
        <ul data-sly-list.keyName="${myClass.getVehicleDetails}">
            <li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
        </ul>
       </div>
    </div>

Create a dialog (create dialog option) at path /apps/htl/components/angular with label 'dialog'

Client Library Creation for AngularJS framework
  •     Create a folder 'clientlibs' at /apps/htl/components/angular and Add below two properties to it.
    (name:categories,    Type:String[],     value:cq.widget)
    (name:dependencies, Type:String[],     value:angularjs)

  •     Download the latest 'angular.min.js' from angular JS Site
  •     Create a file 'angular.min.js' in folder /apps/htl/components/angular/clientlibs; copy paste the downloaded angular.min.js content to this file.
  •   Now you have angular JS at your crx in location /apps/htl/components/angular/clientlibs/angular.min.js
  •     Create a new file js.txt at /apps/htl/components/angular/clientlibs; open the file 'js.txt' and paste 'angular.min.js' (without quotes) and save it.
  •     Now you have a new client library for angular JS. 
  •     Add this in your page , open file /apps/htl/components/page/templateHTL/templateHTL.jsp andadd new client library to it by adding line
    <cq:includeClientLib categories="cq.widgets" />


The Folder Structure Now

Create a WCMUse class for data.
    We are creating a map with set of vehicles and populating it using HTL.

    The VehicleService.Java WCMUse class below, build and deploy it using maven to your AEM.

Please find the WCMUse class here. VehicleService.JAVA
 


 
Create a page that uses AngularJS functionality; Code execution

    Open site admin and create a page with template 'templateHTL'. Open it in edit mode.
    Drag and drop the 'angular' component to the newly created page.


    Once you re load the page and start entering anything at 'Enter a Value', you can see the inline option working through angular.


    Code executed:  <p ng-bind="name"></p>

    When you click on 'Template Load example', you can see the new templates on bottom.


    Code executed:

    'On Click' is added at line,
    <li><a ng-click="currentTpl1='/tpl1.html'">Template Load example</a>

    A template place holder is at line,
    <div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>

    Script executed when the teplate got clicked,

     <script type="text/ng-template" id="/tpl1.html">
                <p> First name: <input type="text" ng-model="firstname"/>
                    Last name: <input type="text" ng-model="lastname"/>
                    </p>
                    <p>First name:<p ng-bind="firstname"></p>
                    <p>Last name:<p ng-bind="lastname"></p>
     </script>
     You can also see, on entering first name and second name, again inline in action.

   
     When you clicked on 'Show the list of cars'
     We have the Data coming from WCMUse class now as shown below.

   
     Code executed
     'On Click' is added at line,
     <li><a ng-click="currentTpl1='/tpl2.html'">Show the list of cars</a>
   
     A template place holder is at line,
     <div id="tpl-content"> <ng-include src="currentTpl1"> </ng-include> </div>
   
     Which in turn calls the script for template selection from
     <script type="text/ng-template" id="/tpl2.html"  data-sly-include="template.html">

      </script >
   
     This executes the template.html at path /apps/htl/components/angular/template.html

     The template.html executes the WCMUse class and process the data from below code.
    <div data-sly-use.vehicleService="com.aem.VehicleService" >
      <div data-sly-use.myClass="com.aem.VehicleService" data-sly-unwrap>
        <ul data-sly-list.keyName="${myClass.getVehicleDetails}">
            <li>${keyName}:${myClass.getVehicleDetails[keyName]}</li>
        </ul>
       </div>
    </div>

Want the code package?
    Please let me know through e-mail if you need the package.

--------------Similar Posts:----------
-------------------------------------------