Article summary

Summary

Discusses how to use the ContextHub to work with personalization in the Toy Store example site. 

A special thank you to Ratna Kumar Kotla, a  top AEM community member, for testing this article to ensure it works.

Digital Marketing Solution(s) Adobe Experience Manager 6.3
Audience Developer
Required Skills HTML
Version 6.3

Note:

For information about developing the Toy Store site, see Creating your First Adobe Experience Manager 6.3 website.

This article changes the Text value based on an audience. To learn how to use Experience Fragments in Personalization use cases, see Working with Experience Fragments and the Experience Manager ContextHub.

Introduction

You can use the ContextHub with the Adobe Experience Manager Toy Store site. The ContextHub lets you perform targeting and personalization functionality. For more information, see ContextHub

A personalized experience presents the visitor with a tailor-made environment displaying dynamic content that is selected according to their specific needs; be this on the basis of predefined profiles, user selection, or interactive user behavior.

That is, personalized content is what web site visitors want to see. It can be categorized, and therefore made available to users according to predefined rules and it must be dynamic; in other words the content must, in some way, be dependent upon the user. If every user would see the same content, then personalization would be redundant.

This article illustrates how to use the Contenthub to work with personalization. That is, the value of the components that are displayed  (or even which components are rendered) depends on the user. Consider the following user, whom is a seller (the Business Segment).

Seller2
The Toy Store Site when a seller is selected

Likewise, if a user whom is a buyer is selected from the Contexthub, then the contents of the web page reflects this, as shown in this illustration. 

Buyer
A buyer is selected from the ContextHub

Notice that the content of the web page changes depending upon if the user selected is a buyer or seller (this is the different business segment and selected when the user account is created). If the user is a seller, the text changes and an image is displayed. If the user is a buyer, then the image disappears and the text changes. 

This article walks you through how to use the ContextHub in the Adobe Experience Manager Toy Store site to work with personalization data. 

Note:

For information about building the Experience Manager Toy Store site, see Creating your First Adobe Experience Manager 6.3 website

Install the Toy Store ContextHub packages

Install the Toy Store package that has the ContextHub configured by using Package Manager. For information, see How to Work With Packages.

In addition, enclosed are configuration packages to see how to create custom segments for geo-location and a brand and activities beneath that brand. Audiences have been created that allow any targeted component to be done to demonstrate geographic, gender and browser differences to highlight each of the default stores provided by Experience Manager.

The following list explains the packages: 

  • Summit Toy Site Complete.zip: The complete Toy Store site. 
  • AEM Training Activities.zip: Has the original three example store activities that respond to the existing We.Retail users. 
  • GeolocationTestingSegments.zip and SurferTestAudiences.zip: Provide the additional audiences for the Coast and Browser Choice Activities.
  • CH Demo Images.zip: Has some images for demo geolocation and the Toy Store Profile. It also has the Avatar images for the users you will create if you need them. 
  • Toy Store Buyer-Seller Activity.zip: Adds the Toy Store Business Segment Activity.
  • Toy Store Audiences.zip: Adds the Toy Store Buyer and Toy Store Seller Audiences.
  • Toy Store CH Overlays.zip: Adds to overlay to create the custom Toy Store Profile fields needed to drive the Toy Store Buyer-Seller Activity. It also overlays the geolocation default places but only changes the label on one so you get what it’s meant to do.

Install the following packages in order. 

Download

Download

Download

Note:

It is recommended that you look at the JCR nodes that each package installs so you understand the nodes that work with Personalization and the ContextHub. 

After you deploy these packages, you can view the Toy Store with the ContextHub displayed, as shown in this illustration. 

ContextHub
The ContextHub displayed within the Toy Store site

Note:

To view the ContextHub, ensure the you are in Preview mode. Also, the ContextHub can only be viewed in Author, not on the Experience Manager Production instance. 

To view the Toy Store site, use the following URL: 

http://localhost:4502/editor.html/content/summit-toys/en.html

To ensure that the ContextHub is visible in the Toy Store site (as well as other AEM sites), you need to add the following line of code to your site (this is HTL syntax): 

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

This line of code appears in the /apps/summit_toys/components/structure/page/customheaderlibs.html file. 

CRXDE3
Location of the customheaderlibs.html file

Segmentation nodes in the JCR

Segments are used to provide a visitor with specifically targeted content. In this article, there are two segments used: Buyer and Seller. Segment nodes used in this article are stored at this JCR location: 

/etc/segmentation/contexthub

The following illustration shows the segments used in this article.

Segments
Segments in the AEM JCR

You can view these in the AEM UI at the following URL: 

http://localhost:4502/libs/cq/personalization/touch-ui/content/audiences.html

Note:

The packages install the segments used in this article. For information about creating segments (they are also called audiences ) in Experience Manager, see Configuring Segmentation.

