Saturday, February 5, 2022

How to Implement Experience Targeting in AEM using ContextHub?

 Content personalization in short means delivering the right content to the right person in real-time.

Simple experience targeting scenario, user1 requesting the content through Firefox receives Experience A and user2 requesting the content through Chrome receives Experience B. The experience can be decided based on different rules e.g gender, age location, etc, here we are seeing the simple scenario.

The targeting engine is the mechanism that drives the logic for targeted content. You can use either AEM or Adobe Target as the targeting engine, AEM provides a built-in targeting engine that processes page requests and determines the content to display. AEM as a targeting engine only supports Experience Targeting but Adobe Target should be used for A/B testing.

In this post, let us see how to use the AEM targeting engine to enable the experience targeting for a web page.

Setup ContextHub:

ContextHub is a framework for storing, manipulating, and presenting context data. The ContextHub Javascript API enables you to access stores to create, update, and delete data as necessary. To enable the ContextHub features and to link to the ContextHub JavaScript libraries, including the <contexthub> component in the <head> section of your web page.

Add the below HTL code to the overridden customheaderlibs.html file of your page component(here the page component is extending from core page component — core/wcm/components/page/v2/page

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

ContextHub includes a segmentation engine that manages segments and determines which segments are resolved for the current context.

Once the ContextHub is enabled for the project client context data can be explored through the browser local storage.

Refer to https://experienceleague.adobe.com/docs/experience-manager-65/developing/personlization/contexthub.html for more details on ContextHub.

Configuration Browser — Enable ContextHub Segments:

Enable the ContextHub segments for your site under Configuration Browser. Tools → General → Configuration Browser → Select the project → Properties → Select ContextHub Segments, Save and Close

Configure Segment Path and ContextHub path:

Assign Segment path and ContextHub path to your site root node, the default ContextHub path is /libs/settings/cloudsettings/legacy, segment path — /conf/<tenant>/settings/wcm/segments

Create Brand:

Create a Brand to manage the Audiences through Activities console, Tools →Personalization →Activities, Create Brand

Select Brand Template, add a tile, and Create

Create Audiences — Create ContextHub Segment:

An audience, called segment in ContextHub, is a class of visitors defined by specific criteria, which then determines who sees a targeted activity.

Create the required Audiences, Tools →Personalization →Audiences, Create ContextHub Segments under the corresponding project.

I am creating two Audiences, one for Chrome browsers and another one for Firefox with the simple conditions to check the browser from which the request coming. Specify the required boost factor, If there is more than one segment that gets resolved the one with a higher boost factor is selected.

Assign the segments to the audience, I am using “CONTEXTHUB SEGMENTATION: Comparision: Property — Value” with the simple conditions to check the browser name(complex rules can be enabled based on the use cases)

Create Activities:

Activities consist of audiences that you are targeting, and the period of time when the targeting is applied.

First Create an Area under Brand and create the Activity inside the Area, Tools →Personalization →Activities

Enter Title, Name and select the Target Engine as ContextHub

Add Experience for each audience

Set the Duration and Priority

Enable Target Configuration:

Enable the Target Configuration — Brand, Area to the root page properties or to the specific page(you can configure more than one brand).

Author targeted content:

Author targeted content using the Targeting mode of AEM. Targeting mode provides tools for creating content for the experiences of your marketing activities.

Select Targeting Mode from the Dropdown

Select the Brand and Activity and click on Start Targeting.

On required components select the Target option

Now select the Audience and define the experience for the components, Default — Default experience, Chrome — the experience for the Chrome user, Firefox — the experience for the Firefox user. Select the corresponding audience and edit the component data.

Now you will get different experiences while accessing the page from Firefox and Chrome browsers.

Chrome -

Firefox —

IE — Default behavior

ContextHub UI configuration:

ContextHub provides a toolbar for content authors to allow display and manipulation of client context data in order to achieve a reliable preview of experience targeting. The toolbar is fully customizable and configurable.

The location can be changed to preview different experiences.

Also, you can find the resolved segments

The resolved segment details can also be referenced from browser local storage

The browser info context hub is not enabled in the default UI(the default browser info UI module won’t provide an option to modify the browser info but just display the browser information —the Browser Info UI module can be extended to change the default behavior)

Let us now enable the Browser Info UI Module, the ContextHub configurations can be managed through UI — refer to https://experienceleague.adobe.com/docs/experience-manager-65/developing/personlization/ch-configuring.html?lang=en for more details. As a quick approach, copy /libs/settings/cloudsettings/legacy to your tenant under /conf/<tenant>/settings/cloudsettings, rename may be us default. Remove the configurations that are not required.

Tools →Sites →ContextHub, Select default configuration under your tenant then select ContextHub Configuration

Select Device ContextHub UI Mode

Create a new “ContextHub UI Module(generic) inside Device

Enter the module type as contexthub.browserinfo, refer to https://experienceleague.adobe.com/docs/experience-manager-64/administering/personalization/contexthub-config.html?lang=en for more details on adding ContextHub UI Modes and Modules.

Use CRXDE, if you are facing any issue while configuring through UI.

Now modify the ContextHub path to your site root node

Now you will be able to see the browser details in ContextHub UI(as mentioned earlier you will not able to modify the browser details as the location but the UI Module can be extended/customized based on your need)

In this post, we have seen a simple scenario to Target different experiences using ContextHub and AEM targeting engine but customization can be enabled — define custom store, custom UI modules, additional rules to identify the audience, etc to enable your uses cases. The ContextHub along with the AEM targeting engine will provide limited functionalities also you may see some flickering issues while rendering the final content, use Adobe Target to enable advanced experience Targeting and A/B testing.



Thursday, February 3, 2022

AEM(Adobe Experience Manager) Headless Implementation— Workflow

 My earlier post explained the steps to enable headless content sharing through GraphQL. Refer to https://medium.com/tech-learnings/how-to-deliver-headless-content-through-graphql-api-and-content-fragments-da2b2d22df06 for more details on delivering headless content through GraphQL API and Content Fragments.

In this post let us quickly see the different activities to share the headless content through GraphQL and the different roles performing those activities(this is based on my understanding, feel free to give your feedback).

The different roles to enable the headless content

  • Developer
  • Content Architect
  • Content Author

Developer:

The developer performs most of the technical configurations to enable Content Architect and Content Authors to produce headless content. Additionally, enable the GraphQL endpoint configurations that can be consumed by external applications to fetch headless content.

  • Configuration Browsers — Enable Content Fragment Model/GraphQL Persistent Queries
  • Enable Content Fragment Model for the DAM folder
  • Create Persistence Queries(Optional)
  • Configure GraphQL Endpoints(Global/Site-specific)
  • Security Configurations — CORS, Referrer filter
  • Enable Authentication for endpoints
  • Share GraphQL Endpoint and query details for external system

Content Architect:

The content author defines the content model structure, relationship to share the content with external systems, also creates the required Content Fragment Models in AEM.

  • Define Content Model Structure
  • Create Content Fragment Model

Content Author:

Content Author’s creates the content by using the Content Fragment Model defined by the Content Architect.

  • Create Content Fragments

All the configurations e.g Endpoints, Model, Content Fragments should be published to make them available to the AEM publisher so that the Endpoints can be consumed by external systems.