JavaScript Bridge for On-Site Messaging and Landing Pages

On-Site Messaging (OSM) campaigns and Landing Pages support a JavaScript bridge interface that lets your web templates interact with the MoEngage SDK. The bridges contain a set of APIs that you can access using the global variables MoeOsm for on-site messaging and Moengage.landingPages for landing pages. The following sections list all the JS bridge methods available for OSM and landing pages, and explain each API in detail.

On-site messaging (OSM)

The following table lists all the JS bridge methods available for on-site messaging campaigns.

Method name	Description
`MoeOsm.trackEvent(eventName, eventAttr)`	Tracks a custom event from the OSM template. `eventName` is the name of the tracked event. `eventAttr` is the event attributes tracked along with the event.
`MoeOsm.trackClick(widgetId)`	Tracks clicks for campaign performance measurement. `widgetId` is the identifier of the widget being clicked. Helpful when multiple CTAs are present in a single template.
`MoeOsm.trackDismiss()`	Tracks dismiss stats for campaign performance measurement.
`MoeOsm.dismissMessage()`	Attach this method on your template to close the OSM message on a button click or any other click.

JS methods for OSMIntegrate the JS methods below with your OSM template to execute on-click actions like message close, and to track data such as events, clicks, and dismissals.

Track event

To track a custom event from your OSM template, use the MoeOsm.trackEvent(eventName, eventAttr) API.

onclick="MoeOsm.trackEvent('add to cart', {price: 300})"

Track click

To track widget click events, use the MoeOsm.trackClick(widgetId) API.

onclick="MoeOsm.trackClick('1')"

Track dismiss

To track dismiss events from your OSM template, use the MoeOsm.trackDismiss() API.

MoeOsm.trackDismiss();

Dismiss message

To dismiss the OSM message on a button click or any other click, use the MoeOsm.dismissMessage() API.

MoeOsm.dismissMessage();

Landing page

The following table lists all the JS bridge methods available for landing pages.

Method name	Description
`Moengage.landingPages.trackClick(lp_context, <widget_id>)`	Tracks clicks on the landing page. All elements with a valid `href` have this click tracking added by default.
`Moengage.landingPages.trackFormSubmit(lp_context, <attribute_object>)`	Tracks form submissions. This event is also tracked by default whenever a form element is present on the landing page.
`Moengage.landingPages.trackEvent(<event_name>, lp_context, <event_attributes>)`	Tracks a custom event from the landing page.

JS methods for landing pagesIntegrate the JS methods below with your landing page template to track clicks on page elements, capture form submissions, and track custom events.

The lp_context Object

lp_context is the landing page context object that MoEngage makes available globally on every landing page. Pass it to the bridge methods as-is, without modifying it or creating it yourself. MoEngage uses this object to enrich each tracked event with the full landing page context, including the moe_lp_formatted_id attribute that campaign statistics use to attribute the event to your landing page.

Always pass the lp_context object as-is. Do not build the context argument yourself, or the event will be missing moe_lp_formatted_id — it still appears on the user profile, but the click is not counted in the landing page campaign statistics.✅ Correct: Moengage.landingPages.trackClick(lp_context, 'Register_Now')❌ Incorrect: Moengage.landingPages.trackClick({id: <landing_page_id>, name: <landing_page_name>}, 'Register_Now')

Track click

To track clicks on elements within your landing page, use the Moengage.landingPages.trackClick(lp_context, <widget_id>) API.

All elements with a valid href attribute have this click tracking added by default.

onclick="Moengage.landingPages.trackClick(lp_context, 'Register_Now')"

Track form submit

To track form submissions on your landing page, use the Moengage.landingPages.trackFormSubmit(lp_context, <attribute_object>) API.

This event is tracked by default whenever a form element is present on the landing page.

const attributeObj = {
  name: document.getElementById("name").value.trim(),
  email: document.getElementById("email").value.trim(),
  mobile: document.getElementById("mobile").value.trim(),
  consent: document.getElementById("consent").checked ? "yes" : "no"
};
Moengage.landingPages.trackFormSubmit(lp_context, attributeObj);

Track event

To track a custom event from your landing page, use the Moengage.landingPages.trackEvent(<event_name>, lp_context, <event_attributes>) API.

Moengage.landingPages.trackEvent('plan_selected', lp_context, {plan: 'premium', price: 499});

​On-site messaging (OSM)

​Track event

​Track click

​Track dismiss

​Dismiss message

​Landing page

​The lp_context Object

​Track click

​Track form submit

​Track event

On-site messaging (OSM)

Track event

Track click

Track dismiss

Dismiss message

Landing page

The lp_context Object

Track click

Track form submit

Track event