Using the ContextHub to setup GeoLocation data in the Experience Manager Toy Store site

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

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.

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.

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 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.

Install the following packages in order.

Download

Get file

The Toy Store Site with the ContextHub configured

Get file

Geolocation segment information

Get file

Experience Manager Activity information

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

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.

Location of the customheaderlibs.html file

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.

Geo-location segments in the AEM 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.

Brand information in the JCR

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.

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).

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.

Default Location values

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.

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.

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.

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.

Audiences mapping to the Experience

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

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.