blog image

Context Hub for Personalization in AEM 6.5

Blog - Technology

  • icons28 February, 2020
  • iconsMihir Mange

If you are looking to use personalization with AEM, adding context hub to your pages is one of the first steps you need to take.

In this post I will share some key implementation steps you need to take to get context hub and targeting mode working on your AEM 6.5 pages

To begin personalization at a high level following is needed

  1. Load Context Hub on your page
  2. Create context hub configuration (or use a legacy one)
  3. Associate context hub configuration with your site or top level page (since it’s inherited)

How to load Context Hub on your page

To enable the targeting mode on your pages you need to include the context hub component. This component is not included by default in WCM core page so, I recommend following steps to get this added:

Step 1: Have your page component inherit from

core/wcm/components/page/v2/page

Step 2: Override the customheaderlibs.html file

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

Notice I’ve included granite.utils clientlib here to avoid errors such as following:

  • Uncaught TypeError: window.injectContextHubUI is not a function
  • Uncaught TypeError: Cannot read property ‘extend’ of undefined’

How to create context hub configuration

Create “cloudsettings” folder in conf

For every tenant, there is typically a conf folder since AEM 6.4, so assuming you have a folder /conf/<your project>, you need to ensure a “cloudsettings” folder exists underneath for e.g.

/conf/<your project>/cloudsettings

Create ContextHub Configuration

  1. You can now go to AEM > Tools > Sites > Context Hub
  2. Navigate to your project folder and click Create and create a Configuration container for e.g. “default”
  3. Create “ContextHub Configuration” and click Save
  4. Click into “ContextHub Configuration”

At this point, you can follow instructions here to add stores and ui modules https://docs.adobe.com/content/help/en/experience-manager-65/administering/personalization/contexthub-config.html

If you want to quickly get started with something, a trick I recommend is following:

  1. Open CRXDE and go to /libs/settings/cloudsettings/legacy/contexthub
  2. You can copy the desired nodes to your contexthub (probably located at something like: /conf/<your project>/cloudsettings/default/contexthub)

How to associate ContextHub with your site?

  1. Go to the top most level page where you’d like to set the context hub (since it inherits down).
    1. I generally setup a single context hub for a single website / domain but, if some specific stores / integrations are needed in context hub by locale then, it’s probably a good idea to associate with your locale folder
  2. Go to Page Properties > Personalization Tab
  3. In the Context Hub Path put the path to your context hub: /conf/<your project>/cloudsettings/default/contexthub
  4. Save and close

Now if you open your page in “Preview Mode” you should see the context hub and start personalizing

 

 

Are you looking for help with your AEM implementation? Reach out to hello@initialyze.com.