| 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.
Assume you select China from the drop-down Location field. The core component values reflect the selected value, as shown in this illustration.
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.
After you deploy these packages, you can view the Toy Store with the ContextHub displayed, as shown in this illustration.
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.
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.
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.
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.
Next switch the Brand to AEM Training Brand and the Activity Coast, as shown here (these were created with the packages you installed).
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.
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.
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.
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.
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.
Likewise, if you select China from the drop-down button, you will see the text component display China.
Join the AEM community at: Adobe Experience Manager Community.
Twitter™ and Facebook posts are not covered under the terms of Creative Commons.