Article summary


Discusses how to create Experience Fragments and use them in Personalization use cases. Adobe Experience Manager and Adobe Target are used in this article. 

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/ Adobe Target
Audience Developer
Required Skills Java, HTML, JavaScript
Version 6.3


To folllow along with this article, you require credentials to Adobe Target Classic.

However, you can perform this use case by using the Experience Manager ContextHub. For information, see Working with Experience Fragments and the Experience Manager ContextHub


When working with Adobe Experience Manager and Adobe Target to create 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


The Experience Fragment component is targeted by using Adobe Target.

Create Experience Fragments

Create the Experience Fragment that is targeted by using Adobe Target by performing these steps:

1. Enter the following URL 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 by selecting my_first-xf and clicking Edit.

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 to create a second Experience Fragment and name it my-second-xf. Specify a different image and text value. Both Experience Fragments are used later in this article.

Create an AEM Target cloud configuration

To successfully setup personal experiences using Experience Manager and Adobe Target, you must configure Adobe Target from within Experience Manger. Perform these tasks:

1. Login to at http://localhost:4502/libs/cq/core/content/tools/cloudservices.html

2. Select Target, Configure now.

Configure Target

3. Enter the following information:  

  • Title: AEM_Target_TE 

4. Click Create.

Adobe Target configuration

5. Enter the following information: 

  • Client Code of Adobe Target (this can be retrieved from the Adobe Target UI -> Setup -> Implementation -> Edit at.js Settings)
  • Email: - Adobe Target Classic email
  • Password: - Adobe Target Classic password.

If you do not have Adobe Target Classic credentials, then reach out to AEM support to create an account for you. This procedure only works for Target Classic.

Connecting to Adobe Target from Experience Manager

Create Target Audiences based on Browsers

Create a Target Audience on which the personal experience is based. In this article, the audience is based on the Chrome and Firefox browers. That is, if the user views the Experience Manager web page with Chrome, they will see the content different from a user viewing the content with Firefox. 

These two audiences are created in this section: 

  • AEM_TC_Chrome
  • AEM_TC_Firefox

Perform these tasks:

1. Go to http://localhost:4502/libs/cq/personalization/touch-ui/content/audiences.html.  

2. Click Create, Target Audience

Create an Target Audience

3. Select AEM_Target_TE (the one created earlier in this article). 


4. Create an audience based on a browser. Click the Browser icon. 

Create an audience based on a Browser

5. Specify the following values into the rule: 

  • Type
  • equals
  • Chrome

Refer to the following illustration. 

Setting up a Target rule

6. Click Next.

7. Specify AEM_TC_Chrome as the Audience Name.

Name the audience

8. Click Save. 

9. Repeat this procedure and name the rule AEM_TC_FireFox and base the rule on Firefox, as shown in this illustration.”

An Audience based on FireFox

Once done, you can view both new Audiences, as shown in this illustration. 

The two new Adobe Target Audiences

Target Experience Manager components

From within Experience Manager, you need to configure an Experience Manager page to use the Adobe Target configuration value that was created earlier in this article. In this article, the sample We Retail web site is used. Perform these steps: 

1. Go to the following URL: http://localhost:4502/editor.html/content/we-retail/ca/en/experience.html.

2. From the Top menu, click Open Properties. 

Open the Page Properties

3. Click the Cloud Services tab and uncheck the uncheck the Inherited from /content/we-retail checkbox. 

4.  Click the Add Configuration drop-down field, and select Adobe Target

Select Adobe Target

7. Select AEM_Target_TE configuration.

8. Click the Save & Close button.

Target an Experience Fragment component located in a web page

Add an Experience Fragment component to an Experience Manager page. This component is Targeted by using Adobe Target. 

Add an Experience Fragment component

Perform these steps: 

1. Open the AEM We Retail web page at http://localhost:4502/editor.html/content/we-retail/ca/en/experience.html.

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

Adding the Experience Fragment component


For this article, ensure that you only add one Experience Fragment component to the page. 

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

The first experience fragment


The Experience Fragment component is targeted by Adobe Target and whose content will change based on the audience. 

Target the Experience Fragment component

In order to change the content, which represents the web visitor experience, you have to target the component. In this example, the Experience Fragment component is targeted and its content changes based on the audience. That is, if the user is using the Chrome browser, they will see an image that is different from a user using Firefox.  

To target an Experience Fragment component, perform these steps: 

1. Change the mode to Targeting, as shown here (once
.Adobe Target configuration is added, targeting mode option is visible). 

Select Targeting mode

2. Click the + icon to create a new activity. Add the following values: 

  • Name - AEM_TE_Activity
  • Target Engine - Adobe Target
  • Select Target configuration:  AEM_Target_TE
  • Activity type - Experience Targeting

Specify Adobe Target Values

3. Click the Create button. You will see a message indicating that the activity was successfully created. 

4. Click on the Start Targeting button.

5. On right hand side click on + icon to add Experience Targeting option. 

6. Select the audience AEM_TC_Chrome.

Select the AEM_TE_Chrome audience

7. Name the experience AEM_TE_Chrome. Now you will see the audience under the Audiences section. 

The AEM_TC_Chrome Audience

8. Click on the AEM_TE_CHROME audience and then click on the Experience Fragment component. You will see the configuration toolbar pop up, as shown here.

The Experience Fragment dialog icon

9. Click the wrench icon. The Experience Fragment dialog appears. Select /content/experience-fragments/my-first-xf/my-first-xf from the drop-down field. 

Select the first Experience Fragment

10. Click the checkmark icon. 

11. Click the Target icon, as shown in this illustration. 

Click the Target button

After you successfully target the Experience Fragment component, you will see a success message. 

An AEM Component has been successfully targeted

12. Repeat this procedure for a second audience named AEM_TE_FireFox. Select the AEM_TC_FireFox audience and use the /content/experience-fragments/my-second-xf/my-second-xf experience fragment. Once complete, both audiences are displayed, as shown here. 

Both Audiences are displayed

When you click the AEM_TE_Chrome, you see the first Experience Fragment.

Experience Fragment one is displayed when you click AEM_TE_Chrome

Likewise, when you click AEM_TC_FireFox, the second Experience Fragment is displayed.

The second experience fragment is displayed when AEM_TC_FireFox is clicked


Ensure that the content changes when you click on the different audiences. If they do not change, repeat these step and ensure you followed all steps correctly. The content has to change based on the audiences. 

13. Once you see different experiences fragments, click the Next button in the upper left side. 

14. The next screen maps the audience to the experience, as shown here. 

Th Audience is mapped to the Experience

15. Click Next.

16. Set the Goals. Select Engagement and Page Views

Set the Goals

17. Click Save

View the Different Experiences

After you setup the Personal Experince using Experince Manager and Adobe Target, you can view the different experiences. When you view the AEM page using the FireFox browser, you see the second Experience Fragment. 

The second Experience Fragment is displayed when FireFox is used to display the content.

Likewise, when the Chrome browser is used to display the content, the first Experience Fragment is displayed. 

The first Experience Fragment is displayed when Chrome is used

See also

Join the AEM community at: Adobe Experience Manager Community