Brand nodes in the JCR

The brand used in this development article is named AEM Training Brand and is placed into the JCR when you installed the packages. The brand information is located at the following JCR location: 

/content/campaigns/aem-training-brand

The following illustration shows the nodes at this JCR location. 

CRXDE2
Brand information in the JCR

You can view the AEM Training Brand in the AEM UI at the following URL: 

http://localhost:4502/libs/cq/personalization/touch-ui/content/activities.html

Business segment nodes

The Toy Store CH Overlays package installs nodes at this location that represents the Business Segment:

/apps/granite/security/content/userEditor/content/items/form/items/userdetails/items/business_segment

The child nodes represent the two segments, buyer and seller, used in this article.  

 

SEG_Bus
JCR Nodes that represent the segments

Setup Users to test personalization

Setup these two users to test personalization: 

Alexander Oxenfree - this user's email is toysurfer@derfland.com. Select Male and the business segment is a buyer.

Lady Oxenfree - this user's email is latoysurfer@derfland.com. Select Female and the business segment is a seller.

 

Users
Setup these two users

To setup users in the Experience Manager Touch UI, perform these steps: 

1. Click the Tools icon in the AEM screen. 

2. Click Security, Users.

Users1
Creating Users in the Touch UI

3. Click Create User.

4. Fill out the user fields. You can specify the last name as the user ID and password for this example. Ensure you select the correct segment and select the correct image, as shown in this illustration. 

User4
Setting up a new user

Note:

If you do not select an image for the user, then the user does not show up in the ContextHub. Ensure you select an image for both users. 

5. Click Save. 

Setup Personalization Content

You can use Targeting functionality to setup personalization content displayed in the Toy Store site. Then you can use the ContextHub to test it. In this development article, the segments and brand information installed with the packages are used. To start, click the menu item titled Test ContextHub Stuff,  and the switch to Targeting mode, as shown here. 

TargetInfo
The Toy Store Site in Targeting Mode

Next switch the Brand to AEM Training Brand and the Activity Business Sement, as shown here (these were created with the packages you installed). 

ContextHub1
Selecting the Brand and Activity

For this article, two users are mapped: 

  • Alexander Oxenfree
  • Lady Oxenfree

The following illustration shows these users in the ContextHub drop-down field. 

ContextHubUsers
Two users displayed in the ContextHub

Map the Users to the Experience

Using the Targeting mode, you can map a user to an experience. That is, you can set component values to correspond to the user. In this example, the selected user of the drop-down field in the ContextHub determines the value of a text component. The seller also displays an image component. For example, if Lady Oxenfree is selected, then the text component will display Seller and an image is displayed. Likewise, if Alexander Oxenfree is selected, then the text component displays Buyer and the image is not displayed. 

To start mapping an audience to an experience, select the Targeting mode and click the Start Targeting button. 

ContextHubTarget
Click the Target button

When you click the Target button, you will see several screens that let you map users to the component values. You will see the following options: Toy Store Buyers and Toy Store Sellers.  

 

SegUsers
Set the value of the Text Core Component to map to the selected geo-location value

Next, click on the values on Toy Store Seller from the right hand side. Click on the component and edit it. In this example, modify the text and add an image, as shown in this illustration. 

SellerContent1
Setting the Text and adding an image component to correspond to the Toy Store Seller segment

Note:

You can select the image (and other components) from the side rail like normal page authoring. If the components are not there, go to Design mode. For information, see Configuring Components in Design Mode

Next select the Toy Store Buyer from the right hand column. Remove the image and set the text component to state buyer, as shown in this illustration. 

BuyerContent
Setting values that correspond to the Toy Store Buyer

When using components in different segments, make sure that the component is targeted. Otherwise, the component is not used in personalization. When you click on the component, you will see a target option, as shown in the illustration. Make sure it is clicked. 

Component_Target
Ensure that a component is targeted

Click the Next button. You will see the Audiences mapping to the Experiences, as shown here. 

Targets
Segment mapping to the Experience

Click Next and then click the Save button. You are done mapping audieneces to experiences. 

Test the Experience based on the Audience

You can test the experience by selecting the Preview mode. Then from the drop-down Location field, select Lady Oxenfree. You will see the text component display seller and an image, as shown here. 

SellerFull
Personalization view for Lady Oxenfree

Likewise, if you select Alexander Oxenfree from the drop-down button, you will see the text component display buyer.

BuyerFull
Personalization view for Alexander Oxenfree

Note:

When you select a different user from the ContextHub, you will notice that the data displayed in the Resolved Segment changes as well. 

See also

Join the AEM community at: Adobe Experience Manager Community

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License  Twitter™ and Facebook posts are not covered under the terms of Creative Commons.

Legal Notices   |   Online Privacy Policy