Use Quiz Events API for Tracking and Automation

Your quiz announces what happens as browser events on window. Listen to them to track behaviour in your analytics, react to answers, or run your own code at the right moment.

window.addEventListener('ll-quiz-step-view', (event) => {
  console.log('Visitor is on step', event.detail.stepName);
});

Every event puts its data in event.detail. Two things are always there:

quizId: which quiz fired the event
llQuizApi: the Quiz API, so you can read or change the quiz right in the listener

ll-quiz-init fires as soon as the quiz is ready, which can be before your script runs. Do not worry about it: a listener registered late still receives ll-quiz-init. All other events fire on visitor actions, after your script is in place.

Events at a glance

Event	Fires when	Useful data
`ll-quiz-init`	The quiz is ready	`llQuizApi`
`ll-quiz-step-view`	A step is shown	`stepName`, `fields`
`ll-quiz-step-leave`	The visitor leaves a step	`stepName`
`ll-quiz-value-change`	An answer is committed	`blockName`, `value`, `previousValue`, `source`
`ll-quiz-input-click`	A choice option is clicked	`blockName`, `optionLabel`, `optionValue`
`ll-quiz-button-click`	A button is clicked	`blockName`
`ll-quiz-validation-error`	Leaving a step was blocked	`errors`, `source`
`ll-quiz-google-address-select`	An address is picked	`address`
`ll-quiz-submit`	The quiz was submitted	`fields`, `fieldsSimple`, `response`
`ll-quiz-exit`	The tab is closed

ll-quiz-init

Fires once the quiz is on the page and ready. This is where you grab llQuizApi, prefill values, or set things up.

string

LlQuizApi

The Quiz API for this quiz

window.addEventListener('ll-quiz-init', (event) => {
  const quiz = event.detail.llQuizApi;
  quiz.getBlock('source').setValue('landing-page-a');
});

ll-quiz-step-view

Fires every time a step is shown, including the first one on load and when the visitor goes back.

string

Field[]

Answers given so far, see fields and fieldsSimple

object

The same answers as label → value

window.addEventListener('ll-quiz-step-view', (event) => {
  const { stepName, quizId } = event.detail;
  window.dataLayer?.push({ event: 'quiz_step', quiz: quizId, step: stepName });
});

ll-quiz-step-leave

Fires when the visitor navigates away from a step, before the next ll-quiz-step-view. Use it to measure how long a step took or to save a draft.

string

let shownAt = Date.now();

window.addEventListener('ll-quiz-step-view', () => {
  shownAt = Date.now();
});

window.addEventListener('ll-quiz-step-leave', (event) => {
  const seconds = Math.round((Date.now() - shownAt) / 1000);
  window.dataLayer?.push({ event: 'quiz_step_time', step: event.detail.stepName, seconds });
});

ll-quiz-value-change

Fires when an answer is committed. Typed fields (text, email, phone, number, textarea, date, birth date, zip code, address, OTP) commit when the visitor leaves the field or the step, so you get one event per answer, not one per keystroke. Every other input, and every value set through the API, commits immediately.

string

The block’s name from the builder

string

For example text-field or multiple-choice

string

The new answer, in the same format as Field.value

string

The answer reported last time, or the value the quiz loaded with

'user' | 'api' | 'system'

user: the visitor. api: your script through the Quiz API. system: the quiz itself, for example clearing answers after submit

Nothing fires when the value did not change. Values already present when the quiz loads (defaults, URL parameters, restored answers) are the starting point and do not fire; they are in fields on ll-quiz-step-view.

window.addEventListener('ll-quiz-value-change', (event) => {
  const { blockName, value, source } = event.detail;
  if (source !== 'user') return; // ignore scripted and automatic changes

  window.dataLayer?.push({ event: 'quiz_answer', field: blockName, value });
});

ll-quiz-input-click

Fires when the visitor clicks an option of a multiple choice or image choice block. Fires before ll-quiz-value-change for the same click.

string

The option’s value, as stored in the answer

string

The text the visitor saw

window.addEventListener('ll-quiz-input-click', (event) => {
  const { blockName, optionLabel, optionValue, llQuizApi } = event.detail;

  window.dataLayer?.push({ event: 'quiz_option', field: blockName, option: optionLabel });

  // Show a hint under the plan picker for one option
  if (blockName === 'plan') {
    const hint = llQuizApi.getBlock('planHint');
    optionValue === 'enterprise' ? hint.visibility.show() : hint.visibility.hide();
  }
});

ll-quiz-button-click

Fires when a Continue, Previous, Submit or Button block is clicked, before any validation. It fires even when the click ends up blocked, so it counts attempts, not successes.

string

