Article summary

Summary

Discusses how to display dynamic content based on user preference using campaigns, segments, and teasers.  

There has been minor UI changes from 5.6 to 6.1 with respect to using Teasers. This article walks you through using AEM 6.1 to perform a personalized experience. 

To perform this task for an earlier version of AEM, see Creating an Adobe Experience Manager personalized experience

A special thank you to Praveen Dubey a member of the AEM community for contributing AEM code that is used in this article. 

Digital Marketing Solution(s) Adobe Experience Manager (Adobe CQ)
Audience
Developer (intermediate)
Required Skills
HTML
Tested On Adobe Experience Manager 6.1
 

Introduction

You can create a personalized experience for visitors to your web site by using Adobe Experience Manager (AEM) 6.1. A personalized experience presents the visitor with a tailor-made environment displaying dynamic content that is selected according to their specific needs; be this on the basis of predefined profiles, user selection, or interactive user behavior.

That is, personalized content is what web site visitors want to see. It can be categorized, and therefore made available to users according to predefined rules and it must be dynamic; in other words the content must, in some way, be dependent upon the user. If every user would see the same content, then personalization would be redundant. For example, assume someone interested in Apple products is visiting your web site. You can display images of Mac products as opposed to Window products.

mac

For more information, see Campaign Management

This article walks you though how to setup an example AEM site that displays content based on a logged in users preferences. It will teach you how to setup campaigns and segmentations as part of delivering personalized content. Segments are used to steer the actual content seen by a specific target audience.

This article creates two AEM users:

  • David smith has a preference for Mac computers
  • John clark has a preference for Windows computers 

At the end of this article, when David logs in, Mac content is displayed in the AEM site. Likewise, when John logs in, Windows content is displayed. 

Perform these tasks:

  1. Register example users for the Geometrixx Media site.
  2. Create a campaign.
  3. Create teasers used in the campaign.
  4. Create segments.
  5. Map segments to user preferences.
  6. Link segments and teasers.
  7. Create a new geometrixx media page.

Note:

This development article uses the example AEM site located at /apps/geometrixx-media. 

Note:

Change all AEM pages in this article to Classic View. The use of the AEM sidekick is used.

Register example users for the Geometrixx Media site 

The first task to perform is to register two AEM users named David smith and John clark. Open an example Geometrixx Media page ( any page). Click on Top right side Sign up.

picA

A page opens with a form as shown below. Add a drop down field that lets a user select which type of operating system they prefer. Drag and drop a Dropdown List component from the sidekick. Place this new field after the Last name field.

The Dropdown List component is located under the Form group. If you are not able to see Form group in your sidekick, please go to design Mode and add it.
 

picB

Once you have successfully dragged and dropped the component, your sign up form appears as shown in this illustration.

picC

Double click the green field (which you dragged in above step) and fill all the values according to the following illustration.

picD

In the previous illustration, notice this name is ostype. This value is used in rules later in this artilce that determine which content is displayed in the web site. 

Also ensure that you enter the values as shown in the three multifield controls. Once all the value are filled, click Ok. You will be able to see a drop down similar to the below image your form.

picE

Go to preview mode using the AEM sidekick. Click on Sign Up.

Register the first AEM user:

  • Account Name: david
  • Password: 123
  • Confirm Password: 123
  • Last Name: smith
  • Operating System: Mac OS

Register the second AEM user:

  • Account Name: john
  • Password: 123
  • Confirm Password: 123
  • Last Name: clark
  • Operating System: Windows OS
     

Note:

Login with both the newly created user accounts to ensure they are both valid.

Create an AEM campaign

The second step is to create an example AEM campaign. An AEM campaign allows you to orchestrate your marketing campaigns across the web, email and mobile services to engage your visitors. Go to the AEM campaign view located at the following URL: 

http://localhost:4502/mcmadmin#/content/campaigns

Click the campagin list, as shown in this illustration. 

picF

Create an AEM Brand

Create a new brand by performing these steps.

1. Click on Campaigns on the left-side list.

