To embed m2m session to a web page, you need to load our recorder library.

That’s a script and a stylesheet:

<link rel="stylesheet" href="https://workbench.mercuryanalytics.com/api/recorder.css">
<script src="https://workbench.mercuryanalytics.com/api/recorder.js"></script>

Then, you need to tell it where on the page to put the video.

<div data-hg-recorder="2160_PO_DEMO" data-hg-rid="000000"></div>

The “2160_PO_DEMO” is the unique id we give you for each video to be tested within a project, which changes with each project, and the “000000” should be replaced with the unique respondent id you assigned.

It’s safe to add the stylesheet and script to your survey’s template, since it does nothing when there’s no marker div to tell it where to put the video.

Options

• Instructional Video: If you want to show our instructional video, it’s set up the exact same way, but you pass the value “!instructions” instead of the respondent id.
• Slider Animation: If you want to show just an animated slider, do the same, but you pass the value “!animation” instead of the respondent id.
• Finalize data: Respondents are normally not marked as “complete” by the M2M process, under the assumption that there are potentially more questions being asked by the survey. Adding data-hg-finalize="true" to the marker div will cause the respondent to marked as “completed” in the workbench.

Sizing the recorder

Controlling the size of the recorder can be a little bit complicated. By default, the recorder will attempt to size itself to be the full width of the browser window. If this results in a height that is too tall, it will shrink the video to fit in the window while preserving its aspect ratio.

You can adjust this behavior by setting an attribute called data-hg-scale. This parameter is passed as a percentage (e.g., data-hg-scale="80" for 80%), and indicates that the recorder should be sized to that percentage of the browser width (again, shrinking if this would not fit vertically).

By coordinating with our project team, you can choose to opt out of this behavior in favor of a “natural” sizing strategy. After requesting to opt-out of the default sizing, when you don’t pass the scale parameter, the recorder will size itself based on the page’s stylesheet, and the size can be directly adjusted in CSS. Customers who are comfortable with using CSS-based page layout may find this sizing more intuitive.

In this natural-sizing mode, the recorder sizes itself to the margins and adjusts its height to maintain the original aspect ratio of the presented video.

Events

• mercury:complete: The div will fire a JavaScript event to signal when the video is done. The event type is mercury:complete. You can initially hide or disable your survey’s “Next” button and enable/reveal it when the event is fired, or else you can simply use the event to submit the form.
• mercury:abandon: The instructional video can fire a mercury:abandon event. This happens when the user reports that they’re having audio problems and are unable to resolve them. You should use this event to provide some appropriate response (typically terminating them).
• mercury:hotbutton: The div will fire this event to signal that the user has clicked a hotbutton. The detail property has a button property indicating which button has been clicked (0 for a “negative” button, 1 for a “positive” button).

Examining response data

The mercury:complete event includes a detail property that contains the following structure:

{
  response: {
    data: {
      sampleData: number[],
      clickData?: {
        button: number,
        time: number
      }[],
      samples: string,
      clicks?: string
    }
  }
}

• The sampleData field has a number for every quarter second of the video indicating the respondent’s rating for that time.
• The clickData field has the time and button number for each click.
• The samples field containes a compressed encoding of the sample data.
• The clicks field contains a compressed encoding of the click data.

Sending Demographic Variables

Demographic variables can be sent directly during the M2M excercise, or sent at a later point in the survey.

This page details sending demographics only later in the survey, but the marker div tag for the M2M video can also accept the data-hg-demographics property to reference a set of demographic values as described on that page, and will send the data as part of the exercise.