Skip to content

Instantly share code, notes, and snippets.

@rystraum
Last active May 26, 2017 03:11
Show Gist options
  • Save rystraum/d8fcca0bd2987111b9f54edc9e6cf61e to your computer and use it in GitHub Desktop.
Save rystraum/d8fcca0bd2987111b9f54edc9e6cf61e to your computer and use it in GitHub Desktop.

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:

  1. Load the component
  2. The first time an <Mbox></Mbox> component is encountered, send an AJAX request to Adobe which retrieves the Offer.
  3. While sending off the AJAX request, display children of as default.
  4. 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>
  1. Page Load: <span>Hello world</span>
  2. During AJAX: <span>Hello world</span>
  3. If resolved to Experience A: Hi world
  4. 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment