What are the difference between client context and context hub ?

Context hub is a replacement for client context it is better and more lightweight or ClientContext is basically the old version, ContextHub its replacement.
Client context had performance problems, it forces integration to wait on stores.init.js, ajax call, which slows stuff down a lot (esp site catalyst page-view calls). Context hub is a lot faster and fixes that.
The engineering team is avoiding changes in the client context. Future is context hub.

In 6.1, the feature set of ClientContext was still higher than ContextHub, which itself relied on some ClientContext core functionalities to work.

With 6.2, we should have closed the gap, and we're currently working with Product Management to get the ClientContext deprecated in favor of the ContextHub.

I guess it would be a good idea to highlight some of the major architectural changes to clarify why ContextHub soon replaces ClientContextt:
ContextHub decouples the Kernel from the UI leading to a much lower footprint on publish
ContextHub Stores can deal with complex hierarchical objects while ClientContext was limited to key-value pairs
The eventing model of ContextHub is a lot more sophisticated including the fact that eventing happens as soon as stores are available and not just after „all“ stores have been loaded
Loading behavior can be controlled on a fine-grained level (sequence of loading & synchronous as well as asynchronous store loading)

All in all, ContextHub is capable of every aspect ClientContext could deal with and is optimized in the most significant areas of clientcontext that turned out not to work perfectly due to the architecture.

IOW: go for ContextHub and create issues in case you find bugs or limitations that we are not aware of yet.

Configuring Context-hub to Segment pages with Adobe AEM

Personalization allows you to customize your pages, providing a way to set the different configurations for components, depending on the current segment.

To set everything that is needed is a long and boring task. This page will provide a guide in everything that needs to be configured to enable segmentation on Adobe AEM.

Contents
1 Enabling ContextHub
2 Creating a Brand
3 Create your custom Configuration Container
4 Create a Store
5 Create a Clientlib
6 Create an Audience/Segmentation
7 Create a Page and configure ContextHub
8 Create an Activity
9 Configure the Campaign on the previous created Page
10 Set up ContextHub Ui Modules
11 Make the Ui Modules clickable and make them update the values of our variables

Enabling ContextHub
1) The first task is to enable ContextHub. You can do it by accessing `Tools` -> `General` -> `Configuration Browser`;

2) Mark your website folder and click `Properties`;

3) Make sure the checkbox "ContextHub segments" is selected, then click on `Save & Close`.

Creating a Brand
To use ContextHub it is required that you create a Brand. It will be used later when targeting your pages.

1) Go to `Dashboard` -> `Personalization` -> `Activities`;

2) Click on `Create` -> `Create Brand`.

3) Just follow the wizard until you have your brand created.

Create your custom Configuration Container
The customized configuration container will make it possible to create and configure fields that will be later used to create audiences (segments).

1) Go to `Tools` -> `Sites` -> `ContextHub`;

2) Click the "Create" button and follow the wizard to create your Configuration Container folder;

3) Click on the created folder to open it;

4) Inside the created folder, click on the "Context Configuration" folder to open it;

5) This is the place you will have to create `Stores`, `Ui Modes`, and `Ui Modules` configurations.

Create a Store
A store is a container where the segmentation data will be stored. To create one, follow these steps:

1) Go to `Tools` -> `Sites` -> `ContextHub` -> `Your site` -> `Your Configuration Container folder` -> `Context Configuration`;

2) Click `Create` -> `ContextHub Store Configuration`;

3) Type in anything you want in the "Configuration Title" field;

4) The "Store Type" field is very important. This fields is a type of `key` that may be used later to make reference to the created store. It is common go give names starting with "contexthub.". For example:

contexthub.mystore
5) In the next step, you can fill in an optional json. For example:

{ 
   "initialValues": {
       "myField1": 10,
       "myField2": true,
       "myField3": 'test'
   }
}

It is common to initialize all the fields that will later be available to the segmentation system.

