Client Context Customization in AEM(By Ankit Gubrani)

500 different people go to Amazon.com and each user sees a different version of the home page.

How come?

It's Personalized

What is Content Perzonalisation ?

Content Personalization in short means delivering the Right Content to the Right Person at the Right Time.

How does is works?

Content Personalization with AEM

There are three elements involved in personalization :

lLeads/Visitor-Info

lContent/Experience

lRules/Segments

Where can i find Lead Information in AEM ?

The Client Context is a mechanism that provides you with certain information about the current page and visitor.

The Client Context includes various Session Stores that contain user data.

Adding Client Context To A Page :

Include the Client Context component to the body section of your web pages to enable Client Context.

The path of the Client Context component node is /libs/cq/personalization/components/clientcontext.

<cq:include path="clientcontext" resourceType="cq/personalization/components/clientcontext"/>

Session Store :

Session Store contains the user data. A session store can be persisted across browsser sessions,

or can last only for the browser session in which it is created.

Types of Session Stores :

uCQ_Analytics.SessionStoreuCQ_Analytics.PerstistedSessionStore

Context Store Components :

A context store component is a CQ component that can be added to Client Context.

Typically, context store components display data from a session store with which they are associated.

Lets get our hands dirty in our new play ground a.k.a Client Context

Lets create our Session Store first :

The Session Store is a javascript object available both on the author and publish instances. Because we don’t want the

Context Store component to be loaded on the publish instance (remenber it’s only used by editor for simulation), we create

two javascript libraries with the following categories:

lKernel : personalization.stores.kernell Ui : personalization.stores.ui

lStep-1

Now As we saw our newly created session store,now we will create UI Part i.e.

Context Store component

lStep-2

Create a new CQ component in/apps/customstore/components called

“DataPersonalisation” with the properties :

lsling:resourceSuperType = lcq/personalization/components/contextstores/

lgenericstorepropertieslcomponentGroup = Client Context

lStep-2

lLets create our Context Store component:

Now That you have added code that will call render method. Lets create render method.

Create a file <customstore>_ui.js in the ui library:

lStep-2

Now That you have created render method.

We need to handle the synchronisation i.e store should be loaded by itself if it is present on client

context page and updates if any updation is to be handled.

lStep-3

Create a file init.js.jsp associated with theContext Store component.

This file generates the Javascript code thatinitializes the session store that our context

store component uses.

Remember : The code must set mime type of thefile to “text/javascript”

lStep-4

And Its Done

Any Questions ?

lAbout Me

.about-me{name: Ankit Gubrani !Sr. AEM Developer;email-id: ankit.gubrani@codebrains.co.in;LinkedIn: in.linkedin.com/in/ankitgubrani;twitter: @ankitgubrani90;blog: codebrains.blogspot.in;website : codebrains.co.in;

}

Thank YouPlease contact me at : ankit.gubrani@codebrains.co.in