Explore — Events

Run your own code when Explore loads its questions and when the reader picks one.

The Explore workflow emits an event at each step. Below we listen to one, list the events a page load goes through, and then look at the data event, which tracks the response itself.

You need a working Explore page first. See Explore — Quick Start.

Listen to an event

Call on on the workflow with the event name and a function. Add the listener before start(), so it catches the first events:

const off = client.ui.explore.on("done", () => {
  console.log("Questions shown");
});

on returns a function. Call it to remove the listener:

off();

The lifecycle events and data also reach client.ui.explores, the context, with the workflow that emitted them in workflow. Use the context for a page with more than one Explore unit. select reaches the workflow only.

Lifecycle events

start() sends the request, and the events follow in this order. Each one fires at most once:

The request always ends with one of done, interrupt and error, and then with finally. Explore shows all its questions at once, so ready and done come together. Listen to either one.

Apart from request, these events carry:

Select event

select fires when the reader clicks a related question, before the SDK follows the link:

client.ui.explore.on("select", ({ question }) => {
  console.log("Question picked", question.text);
});

question.text is the question. The SDK then sends the reader on through your useLink function.

The SDK reports the click to Miso by itself. Listen to this event only to send it somewhere else as well, such as to Google Analytics 4.

A question that the reader types in the search box goes to the answers page with no select event.

The data event

data fires each time the data of the workflow changes: when the workflow starts, when the request goes out, and when the response arrives.

client.ui.explore.on("data", ({ status, value }) => {
  if (status !== "ready") {
    return;
  }
  console.log(value.related_questions.length, "questions");
});

The event carries the data object:

Each item in value.related_questions is an object with text and url. The SDK turns the strings in the response into these objects before anything else reads them.

For one request, data fires in this order:

1. status: "initial" when the workflow starts, with no request yet.
2. status: "loading" when the request goes out.
3. status: "ready" when the response arrives.

If the request fails, the last one has status: "erroneous" instead.

The event shows the data after each data processor has run, so a field you changed there arrives changed here. The event cannot change the data. To change what Explore shows, use useDataProcessor.

If it does not work

Next

• API Configuration — change the request and the response.
• Explore — Google Analytics 4 — send the pick to GA4.
• Ask — Events — the events on the answers page.