Create a Clientlib
A clientlib will need to be created to write customized code related to ContextHub. For example, if later we need to write special code to fill the segmentation variables or if you want to create reference scripts.

1) Go to your apps folder where you generally store your clientlibs. For example:

apps/yoursite/clientlibs/
2) Create a new clientlib in this place. It can be named with any name you want, for example, "clientlib-segments";

3) Set the following categories to this clientlib:

 a) contexthub.segment-engine.scripts
   
 b) contexthub.store.contexthub.mystore
Note: pay attention to the bolded text above. It must be changed to the store type value you have created in the previous step.

3) Create a javascript file inside the clientlib, with the following content:

(function() {
    'use strict';

    function MyStore(name, config){
        this.init(name, config);
        this.readData();
    }

    ContextHub.Utils.inheritance.inherit(MyStore, ContextHub.Store.SessionStore);

    MyStore.prototype.readData = function() {
        /* Do some processing here. It can be anything, for example, API call or any business logic
        var value1 = 666;
        var value2 = false;
        var value3 = 'My String';*/

        this.setItem('myField1', value1);
        this.setItem('myField2', value2);
        this.setItem('myField3', value3);
    };

    ContextHub.Utils.storeCandidates.registerStoreCandidate(MyStore, 'contexthub.mystore', 0);
})();
You can use any name for 'MyStore', but you must take care with 'contexthub.mystore', it should be renamed to the name you gave for your `Store Type` in the previous steps.

Notice that in the `readData` function we are updating our segmentation variables with new values. These values are being saved in the browser's Session Storage because we chose `ContextHub.Store.SessionStore` as our storage engine. You could have used `ContextHub.Store.PersistedStore` to use the browser's Local Storage. Take a look at Adobe AEM documentation to find more types.

Create an Audience/Segmentation
Create a Page and configure ContextHub
Create an Activity
Configure the Campaign on the previous created Page
Set up ContextHub Ui Modules
Make the Ui Modules clickable and make them update the values of our variables

/etc/cloudsettings/default/contexthub.kernel.js is not loading in Adobe Experience Manager(AEM) 6.4

The /etc/cloudsettings/default/contexthub.kernel.js(The ContextHub library) is not loading upgrading the AEM environment to a 6.4 version.

The below exception is thrown in the error log

01.02.2019 21:05:44.636 *ERROR* [10.153.113.29 [1549055144628] GET /etc/cloudsettings/default/contexthub.kernel.js HTTP/1.1] org.apache.sling.servlets.resolver.internal.SlingServletResolver Original error null

The issue is resolved after changing the value of sling:resourceType from /libs/granite/contexthub/cloudsettings/components/baseconfiguration to granite/contexthub/cloudsettings/components/baseconfiguration in /etc/cloudsettings/default/contexthub

Refer https://forums.adobe.com/message/10907246 

Using script reference in AEM ContextHub

While creating an audience in AEM contextHub, we see a component called Script Reference. When we drag-n-drop the component, we don't see any scripts by default in the dropdown.



Create or select an audience Segment, then edit the segment. On the left side, we can see the script reference component but we don't see any scripts in the dropdown. These scripts are defined in clientlibs located at /libs/cq/contexthub/code/kernel/segment-engine/comparison-scripts/. There is a sample script defined but not added in js.txt of "clientlibs context hub.segment-engine.scripts". So create a clientlibs under /app/ then add script name to js.txt. Now refresh the segment page and see if the script name is displayed in the dropdown.



Sample Script:

(function() {

    'use strict';

    /**

     * Sample script.

     *

     * @param {Object} val1 - sample value

     * @param {Object} val2 - sample value

     * @returns {Boolean}

     */

    var testScript = function(val1, val2) {

        /* let the SegmentEngine know when script should be re-run */

        this.dependOn(ContextHub.SegmentEngine.Property('profile/age'));

        this.dependOn(ContextHub.SegmentEngine.Property('profile/givenName'));

        /* variables */

        var name = ContextHub.get('profile/givenName');

        var age = ContextHub.get('profile/age');

        /* return result */

        return name === 'Joe' && age === 123 && val1 === 11 && val2 === 22;

    };

    /* register function */

    ContextHub.SegmentEngine.ScriptManager.register('test-script', testScript);

})();

