Article summary

Summary

Discusses how to use the ContextHub to work with geo-location data 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

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

You can, for example, configure Experience Manager Core Components that display different values based on geolocation data, as shown in the following illustration.

Location
Selecting a location in the ContextHub

Assume you select China from the drop-down Location field. The core component values reflect the selected value, as shown in this illustration.

OverView
Core components display values that reflect the ContextHub Location drop-down value

This article walks you through how to use the ContextHub in the Adobe Experience Manager Toy Store site to work with geo-location 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. 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.

Install the following packages in order. 

Download

After you deploy these packages by using the Experience Manager Package Manager, 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. 

crxde
Location of the customheaderlibs.html file

Geo-location nodes in the JCR

The geo-location segments used in this article are stored under: 

/etc/segmentation/contexthub

The following illustration shows some of the segments used in this article, such as geolocation-store-paris.

geolocation
Geo-location segments in the AEM JCR

Brand nodes in the JCR

The brand used in this development artilce 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. 

BrandNodes
Brand information in the JCR

Setup Geolocation Targeting

You can use ContextHub functionality to setup geo-location targeting information that is displayed in an Experience Manager page. 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 Coast, as shown here (these were created with the packages you installed). 

Brand
Selecting the Brand and Activity

Now you can start mapping component values to geo-location values. For more information, see Geo-location data.

For this article, two locations are mapped: 

  • Beijing, China
  • Paris, France

These values can be set from the Location drop-down control that is part of the ContextHub. Paris information is stored at: 

/etc/segmentation/contexthub/geolocation-store-paris/jcr:content

Likewise, China information is stored at: 

/etc/segmentation/contexthub/geolocation-store-bejing/jcr:content

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

LocationCH
Default Location values

Map Audiences to the Experience

Using the Targeting mode, you can map an audience to an experience. That is, you can set component values to correspond to the value selected audience. In this example, the Location of the drop-down field in the ContextHub determines the value of a Text Core component. For example, if China is selected, then the text component will display China. Likewise, if Paris is selected, then Paris is displayed. 

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

TargetStart
Click the Target button

When you click the Target button, you will see several screens that let you map the values to the component values. Click on the values on Geolocation Store Beijing from the right hand side. Next click on the component and edit it. In this example, set  Beijing China. 

 

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

Next, click on the values on Geolocation Store Paris from the right hand side. Click on the component and edit it. In this example, set Paris, France.

ParisSet
Setting the Text component to correspond to the Paris location

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

NextSet
Audiences 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 Paris. You will see the text component display Paris, as shown here. 

Paris
Paris is displayed in the drop-down Location field

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

ChinaDisplay
China selected from the drop-down location field

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