Terminologies:
- Mbox - referenced as "Location" in Target's web interface. You can think of this as the div that will house the Experience's Offer.
- Offer - the actual content that will go in an Mbox. This can be plain text, HTML or Javascript.
mbox.js
does an JS.append of the entire content.at.js
insertion is based on how React does the insertion upon render.
Notes:
- Use
at.js
if using this under React.
As far as I can tell, Target's AB testing model (using React) is as follows:
- Load the component
- The first time an
<Mbox></Mbox>
component is encountered, send an AJAX request to Adobe which retrieves the Offer. - While sending off the AJAX request, display children of as default.
- When Offer returns, replace children inside with whatever offer returned.
Given the following component & experiences:
React Component: <Mbox><span>Hello world</span></Mbox>
Experience A: Hi world
Experience B: <script type="text/javascript">alert('hello world');</script>
- Page Load:
<span>Hello world</span>
- During AJAX:
<span>Hello world</span>
- If resolved to Experience A:
Hi world
- If resolved to Experience B: `` (but will display an alert message)
Thoughts:
- We have to add in code that will reside in Target's system, so we have to make sure that this is just a simple flag. We want to keep the logic entirely in our codebase.
Questions:
- Not entirely sure how the "Success Location" actually influences the conversion statistics.