Article summary


Discusses how to create Experience Fragments and use them in Personalization use cases. The ContextHub is used in this article.  

A special thank you to Ratna Kumar KotlaPrince Shivhare, and Shivani Garg, all top AEM community members, for testing this article to ensure it works. Also thank you to Neha Malhotra for helping with this article. 

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


This article uses two separate images to create Experience Fragments. You can use any two images to follow along with this article. 


When working with Adobe Experience Manager ContextHub and Personalization use cases, you can use Experience fragments to change the content that is displayed. Experience Fragments are a new feature introduced in AEM 6.3. They allow content authors to reuse content across channels including Sites pages and 3rd party systems. For more information, see Using AEM Experience Fragments.

Using Experience Fragments, you can display content based on the audience. For example, some users may see this content.

Content based on an Experience Fragment

While others may see this content.

Content based on a separate Experience Fragment

This development article walks you through how to use experience fragments when using the ContextHub. 

Create Experience Fragments

To create an Experience Fragment, perform these steps: 

1. Enter the following ULR into your web browser: http://localhost:4502/aem/start.html.

2. Click on Experience Fragments.

Click on Experience Fragments

3. Click the Create button, Experience Fragment.

4. Specify my-first-xf  as the title and description as shown in this illustration. 

Specify a Title and Description for the Experience Fragment

5. Click the Next button. 

6. Select HTML5 and click the Create button, as shown here. 

Select HTML5

7. Open the Experience Fragment and edit it, as shown here. 

Segments in the AEM JCR

8. Add any component in the parsys. In this example, the Text and Image components are used. 

An Experience Fragment named my-first-xf


Repeat this procedure and name it my-second-xf. Specify a different image and text value. Both Experience Fragments are used later in this article. 

Create a ContextHub Audience

Create a ContextHub audience used in this use case. In this example, the audience is defined by geo-location data. That is, the postal code is used. To create an audience, perform these steps: 

1. Click the Personalization icon. 

Personalization icon

2. Click Audiences. 

3. Click the Create button and Create ContextHub Segment

4. In the title field, specify firstEF and click the Create button. 

5. Edit the segment by adding some conditions. Add the Comparison: Property – Value

The Comparison: Property – Value component

6. Configure the component by adding these values:

  • Property Name - geolocation/address/postalCode
  • Operator  - equal
  • Data Type -  (auto)
  • Value  - 95110 (corresponds to the San Jose address) 
Specifying values in the Comparison: Property – Value component

From the ContextHub location field, select San Jose from the Dropdown field. Notice that the postal code lines up with the component, and the component now states: Data located in the ContextHub now resolves the current segment

The Current segment lines up with Data loaded in the ContextHub

Create a ContextHub Activity

The Experience Manager Activities console enables you to create, organize, and manage the marketing activities. Create an Activity by performing these steps: 

1. Click the Personalization icon.

2. Click Activities.

3. In the Activities page, click on Create, Create Brand.

4. Select Brand, as shown here. 


Select the brand

4. Click Next. 

5. In the Template view, enter DemoEFBrand as the Title value.

6. Click Create.  The new brand is now listed in the Activities page as shown below:

The new brand

7. Click on DemoEFBrand.

8. Click Create, Create Activity.

9 Enter the following values: 

  • Name - DemoActivityContextHub
  • Targeting Engine - ContextHub(AEM)
Specify values for the Activity

5. Click Next.

6. Add an Experience as shown below:

Creating an Experience

8. Save the Activity and it gets listed in the master area. 

The Activity listed in the Master Area

Use the Experience Fragment in a page

After you create an Experience Fragment, you can use it within an Experience Manager page to achieve personalization.  To demonstrate how to work with Experience Fragments, this article uses We Retail.

Perform these steps:

1. Open the page located at the following URL: 



To see how to work with Personalization and the ContextHub in a custom site (the Toy Store Site), see this article, Using the Adobe Experience Manager ContextHub to work with Personal Experiences.

2. Drag the Experience Fragment component from the SideRail onto the page, as shown in this illustration. 

Adding the Experience Fragment component

3. Configure the component and select the my-first-xf component that was created in this article. 

Select the Experience Fragment named my-first-xf

4. Change the mode to Targeting, as shown here. 

Select Targeting mode

7. Select the DemoEFBrand as shown below (the DemoActivityContextHub shows up as the Activity value). 

Select the DemoEFBrand

8. Click the Start Targeting button. Notice that the Audience is mapped with the DemoActivityUsingContextHub.

In Targeting mode

9. Map the Experience Fragment with a given Audience. Change the option by selecting firstEF.

Select firstEF

10. Select the Experience Fragment and make sure you select my-first-xf, as shown here. 

Select the correct Experience Fragment to the audience

Once done, you will see my-first-xf for the audience (with the correct Postal Code value).


Map Experience Fragment 1 to firstEF audience

11. Next click on Default value and click the Experience Fragment component. Then select the second Experience Fragment that you created.

Map Experience Fragment 2 to the default Audience

11. Click the Next button. You will see the Mapping View, as shown here. 

The Mapping Audience to the Experience view

12. Click Next, Save. 


When working with the Experience Fragment in the Targeting mode, make sure the Target Icon is enabled so this component is included in Targeting. Also make sure that when you click on firstEF and Default, the image changes. This is how you know that Targerting is working properly and the Experience Fragment changes dynamically based on the audience.  

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 France. This does not Match up the defined audience (which is based on the San Jose Postal code). Therefore the default experience is displayed. 

The Default view that displays Experience Fragment 2

When you select San Jose, the postal code matches. As a result, the Experience Fragment 1 is displayed. 

Experience Fragment 1 is displayed when the Postal code matches

The following video shows this use case in action. 

Working with Experience Fragments and the Experience Manager ContextHub

Working with Experience Fragments and the Experience Manager ContextHub


When you select a location other than San Jose, the default experience is displayed. 

See also

Join the AEM community at: Adobe Experience Manager Community