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