Article summary

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 KotlaNavin Kaushal, Prince 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
Audience Developer
Required Skills HTML
Version 6.3

Note:

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

Introduction

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.

edpic2
Content based on an Experience Fragment

While others may see this content.

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

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

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

html5
Select HTML5

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

EX3
Segments in the AEM JCR

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

EX4
An Experience Fragment named my-first-xf

Note:

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. 

Personal
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

CH1
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) 
CH3
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

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

 

Brand1
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:

Brand2
The new brand

7. Click on DemoEFBrand.

8. Click Create, Create Activity.

9 Enter the following values: 

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

5. Click Next.

6. Add an Experience as shown below:

Act
Creating an Experience

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

MasterArea
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: 

http://localhost:4502/editor.html/content/we-retail/us/en/experience.html

Note:

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. 

WeRetail
Adding the Experience Fragment component

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

ComponentA
Select the Experience Fragment named my-first-xf

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

TargetMode
Select Targeting mode

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

ComponentB
Select the DemoEFBrand

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

ComponentC
In Targeting mode

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

ComponentD
Select firstEF

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

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

 

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

ComponentG
Map Experience Fragment 2 to the default Audience

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

ComponentH
The Mapping Audience to the Experience view

12. Click Next, Save. 

Note:

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. 

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

Experiene1
Experience Fragment 1 is displayed when the Postal code matches

Note:

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

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