Cannot read property 'extend' of undefined': ContextHub

While adding ContextHub to AEM site could see below errors

Uncaught TypeError: Cannot read property 'extend' of undefined'
Uncaught TypeError: window.injectContextHubUI is not a functionChange ContextHub entry in head section from

<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>
to

!--/* Include Context Hub */-->
<sly data-sly-call="${clientlib.js @ categories='granite.utils'}"/>
<sly data-sly-resource="${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>


Click here to check how to setup ContextHub in AEM.

Implement personalization using context-hub in AEM

Statement:
How to Implement content personalization using ContextHub in AEM
Content personalization using Based on the profile information.

Solution:
Follow the below steps.

Step 1: Create audiences.
Go to this URL http://localhost:4502/aem/start.html -->click on personlization-->click on audiences.
Select --> we retails under audience-->http://localhost:4502/libs/cq/personalization/touch-ui/content/v2/audiences.html/conf/we-retail

Create new Audiences -->click on create -->create context hub-->Enter some name and click on Ok as shown in below screenshot. created two audiences one for Boy and another one for Girl.








Step 1.1: Assign Segment to Audiences for Boy and Girl as per below screenshots









Step 2: Create a Brand for audineces
Go to this URL http://localhost:4502/libs/cq/personalization/touch-ui/content/v2/activities.html
Click on create-->create Brand --> follow the below screenshot






Step 3: Create Activity
Go to this URL: http://localhost:4502/libs/cq/personalization/touch-ui/content/v2/activities.html/content/campaigns
Now select the already created brand i.e SampleCampaign -->click on create -->create activity--> follow the below screenhsots








Step 4: Click on Next to map Experience to Sampleactivity as shown in below screenshots -->click on + add experience to add the audiences created in earlier steps and map










Step 5: Enable target component for image
Go to this URL: http://localhost:4502/editor.html/content/we-retail/us/en/about-us.html
add image component and author an image


Switch edit mode to Target mode -->click on start target --> and select the authored image component to enable the target as shown in screenshot



Click on Start Targeting, Highlight image component while selecting the default target option and enable target-->click on target icon as shown below.


Now again select the same image component but select the target as Male Option and author different image as shown in below


Now again select the same image component but select the target as Female Option and author different image as shown in below


Click on Next





Click on Save



Switch to preview mode and switch profile to male/Female based on the profile selection you can see different images are shown. refer below screenshots.






That's All!.

Working with Experience Fragments and the Experience Manager ContextHub

When working with Adobe Experience Manager 6.3/6.4 ContextHub and Personalization use cases, you can use Experience fragments to change the content that is displayed. Experience Fragments is a new feature introduced in AEM. It allows content authors to reuse content across channels including Sites pages and 3rd party systems. For more information, see Using AEM Experience Fragments.

Using Experience Fragments, you can display content based on the audiences. For example, some users may see this content:

While others may see this content.


This development article walks you through how to use experience fragments when using the ContextHub,

The following video shows this use case in action.
 

To read this development article, click https://helpx.adobe.com/experience-manager/using/contexthub_personal_exfragments.html.

Using the Adobe Experience Manager ContextHub to work with Personal Experiences

You can work with the Adobe Experience Manager ContextHub to work with personalized experiences. A personalized experience presents the visitor with a tailor-made environment displaying dynamic content that is selected according to their specific needs; be this on the basis of predefined profiles, user selection, or interactive user behavior.

That is, personalized content is what web site visitors want to see. It can be categorized and therefore made available to users according to predefined rules and it must be dynamic; in other words, the content must, in some way, be dependent upon the user. If every user would see the same content, then personalization would be redundant.