2. Click the New button.

3. In the Title field, specify AEM training. Ensure you select Brand, as shown in this illustration. 

PicG

Create an Operating System campaign

From within the Brand, create a campaign named Operating System by performing these tasks.

1. Click on AEM Training. 

2. Click the New button. 

3. In the Title field, specify Operating System. Ensure you select Campaign, as shown in this illustration. 

PicOS

Create teasers used in the campaign

Campaigns often use teasers as a mechanism to entice a specific segment of the visitor population using content focused on their interests. In this example, teasers appear to a log-in user showing content based on Windows, Mac OS, or Linux. 

For more information about teasers, see Teasers

Perform these tasks to create a teaser:

1. From within the Operating System campaign, click the New button (make sure that you select the List View icon in the top menu; otherwise, you will not see the New button).

2. In the Title field, specify Windows. Ensure that you select Offer Page as shown in this illustration.  

OfferPage

3. Click Create. A new dialog will open immediately. Here you can use the various tabs to enter properties for the teaser.

4 Click Ok.

5. Open the new teaser by double-clicking on it. Add an image to it. 

windowsA

Note:

Repeat this procedure for Linux and Mac. 

When you are done, you will see the three new teasers, as shown in this illustration. 

teasers

Create segments

Create AEM segments that act as rules for the teasers. That is, they define when content within a teaser appears on a web page. Content can then be specifically targeted to the visitor's needs and interests, depending on the segment(s) they match.

For more information, see An Overview of Segmentation

1. Go to the AEM Tools page at http://localhost:4502/miscadmin#/etc. 

2. Click on the folder named Segmentation.

3. Create a folder name OS inside the Segmentation folder.

4. Now create 3 segments inside the OS folder with named windows, mac, linux. Click on the OS folder and select New. Ensure that you specify Segments, as shown here. 

Segments

Once you are done, your AEM structure looks like this illustration. 

SegmentsAll

Map Segments to User Preferences

Map all three segments to user preferences. At the beginning of this article, a new drop down control was added to the Sign Up form named ostype. Now this field is mapped to Segments that define what teaser content is displayed. 

Open each segment and drag and drop the User Property Component, as shown in this illustration.

segEditor

Open the user property component of mac segment, and specify the value shown in the following illustration.

mac1

In the previous illustration, you can see how the ostype value (the drop-down control in the Sign Up form) is mapped to the mac segmentation. 

Likewise, open the user property component of the linux segment, and specify a value shown here.

 

linuix3

Enter the following value for the window segmentation.

windowCC

Link Segments and Teasers

Link segments and teasers so the content in the teaser appears when the condition in the segment is satisfied. This links the segments to the dropdown added in the beginning of article. For example, when the value of ostype is linux, the content in the linux teaser appears.

To link segments and teasers, perform these tasks:

1. Open the windows teaser at http://localhost:4502/mcmadmin#/content/campaigns/AEMtraining/operating-system.

2. Click Page Properties in the AEM sidekick. 

3. Click the Advanced tab.

4. Click Segments and specify the path to the windows segments, as shown here. 

winSeg

5. Repeat the same steps for both the linux and mac teasers.

Create a new Geometrixx media page

Create a new page in Geometrixx media using the Media Article
template and name it AEM Demo.

geoPage

Open the newly create page. Next, go to the design mode, select the Teaser component from the Personalization component group.

 

TeaserComponent

Once it appears in your sidekick, drag and drop the Teaser component on the page. Double click the component. In Campaign  Path field select the path where you have created
the teasers.

/content/campaigns/AEMtraining/operating-system

As well, select First from the strategy field, as shown here. 

GeoPage2

That’s it - its Testing Time! When John Clark registered on our site, he selected Operating System as Windows. Therefore this user sees windows content as the Teaser, as shown here. 

AEMDemo

See also

Congratulations, you have just created an AEM 6.1 site that dynamically displays content based on user preferences. Please refer to the AEM community page for other articles that discuss how to build AEM services/applications.

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