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.

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('Event name', lp_context, 'widgetId');

​On-site messaging (OSM)

​Track event

​Track click

​Track dismiss

​Dismiss message

​Landing page

​Track click

​Track form submit

​Track event

On-site messaging (OSM)

Track event

Track click

Track dismiss

Dismiss message

Landing page

Track click

Track form submit

Track event