To have a web page send data to Mercury’s server, 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>

The page also needs a tag that identifes the question and respondent id:

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

Here, the “2160_PO_DEMO” is the unique id we give you for associating data to the project, and which changes with each project, and the “000000” should be replaced with the unique respondent id you assigned.

The data-hg-mode tells it this is demographics only. The “data-hg-demographics” attribute tells it where to find the demographic data, and it should be the HTML id of a <dl> tag somewhere on the page.

It’s safe to add the stylesheet and script to your survey’s template, since it does nothing when there’s no marker div elsewhere on the page.

Demographic Variables

The <dl> tag might look something like this

<dl id="demographic-data" class="hg-demographic-data">
  <dt>Sex</dt>
  <dd>1/Male</dd>

  <dt data-hg-type="multipunch">Breakfast Cereals</dt>
  <dd>1/Fruit Loops</dd>
  <dd>3/Corn Flakes</dd>
  <dd>6/Cap'n Crunch</dd>

  <dt data-hg-type="text">Breakfast Cereals (other)</dt>
  <dd>That stuff with the Frankenstein monster cartoon</dd>
</dl>

The id attribute has to match the data-hg-demographics attribute on the marker <div>. You can make the “class” anything you like so as to apply some appropriate styles from your stylesheet to the data, but using hg-demographic-data will simply hide it from the page so the panelist won’t see it. I’d suggest you not use hg-demographic-data until everything is working, so you can see exactly what it’s trying to pass, and only add the class in when you’re ready to go into production with it.

Multipunch and Open-Ended Responses

Each variable you want to pass has a <dt>, followed by one or more <dd> tags. The <dt> gives the name of the variable (often just the text of the question). Multipunch categorical variables, like the “Breakfast Cereals” variable above, should use data-hg-type="multipunch", and open-ended (text) questions, like “Breakfast Cereals (other)” above, should use data-hg-type="text". Each response should have its own <dd>.

Categorical Responses

For categorical responses, the value should have two parts, separated by a slash (/). The part before the slash is what we call the “sort indicator”, and the part after is the category label. In our viewer, the categories will be sorted so as to include the sort indicator, but only the label is actually displayed.

Sort Indicators

Please note that the sort indicator is part of the value – so 1/Male is treated as a different category from 2/Male. You should pick a specific sort indicator value for each category – 1/Male and 2/Female – and always use the same sort indicator with a given category (within a single question). If the sort indicators aren’t unique, then the viewer will further sort things by the category label, so if you’re satisfied with everything simply being sorted alphabetically, you can use an empty sort indicator for everything. With this, you’d pass /Male and /Female, and they’d show up in the viewer with Female first.

Options

Events