Configuring Contexthub to Segment pages with Adobe AEM

From Basef
Jump to: navigation, search

Personalization allows you to customize your pages, providing a way to set different configuration 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.


Enabling ContextHub

1) The first task is to enable ContextHub. You can do it by acessing `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 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 Starage, 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 our variables values