window.addEventListener('ll-quiz-button-click', (event) => {
  const { blockName, stepName } = event.detail;
  window.dataLayer?.push({ event: 'quiz_button', step: stepName, button: blockName });
});

To know whether the click actually moved the visitor on, pair it with ll-quiz-step-leave (it did) or ll-quiz-validation-error (it did not).

ll-quiz-validation-error

Fires when an attempt to leave a step was blocked because something on it is invalid. You get one event per attempt, after all checks finished (including the server checks of email, phone and OTP fields), listing exactly the errors the visitor sees. Hidden blocks are never included.

string

'user' | 'api' | 'system'

user: a button or a navigating option. api: your script (validateStep(), goNext(), goToStep(), submit()). system: the quiz tried to advance on its own (loader, countdown, payment)

string

The button or option that started it; empty for api

string

Empty for api

array

One entry per failing block, in step order: blockId, blockName, blockType, and messages (the texts shown; the first one is displayed)

It does not fire when the step is valid, when the Previous button is used (it never validates), or for a choice click that does not navigate.

window.addEventListener('ll-quiz-validation-error', (event) => {
  const { stepName, errors, llQuizApi } = event.detail;

  // Find out which fields stop visitors
  window.dataLayer?.push({ event: 'quiz_blocked', step: stepName, fields: errors.map((e) => e.blockName) });

  // And help them: move the cursor to the first one
  llQuizApi.getBlock(errors[0].blockId).focus();
});

ll-quiz-google-address-select

Fires when the visitor picks a suggestion in a Google Address block.

string

object

street, city, state, stateShort, postalCode, country, countryShort

window.addEventListener('ll-quiz-google-address-select', (event) => {
  const { address, llQuizApi } = event.detail;
  llQuizApi.getBlock('city').setValue(address.city);
});

ll-quiz-submit

Fires when the quiz was submitted, after the lead was saved. This is the place to send answers elsewhere or fire a conversion.

string

The step the visitor submitted from

string

Field[]

All answers

object

All answers as label → value

any

What the LanderLab server answered, or null when no lead was saved (for example lead saving is off in the quiz settings)

window.addEventListener('ll-quiz-submit', (event) => {
  fetch('https://example.com/leads', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(event.detail.fieldsSimple),
  });
});

ll-quiz-exit

Fires when the tab or window is closed or navigated away from, based on the browser’s pagehide event.

Browsers do not guarantee this event on every close. Use it for best-effort tracking with navigator.sendBeacon, never for anything that must happen.

window.addEventListener('ll-quiz-exit', (event) => {
  const { llQuizApi } = event.detail;
  if (llQuizApi.getInfo().isSubmitted) return; // finished visits are not abandonments

  const { name } = llQuizApi.getCurrentStep();
  navigator.sendBeacon('https://example.com/abandoned', JSON.stringify({ lastStep: name }));
});

fields and fieldsSimple

fields is a list with one entry per answered block:

[
  { id: 'firstName', label: 'First name', value: 'Ada', key: 'firstName', stepId: 'step-…', stepName: 'contact' },
  { id: 'plan', label: 'Plan', value: 'pro', key: 'plan', stepId: 'step-…', stepName: 'plan' },
]

fieldsSimple is the same information as one object keyed by label, handy for forwarding:

{ 'First name': 'Ada', 'Plan': 'pro' }

Both leave out hidden blocks and empty answers. If two blocks share a label, fieldsSimple joins their values with a comma. The Quiz API returns the same shapes from getAnswers() and getAnswersSimple().

Getting started

Landing Pages

Visual Editor (Canvas)

AI

Quizzes (Funnels)

Workflows

Lead Managment

Domain

Multi User

Testing and Reporting

Global Blocks

Integrations

Profile

Use Quiz Events API for Tracking and Automation

Events at a glance

ll-quiz-init

ll-quiz-step-view

ll-quiz-step-leave

ll-quiz-value-change

ll-quiz-input-click

ll-quiz-button-click

ll-quiz-validation-error

ll-quiz-google-address-select

ll-quiz-submit

ll-quiz-exit

fields and fieldsSimple

​Events at a glance

​ll-quiz-init

​ll-quiz-step-view

​ll-quiz-step-leave

​ll-quiz-value-change

​ll-quiz-input-click

​ll-quiz-button-click

​ll-quiz-validation-error

​ll-quiz-google-address-select

​ll-quiz-submit

​ll-quiz-exit

​fields and fieldsSimple

Events at a glance

ll-quiz-init

ll-quiz-step-view

ll-quiz-step-leave

ll-quiz-value-change

ll-quiz-input-click

ll-quiz-button-click

ll-quiz-validation-error

ll-quiz-google-address-select

ll-quiz-submit

ll-quiz-exit

fields and fieldsSimple