This article illustrates how to use the Contenthub to work with personalization, That is, the value of the components (or even which components are rendered) that are displayed depends on the user. Consider the following user, who is a seller (the Business Segment).


Likewise, if a user who is a buyer is selected from the Contexthub, then the contents of the web page reflect this, as shown in this illustration.


This article walks you through how to set up personalization data and display the results using the AEM ContextHub.

The following video shows this use case.

To read this article, click https://helpx.adobe.com/experience-manager/using/contexthub_personal.html.

Using the ContextHub with the Experience Manager Toy Store site

You can use the ContextHub with the Adobe Experience Manager Toy Store site. The Contexthub lets you perform targeting and personalization functionality. For example, you can configure Experience Manager Core Components that display different values based on a given location or persona.

Assume you select China from the drop-down Location field. The core 

component values reflect the selected value, as shown in this illustration.


The following video shows this use case.



To read this Experience Manager Community article, click https://helpx.adobe.com/experience-manager/using/toystore_contexthub.html.

Retrieving Adobe Experience Manager ContextHub information using the ContextHub API

Adobe Experience Manager exposes a Java API named the ContextHub API that lets you programmatically obtain information about the Experience Manager ContextHub. The Experience Manager ContextHub contains data that displays information about users, known as context data. For more information about the Experience Manager ContextHub, including ContextHub stores, see Adding ContextHub to Pages and Accessing Stores.

For example, you can create a custom Experience Manager service that logs information about the ContextHub, as shown below.

9.01.2017 12:43:38.886 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl Size of stores list :14
19.01.2017 12:43:38.886 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl ---------Store----------
19.01.2017 12:43:38.886 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl contexthub.geolocation
19.01.2017 12:43:38.886 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl contexthub.surferinfo
19.01.2017 12:43:38.886 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl granite.profile
19.01.2017 12:43:38.887 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl granite.emulators
19.01.2017 12:43:38.887 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl aem.analyticsdata
19.01.2017 12:43:38.887 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl aem.pagedata
19.01.2017 12:43:38.887 *INFO* [OsgiInstallerImpl] com.community.aem.core.ContextHubServiceImpl aem.segmentation

To read this development article, click Retrieving Adobe Experience Manager ContextHub information using the ContextHub API.

Personalization using ContextHub in AEM 6.4 Part-1

With every upgrade of AEM version, Adobe is trying to improve the capability of AEM. In this blog, we will talk about personalization using contexthub. In AEM 6.2, it was the first time when Adobe introduced contexthub in place of clientcontext.

We will learn personalization with contexthub step by step.
I am going to explain everything on AEM 6.4 here.
In the personalization section of AEM, we can see three options:

1. Activities
2. Offers
3. Audiences

Here we will discuss audiences first but before that we will talk about contexthub stores. So how AEM personalize content using the information of users visiting the websites.AEM store information of user in the browser somewhere on the basis of which personalization can happen.

Where are these contexthub stores exist in browser?
AEM stores the user information in the ContextHubPersistance Object in the local storage.All the OOTB stores like geolocation,recently viewed etc can be seen under ContextHubPersistance object.


ContextHub Store Available in Browser
So now we have place where the user information is getting stored. Now the next step is we need to create audiences for personalization.

Audiences in Personalization
Audiences means some conditions on the basis of which you want to personalize the content. Right now in audiences, there are only two folders global,we-retail.Now I want to add a new project to create new audience(segments).

Go to: Adobe Experience Manager->General->Configuration Browser or go here

Follow the steps to create a demo-project.

Create a project using Configuration Browser

Note: Please create a new project using lower-case with no space(using hyphen) and go to the hierarchy and change the title.,because if you give space it will create the name of the project with some extra characters .

Use Case: Let’s go through the use case first. I want to personalize content on the basis of browsers like Google Chrome, Mozilla etc. So to detect which browser it is, we have a OOTB store called "surferinfo". If you see the browser Family of Google Chrome, it is “Chrome” and for Mozilla Firefox it is Firefox. So let’s create the audiences basis of these two conditions.

