banner-Personalization-using-ContextHub-in-Adobe-Experience-Manager-6.5.jpg

Personalization using ContextHub in Adobe Experience Manager 6.5

Feb 28th, 2020 | Mihir Mange

If you are looking to use personalization with Adobe Experience Manager, 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 Adobe Experience Manager 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)


Step 1: 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’


Step 2: Create context hub configuration


Create “cloudsettings” folder in conf

For every tenant, there is typically a conf folder since Adobe Experience Manager 6.4, so assuming you have a folder /conf/, 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)


Step 3: 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

context-hub-preview-1-1536x97.jpg

About Initialyze

Initialyze brings efficiency and simplicity to the complexity of Adobe Experience Manager implementations. Using an optimized implementation process and a suite of ready to use Initialyzers, we deliver solutions that use the latest features of Experience Manager and enable marketers to quickly build experiences reducing their reliance on developers.

Got AEM Troubles? Get In Touch: hello@initialyze.com



About Adobe Experience Manager

Adobe Experience Manager is a comprehensive content management solution for building websites, mobile apps and forms. And it makes it easy to manage your marketing content and assets. Experience Manager Sites is a content management system within Adobe Experience Manager that provides one place to create, manage and deliver digital experiences across websites, mobile sites, and on-site screens (like what you may see in retail stores or hotels). Sites gives you the functionality to personalize online experiences to make them more relevant and engaging.