AEM Podcast: Adobe CQ5 Integration with Adobe Test&Target (now Adobe Target)

AEM Podcast: Adobe CQ5 Integration with Adobe Test&Target (now Adobe Target)

Adobe Test&Target (now Adobe Target) is a product that Adobe puts out to help personalize/modify existing content on your site depending on the user viewing it. Axis41 AEM Developer Ken Woodward joins the Adobe Experience Manager Podcast to talk about how to properly set up Test&Target on an Adobe CQ 5.5 site, some trouble he ran in to while doing it, and the work-around he found as a solution. Ken has also published a blog post where he goes into more detail about his Test&Target integration.

Music Intro: Code Monkey by Jonathan Coulton


Announcer: Welcome to the Adobe Experience Manager Podcast, a weekly discussion regarding Adobe Experience Manager (formally CQ) and other marketing and technical issues. This podcast is presented by Axis41, your partner in Adobe Experience Manger implementations. Your hosts for the podcast are Joey Smith and Peter Nash.

Good afternoon and welcome to the Adobe Experience Manager podcast. Joining us today for the podcast is one of our AEM experts Ken Woodward. Ken has been a software developer for the last six years. He is fluent using JAVA, PHP, JAVA script, HTML, and CSS.

Specifically, he has been working with AEM for the last two years and has been a part of 15 individual Adobe Experience Manager implementations. And in general he is an all-round good guy, so Ken, welcome to the Podcast.

Joey: Ken as we get ready to talk today, we wanted to talk a little bit about Test and Target, which is part of the Adobe Marketing Cloud and suite. Can you start off by quickly just telling us what Test and Target is?

Ken Woodward: Yeah, Adobe Test And Target is a tool for helping you swap or dynamically swap content out of your site, for example, you have an image and you want to swap it on the fly. You want to target it to a specific user, say a girl. You want to show something more specific like clothes or something that they like. So what you do is you have your default image, it’s already showing there and then when that page loads and some JAVA scripts runs it says “hey, I want to switch this image out” and it dynamically does that automatically. So, it’s great for A/B testing. It’s great for having dynamic content, targeted to your specific users.

Joey: Okay, so can you walk us through how would you do a really simple or fundamental basic implementation of Adobe Test and Target?

Ken Woodward: In CQ (Adobe Experience Manager), right?

Joey: Yes.

Ken Woodward: The first thing you want to do is set up your configuration, you do that in the cloud services within Adobe Experience Manager. All you are doing there is setting up your information and you will need an Adobe Target account. Just go and set that information up which I think is just a user name and password and that’s gets you set up. What that actually does is allows you to load in the JAVA script that Target uses.

Secondly, go to your page that you want Adobe Test and Target on. And one thing I failed to mention earlier was your page properties, if you go to your page properties from the sidekick there, you can select your cloud services that are being implemented on that page.

Joey: Okay, so different pages could implement different pieces of cloud services?

Ken Woodward: Right, you don’t need it on every page, it just depends on what you are trying to do.

Joey: Okay.

Ken Woodward: From there, there is a dropdown menu and select the service you want. In this case we select Test and Target. After that, your page is ready to go, your page needs a parses on it, and within the parses you just want to drag an M-box component into the parses. The M-box component is the meat of Adobe Test and Target for your page.

Within this component, you have some settings. The main one you need to worry about is the name. You just give your M-box name, it really doesn’t matter what it is. But this is what going to allow you to see your M-box on the Test and Target side of things.

Joey: Okay, so this is the symbolic name to correlate the two sides?

Ken Woodward: Right, right. Then your M-Box acts as an additional parses. So now you got pretty much parses within parses that your M-Box is. Anything you put inside the M-box is your default content. You can put whatever you want there, text, images, ads whatever it maybe and this is what we are showing your page when Test and Target isn’t replacing it.

Joey: Okay, so that’s the default view.

Kew Woodward: Right, from the Adobe Test and Target side, now that you have a name that you are going to see. So, let’s say you gave an image a name and say like “image one.” You’ll see that within Test and Target and then you can just paste, or cut and paste, or type some HTML in there.

Joey: Okay.

Kew Woodward: And once that page loads it’s going to see the Adobe Test and Target has content that you want to replace, use to replace the image with and it just loads it in, it replaces your default content.

Peter: So, I remember when we worked on we ran in some issues that prevented us from doing a simple implementation. What was going on with the site that made it so we couldn’t do that?

Ken Woodward: Okay, this might be typical for a lot of sites. You’ve got a parent page. So, in our cause we had a homepage and we have ads at the top. We want all those ads to trickle down to the children. So we don’t have to go through every page and replace and add if you want to swap it out. So you want all of the children to inherit from it.

Problem is we are using I-parses to do that and I-Parses is an inherited parses anything we drag into that gets inherited by children pages. So you know it’s a great solution. The problem was when we tried to implement Test and Target we had some issues with the I-parses. So imagine this, we have parses and then within that parses this is where the ads slot is, let’s say, the top left ad.

Within the parses, we drag our M-box into our M-box component. Within our M-box component, we drag the teaser into it, teaser component. So now we’ve got an M-box with a child. Parent/child relationship here.

What happens, is the I-parses when it loads and tries to load the content within it. It destroys the relationship of the parent child.

Joey: Okay.

Ken Woodard: So what happens is that teaser got pulled out of the M-box. So the teaser and the M-box became siblings, and when we load the page we would see the M-box being replaced by whatever Adobe Test and Target was showing, and then we would see the teaser right below it. So, we would see double content, two adds where there is only supposed to be one.

So, to fix that problem what we had to do was, first look at the reference component, a reference component just allows to refer to an M-Box or another component or another page or whatever you want. So we decide to use that in I-parses instead.

Joey: Okay.

Ken Woodard: And then we wanted to refer to a page that had these ads on it. So, we went and created blank pages, just a blank template with the parses in it, nothing else. Within that parses we dragged our M-box, we dragged our teaser and set all that up and it was good to go. And then our reference component we just referred to that page. And this fixed the problem because now when the I Parses loads, it does not have to iterate through a parent child relationship that an M-box has started, an M-box/teaser instead it just looks at the reference component.

Joey: Okay.

Ken Woodard: And there is no additional things to do there, so that fixed it.

Jeoy: Okay well that is Adobe Test and Target and how you implement it with CQ (Adobe Experience Manager). Ken, thank you for your time and we hope to have you back on soon.

Peter: Yeah, if you guys have any questions regarding this particular topic, we have a blog post with an actual set of instructions of how to use Adobe Test and Target. Ken gives us some example code and some ways that you can actually go about setting it up. So if you are looking for a little bit more specific information you will be able to find it here.

Announcer: You’ve been listening to the Adobe Experience Manager Podcast, brought to you by Axis41, your premier partner in Adobe Experience Manger implementations. If you have questions, comments, or a subject you’d like us to cover, send an email to