Mboxes on JavaScript Events

Information to help you trigger mboxes off of JavaScript events.

To trigger mboxes off of JavaScript events, dynamic mboxes can be added to your site using dynamic tag management event-based rules.

For example, you could trigger an mboxUpdate when the user clicks an element, plays a video, changes a form field, or scrolls to a certain part of the page. For single-page applications, you can trigger mboxes off of hashchange or custom events. The out-of-the-box options offer powerful ways to add dynamic mboxes. For more information, see Creating a Dynamic Mbox in the Adobe Recommendations documentation.

To create an event-based mbox:

  1. Navigate to Rules > Event Based Rules.

  2. Click Create New Rule.

    Step Result

  3. Name your rule.

  4. Under Conditions, choose the desired event type.

    There are a large number of out-of-the-box event options. Depending on which type of event you choose, other relevant options appear. For example, if you select a “click” event attached to a standard HTML hyperlink, you can use the Delay option to give extra time for your mbox call to go out before the page unloads. (The delay is 500ms by default and is configurable in the DTM property Advanced Settings).

  5. Under Rule Conditions, specify any other conditions you have for your rule.

    For example, you might want to restrict this rule to specific URLs on your site.

  6. Under JavaScript/Third Party Tags add a new Non-Sequential JavaScript set to Execute Globally.


    “Globally” here does not mean “on every page” like a “global” mbox. Globally here refers specifically to the JavaScript scope of the tag.

  7. In the code box, specify your mboxDefine/mboxUpdate code. You have several options:

    • Update an existing mbox:

    • Turn an existing element within an ID into an mbox:

    • Create a new element and turn it into an mbox (the Target offer contents are delivered into this new element):

      You can also populate dynamic parameters using your dynamic tag management data elements in the code editor. See Using Data Elements

      Additionally, the mboxTrack() plugin can be used in this context. Contact your Target consultant to add this plugin to you mbox.js file. Use mboxTrack when you only need to use the call to trigger a metric or report profile information—it cannot be used to serve content.

On this page