How to Use Adobe Target Regional Mboxes in the VEC

Anyone who has used Adobe Target will be familiar with this screen. The first decision you make for a new A/B test or Experience Targeting activity is the type of composer to use, either the Visual Experience Composer (VEC) or the Form Composer.

The VEC allows a marketer to make changes and implement tests in a WYSIWYG editor without the need for a website code deployment. It’s used by pretty much everyone who has a client-side web implementation of Target. Normally any modifications you make using the VEC are delivered to the page using the global mbox which applies changes to specific CSS selectors.

But what if you also have regional mboxes for specific marketing or messaging areas? Well, here’s a quick trick I’ve never seen anyone else mention to “enable” these in the VEC if you find your regional mboxes are missing:

To make a region of the page appear as a regional mbox in the VEC, add a class in the following format: “mbox-name-[name_of_mbox]”

Yep. That’s all there is to it.

The example below shows what this looks like for three regional mboxes: homepage-secondary-1, 2, and 3.

I used the word “enable” in quotes for a reason. What this trick actually does is simply allows the VEC to highlight specific regions of the page as regional mboxes with the overlay toggle. Any elements with a class starting with “mbox-name-“ are considered regional mboxes for the purposes of VEC overlay.

Once these classes are added, the VEC will allow you to select these regions of the page to make mbox modifications. The VEC automatically converts the class names into the appropriate mbox names.

It’s important to note that the regional mbox overlay and the actual selectors where offers are applied are completely independent. You can add a class in the “mbox-name-“ format to any element you like on the page and it will appear as a regional mbox in the VEC (go ahead, try it with your browser’s dev tools). However, your actual Target implementation may define the regional mbox around a completely different selector when it executes applyOffer() or applyOffers(). For this reason, you should ensure that the class names are added to the exact same selectors used for your regional mboxes. For example:

Click to Copy

You may be asking yourself a few questions, such as:

• Is this mbox overlay class name trick officially supported?
  Answer: No. Adobe may change how the VEC mbox overlay works at any time without notice. I am sharing this info because I work with a lot of companies that use Target, and it’s not uncommon to want to use both the global editing functions of the VEC and the added structure of regional mboxes at the same time, or even in the same Activity.
• Why does the VEC support overlays for regional mboxes but there’s no documentation around how to make them selectable in the VEC?
  Answer: I honestly don’t know. I suspect this is because regional mboxes for web are an older approach that dates back to early versions of the mbox.js library. Early implementations of Target used mboxDefine(), mboxUpdate(), and mboxCreate(). Regional mboxes that are implemented with this older approach should automatically be recognized by the VEC. Any modern implementation of Target should not be using these older legacy functions. Adobe updates their help documentation on a regular basis, so I would not be surprised if they add additional information on this topic at some point.
• Why is the overlay for regional mboxes independent from the selectors actually used for those mboxes?
  Answer: The VEC loads your site in an editor mode which technically suppresses any Target calls that would have been made on the page. With a modern implementation of Target using at.js, the CSS selectors used for regional mboxes are not defined until applyOffer() or applyOffers() are called. When Target loads the site in editor mode these functions are never executed on the page and thus the VEC has no knowledge of where your regional mboxes may be on the page.
• Why would I want to use regional mboxes in the VEC when I can use the Form Composer?
  Answer: This depends on your organization, workflow, and implementation. However, the ability to use regional mboxes in the VEC is the best of both worlds: WYSIWYG editing plus guardrails for pre-defined marketing spaces. The ability to actually see what an offer looks like in the VEC while serving that offer through a regional mbox makes this trick worthwhile. It also means you won’t have to deal with finding the right selector for replacing something as simple as a hero banner if you have a regional mbox for that space.
• How is this any different from the Mbox modification type in the VEC?
  Answer: It is possible to manually add an mbox modification in the VEC. However, this mbox modification type is limited to freeform HTML, CSS, and JS and it does NOT allow you to select an HTML offer or AEM Experience Fragment. I have no idea why Target does not allow offers to be selectable with this modification type. Regional mboxes are most useful when you have an offer inventory with offers designed for specific locations.

I hope this trick was helpful to Target newcomers and power users alike. In another post we will outline in detail why regional mboxes are still very useful in certain scenarios.

TL;DR

• Adding a class in the format “mbox-name-[name_of_mbox]” allows the VEC to recognize that region as a regional mbox.
• If you use this trick, make sure the class is added to the exact same selector used for your applyOffer() or applyOffers() calls.