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:
<div class="mboxDefault">
<!-- default content goes here -->
</div>
<script>
mboxCreate("my_mbox");
</script>
Adobe CQ has made the mbox creation process even easier by adding it all into one component, called mbox. The mbox component is essentially a parsys wrapped in a 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's 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 a mbox. The iparsys iterates through its components and creates them for children's pages. When it hits a mbox with child components, it severs that relationship and makes the siblings. For example:
<div class="mboxDefault">
<!-- default content goes here -->
</div>
<script>
mboxCreate("my_mbox");
</script>
Adobe CQ has made the mbox creation process even easier by adding it all into one component, called mbox. The mbox component is essentially a parsys wrapped in a 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's 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 a mbox. The iparsys iterates through its components and creates them for children's pages. When it hits a 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:
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:
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.
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.
No comments:
Post a Comment
If you have any doubts or questions, please let us know.