Adobe CQ5 Integration with Test&Target (now Adobe Target)

Test&Target is a system that allows you to dynamically modify existing content on your website or change it out for other content. It provides the ability to do A/B testing or create personalized content based on users of the site. But what do you need to do to use it on your Adobe CQ website? Below are some instructions to help you implement this correctly on a site that uses the Adobe CQ 5.5 platform.

First, you’ll need to set up your Adobe Target configuration in AEM Cloud Services. This configuration allows you to hook into the Adobe Target service and begin to use mboxes. Mboxes are nothing more than a container with a class name on it, followed by a piece of JavaScript to initialize it. For example:

Adobe CQ has made the mbox creation process even easier by adding it all into one component, called mbox. The mbox component is essentailly a parsys wrapped in an mbox div. You want to add this component on the site (from the Personalization component group, inside a regular parsys, where you want to swap data in and out. Inside the mbox you would add the component that you wanted to be able to control. So the structure would look like this: [Parsys[mbox[component]]]. The idea is that the mbox wraps around the component, allowing you to modify the content contained within.

Most often the integration is simple and basic, but there are times when customization is needed because of the site functionality. For example, if you decide to share data from a parent page (such as an ad) onto children pages, the simple method will not work. The typical solution for this problem is to use an iparsys. However, the way that an iparsys parses through its contained content breaks when it hits an mbox. The iparsys iterates through its components and creates them for children pages. When it hits an mbox with child components, it severs that relationship and makes the siblings. For example:

iparsys_start
component1
mbox_start
component2
mbox_end
iparsys_end

On child pages, you want to retain the same structure, but instead, this is what happens:

iparsys_start
component1
mbox_start
mbox_end
component2
iparsys_end

Here at Axis41, what we ended up seeing was component2 showing as well as the mbox content that was generated from Adobe Target. The way this was set up, Adobe Target should be replacing component2.

To overcome this problem, we decided to set up a blank template with a regular parsys inside it. We created a page using the new template, and added the mbox component and default content to the parsys:

parsys_start
mbox_start
component (default content)
mbox_end
parsys_end

In the reference component, we pointed to the parsys on the new page we created. This made it so the iparsys no longer had to iterate over mboxes, thus keeping the parent-child relationship of mboxes intact.

Adobe’s CQ

documentation website has additional info on how to set up Test&Target (now Adobe Target) in Adobe CQ 5.5.