Steps to create the audience:

• Go to personalization console and open audiences, you will be able to see a new project named Demo Project or directly click here. Let's make two segments regarding Chrome and Mozilla Firefox browsers. 

Note: Below image is showing the browser family for both browsers on basis of which we are creating audiences.


Values of SurferInfo Store in Chrome and Firefox Browsers

• Click on Create
• Create ContextHub Segment.
• Add a Title “Any Title(e.g.Chrome Users)“ and Boost value.
• Now click on segment.Open the newly created segment.
• There are so many components in the group ContextHub Segmentation.We will discuss about all the components a bit later. First add a component named Comparison:Property-Value.
• Add the values as shown in figure below

Condition in Contexthub Segment

Property Name: It is the hierarchy where the property exist in ContextHub Persistence Store.

Operator: It is the condition which you wanna put. It has many options like equal, greater-than,greater-than-or-equal,less-than etc.

Data Type: Here you can select data type of your value on which you are comparing. If you don't want to put data type just put as auto-detect.

Value: This is the value of the property on which you want to put some condition.

• Click OK. If the condition is true the background of component will turn green

Note: It is very important to note here that sometimes background doesn’t get green even if the condition is true. I have gone through this issue. So What to do now.

• First, you can refresh the page and then check if it turned into green
• Second, if still the background is not green there is a technical way to check it. If in the segmentation store, you are able to see any segments that means that segment is getting resolved. In other words, only those segments will be visible in segmentation stores which are resolving for that page. 

In the same way create another segment for Mozilla FireFox Browser.
This is how, our audience is ready, Now the next step is creating activities.

Activities: Activities are collecting a same kind of audience(segments) in a brand.

1. Go to activities and create a brand

• Add a Title for Brand.
• Click on Create.

2. Under Brand Create an Activity.

• Add a Title for Activity.
• Click on Create.

A configuration Activity screen will be visible and need to click on Next.

• In the Configure Activity Wizard Screen shown below, “Add Experiences” and “Choose Audience” (segments) related to the activity and give a name to fragments and click on next.

• In the next screen, you can specify the priority of the activity and date-time of start of personalize content which will start showing on a website and end date-time also.

All the prerequisites for personalization is done now it’s time to personalize the page.

To enable personalization on a website, We need to add this line in page component.

<sly data-sly-resource = "${'contexthub' @ resourceType='granite/contexthub/components/contexthub'}"/>

To enable particular segments on a page, you need to go to page properties and add segments path.You can also enable a particular brand from the Brand Configuration.

Page Properties Dialog of the page

Personalize content on a page
Now Go to a page, and click on Targeting mode and select the Brand and Activity been configured in the previous steps and click on Start Targeting.

Choosing Brand and Activity on a page

Now you can see all the audiences configured for that activity. If you want to add more audiences in the particular activity, click on “Add Experience Targeting”.

Different Segments associated with selected activity

Select a component which you want to target and click on target icon It will pop up a message that component is now targeted. Now click on different audience from the right rail,choose the audience and edit the content for that particular audience,after you are done click on next and save.Now you can see the personalize content on the view as published on author instance or publish instance..

Target Icon in a component

Trade Off of Personalization in AEM using ContextHub
The trade off of personalization using contexthub is that there is a lag in loading personalized content on a page.It first load default content on a page and then after some ms it loads personalized content.You can refer demo video to understand this issue more clearly.

When the page gets load it runs contexthub library, resolves the segments and then show personalize,it takes time and that’s the reason this lag is justified. But from the end user perspective, it spoils the user experience also.

Myths of Personalization in AEM using ContextHub

• Using Personalization only content of the component can be changed not the components itself. For instance, you can’t show “Image Component” for audience 1 and “Text Component” for audience 2
• You can’t delete one component for audience 2 which was present for audience 1.