A couple of months ago, while working for a big client, we got a request to show different data on a page depending on a set of specific user characteristics. Instead of doing a full custom solution, we decided to use AEM’s built-in feature ‘AEM Personalization’ to accomplish this task.
AEM Personalization is an AEM OOTB feature that lets you display different experiences according to the content of your interest. For more information about this (and most of the concepts on this article), visit this link: https://helpx.adobe.com/in/experience-manager/6-2/sites/authoring/using/personalization.html
This article will show a simple tutorial on how to use this feature, finishing with some final thoughts and a conclusion. Enjoy!
ContextHub Configuration
ContextHub is a framework for storing and retrieving client-side data. It provides a JavaScript API that enables the manipulation of the ContextHub. A ContextHub store is a place where you can persist and access data. For this article, I decided to add a new store to the default ContextHub configuration.
Go to http://localhost:4502/etc/cloudsettings/default/contexthub.html
Create a ContextHub Store Configuration
The store type is important because you will need to use the same value when registering the store. In this case, in CRX/DE you can see that it creates the node at the following location: /etc/cloudsettings/default/contexthub/conexio
Custom Store Logic
Another important piece of the puzzle consists in creating all the needed store logic. It uses the ContextHub JavaScript API mentioned before. You will need to create a clientlib in your project to accomplish this.
Use “contexthub.store.X”, where X is the store type you previously configured.
Here you can see a JS example of how to implement your custom store logic. In this case, it calls an internal API to get the user data and then it stores the area in which the user works. Some important notes:
There are some OOTB stores defined in AEM. You can inherit from the one you need so the code can be much simpler and cleaner.
You can see that the store is being registered with the same store type that you configured before.
Audience configuration
The next step is to create the necessary audiences you’d like. A user will belong to either one audience or another depending on the way you defined them.
To accomplish this, first you need to go to http://localhost:4502/libs/cq/personalization/touch-ui/content/audiences.html and select the option “Create a ContextHub Segment”. You need to add a title for the audience and then select “Create”.
For this example, I have created two new audiences: Management and Marketing. Those audiences will represent people that work in this areas respectively. You can see the created nodes in CRX/DE at the following paths:
/etc/segmentation/contexthub/management
/etc/segmentation/contexthub/marketing
After doing this, you’ll need to configure the audiences. I’ll explain how I did it just with Management because for Marketing it’s analogous. First, go to http://localhost:4502/editor.html/etc/segmentation/contexthub/managament.html. Insert the component “Comparison: Property – Value” and configure it as shown below:
It’s important to notice that the property name used is the same as previously used in the JS. Also, it’s important to use the correct store; in this case, it’s called “conexio”.
In the case of the Marketing audience the process is quite similar. The only difference is that you need to select “Marketing” value instead of “Management”.
Brand and Activity Configuration
To start using the above configuration, you’ll need to create your own brand and activity. This will be later used to configure the required components to show personalized data. First, you need to go to http://localhost:4502/libs/cq/personalization/touch-ui/content/activities.html and select the option “Create Brand”. For this example, I have named the brand “Conexio”.
After that, you need to go to http://localhost:4502/libs/cq/personalization/touch-ui/content/activities.html/content/campaigns/conexio/master and select the option “Create Activity”.
For this example, I have named the Activity “Test” and selected the option “ContextHub” for the targeting engine.
Finally, I have mapped the audiences “Management” and “Marketing” to new experiences. So basically, the idea is that, for an activity, all the audiences belonging to it will be mapped to a different experience.
Start Targeting
All the above configuration has been done to finally get to this point. Now, we have all elements to start showing personalized data for the components you want. The first thing you need to do is, for the parent page of your project, configure the ContextHub Path and the Segments Path. It’s important to notice that if you use the default configuration, this step won’t be necessary. Otherwise, it’ll be necessary to do it if you are working with a custom configuration.
In edit mode, you need to select the option “Target” and then the brand and activity that we configured above.
For each component you want to show personalized data for, you’ll need to first select the option Target.
After that, you can configure the component for each audience belonging to the brand and activity that you have chosen above. In addition, you can configure a default case for each user that doesn’t belong to any of the other audiences.
For this example, I’m using an Image component to show different images for each audience.
In the above image, you can see that I have configured the component for the default case.
In the above image, you can see that I have configured the component for the Management audience.
After doing this, you can configure again, if needed, the audiences and the experience names.
Finally, you can configure the duration of the targeting. By default, it will start when activated and end when deactivated. But you also have an option for setting a period.
Conclusion
As you can see, this feature is very powerful and useful but requires a lot of configuration. Hopefully, most of the configuration can be done and versioned by Development team so that, from an author’s perspective, they will only need to do the targeting section of this article. We tried this approach in a past projects and the clients found this very intuitive to use and were very satisfied with the solution.
Another important aspect to mention is the ability of this feature to be used in conjunction with other Adobe products – such as Campaign and Target. For example, you can use Adobe Target as the targeting engine for the activities (instead of ContextHub).
The next step is to create the necessary audiences you’d like. A user will belong to either one audience or another depending on the way you defined them.
To accomplish this, first you need to go to http://localhost:4502/libs/cq/personalization/touch-ui/content/audiences.html and select the option “Create a ContextHub Segment”. You need to add a title for the audience and then select “Create”.
For this example, I have created two new audiences: Management and Marketing. Those audiences will represent people that work in this areas respectively. You can see the created nodes in CRX/DE at the following paths:
/etc/segmentation/contexthub/management
/etc/segmentation/contexthub/marketing
After doing this, you’ll need to configure the audiences. I’ll explain how I did it just with Management because for Marketing it’s analogous. First, go to http://localhost:4502/editor.html/etc/segmentation/contexthub/managament.html. Insert the component “Comparison: Property – Value” and configure it as shown below:
It’s important to notice that the property name used is the same as previously used in the JS. Also, it’s important to use the correct store; in this case, it’s called “conexio”.
In the case of the Marketing audience the process is quite similar. The only difference is that you need to select “Marketing” value instead of “Management”.
Brand and Activity Configuration
To start using the above configuration, you’ll need to create your own brand and activity. This will be later used to configure the required components to show personalized data. First, you need to go to http://localhost:4502/libs/cq/personalization/touch-ui/content/activities.html and select the option “Create Brand”. For this example, I have named the brand “Conexio”.
After that, you need to go to http://localhost:4502/libs/cq/personalization/touch-ui/content/activities.html/content/campaigns/conexio/master and select the option “Create Activity”.
For this example, I have named the Activity “Test” and selected the option “ContextHub” for the targeting engine.
Finally, I have mapped the audiences “Management” and “Marketing” to new experiences. So basically, the idea is that, for an activity, all the audiences belonging to it will be mapped to a different experience.
Start Targeting
All the above configuration has been done to finally get to this point. Now, we have all elements to start showing personalized data for the components you want. The first thing you need to do is, for the parent page of your project, configure the ContextHub Path and the Segments Path. It’s important to notice that if you use the default configuration, this step won’t be necessary. Otherwise, it’ll be necessary to do it if you are working with a custom configuration.
In edit mode, you need to select the option “Target” and then the brand and activity that we configured above.
For each component you want to show personalized data for, you’ll need to first select the option Target.
After that, you can configure the component for each audience belonging to the brand and activity that you have chosen above. In addition, you can configure a default case for each user that doesn’t belong to any of the other audiences.
For this example, I’m using an Image component to show different images for each audience.
In the above image, you can see that I have configured the component for the default case.
In the above image, you can see that I have configured the component for the Management audience.
After doing this, you can configure again, if needed, the audiences and the experience names.
Finally, you can configure the duration of the targeting. By default, it will start when activated and end when deactivated. But you also have an option for setting a period.
Conclusion
As you can see, this feature is very powerful and useful but requires a lot of configuration. Hopefully, most of the configuration can be done and versioned by Development team so that, from an author’s perspective, they will only need to do the targeting section of this article. We tried this approach in a past projects and the clients found this very intuitive to use and were very satisfied with the solution.
Another important aspect to mention is the ability of this feature to be used in conjunction with other Adobe products – such as Campaign and Target. For example, you can use Adobe Target as the targeting engine for the activities (instead of ContextHub).
No comments:
Post a Comment
If you have any doubts or questions, please let us know.