Article summary

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

Note:

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

Introduction

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.

componentf
Content based on an Experience Fragment

While others may see this content. 

componentg
Content based on a separate Experience Fragment

Note:

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.

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 by selecting my_first-xf and clicking Edit.

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 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 Marketing.adobe.com at http://localhost:4502/libs/cq/core/content/tools/cloudservices.html

2. Select Target, Configure now.

target
Configure Target

3. Enter the following information:  

  • Title: AEM_Target_TE 

4. Click Create.

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

boxcred
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

audience
Create an Target Audience

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

aud_target
AEM_Target_TE

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

aud1
Create an audience based on a Browser

5. Specify the following values into the rule: 

  • Type
  • equals
  • Chrome

Refer to the following illustration. 

aud2
Setting up a Target rule

6. Click Next.

7. Specify AEM_TC_Chrome as the Audience Name.

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

aud3
An Audience based on FireFox

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

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

openprops
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

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

weretail
Adding the Experience Fragment component

Note:

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.

ex1
The first experience fragment

Note:

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

targetmode
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

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

aud_target3
Select the AEM_TE_Chrome audience

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

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

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

aud7
Select the first Experience Fragment

10. Click the checkmark icon. 

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

aud8
Click the Target button

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

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

aud10
Both Audiences are displayed

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

aud11
Experience Fragment one is displayed when you click AEM_TE_Chrome

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

aud12
The second experience fragment is displayed when AEM_TC_FireFox is clicked

Note:

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. 

aud13
Th Audience is mapped to the Experience

15. Click Next.

16. Set the Goals. Select Engagement and Page Views

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

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

aud16
The first Experience Fragment is displayed when Chrome is used

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