How to Track Custom Events with JavaScript?

Nelio A/B Testing includes many built-in conversion actions, such as page views, clicks, form submissions, purchases, and video playback.

If none of the built-in actions fit your needs, you can use a JavaScript Snippet conversion action to trigger conversions programmatically.

This is particularly useful when integrating with third-party services or custom JavaScript code.

Typical use cases include:

• third-party form providers;
• custom checkout flows;
• interactive widgets;
• JavaScript applications; or
• any event that’s not automatically detected by Nelio A/B Testing.

How It Works

A JavaScript Snippet conversion action listens for a browser event.

When that event occurs, you simply call the convert() function to record a conversion.

The workflow consists of two steps:

1. Trigger a custom browser event when the action you’re interested in occurs.
2. Configure your conversion action to listen for that event.

Step 1: Dispatch a Custom Event

Whenever your application detects the desired action, dispatch a browser CustomEvent.

For example:

window.dispatchEvent(
  new CustomEvent('my-custom-event')
);Code language: JavaScript (javascript)

Choose a descriptive event name that’s unlikely to conflict with other scripts running on your website.

Step 2: Listen for the Event

Create a JavaScript Snippet conversion action and listen for the event.

When it’s triggered, call convert().

window.addEventListener('my-custom-event', () => {
  convert();
});Code language: JavaScript (javascript)

Every time the event is dispatched, Nelio A/B Testing records a conversion.

Example: Tracking a Marketo Form Submission

Marketo Forms 2.0 provides a Form object with an onSuccess() method that lets you run custom JavaScript after a form has been successfully submitted and before the visitor is redirected to the configured follow-up page.

This makes it a good place to dispatch a custom browser event that Nelio A/B Testing can listen for.

For example:

form.onSuccess( ( values, followUpUrl ) => {
	// Your existing form submission logic, if any.
	window.dispatchEvent(
		new CustomEvent( 'marketo-form/your-form-id/submit' )
	);
} );Code language: JavaScript (javascript)

Use an event name that uniquely identifies the form or action you’re tracking.

Then create a JavaScript Snippet conversion action in your Nelio A/B Testing goal and listen for that event:

window.addEventListener(
	'marketo-form/your-form-id/submit',
	() => {
		convert();
	}
);Code language: JavaScript (javascript)

Whenever Marketo confirms that the form was successfully submitted, the custom event is dispatched and Nelio A/B Testing records the corresponding conversion.

⚠️ Note: If you already use onSuccess() for other logic, keep that logic in the same callback and simply dispatch the custom event alongside it. Marketo also lets an onSuccess() callback prevent the normal follow-up-page redirect by returning false, so take care not to change the callback’s existing return behavior when adding Nelio tracking.

Tips

• Use descriptive event names, such as newsletter/signup, checkout/completed, or demo/requested.
• Trigger the event only after the desired action has actually completed.
• If several actions should count as conversions, dispatch different events and create separate conversion actions for each one.