On-Site Messaging (OSM) campaigns and Landing Page support a JavaScript bridge interface that allows your web templates to interact with the MoEngage SDK.
The bridges contain a set of APIs that can be accessed using the global variables MoeOSM for On-Site Messaging and Moengage.landingPages for Landing Pages.
The below tables list all the JS Bridge methods available for OSM and Landing Pages, and in the subsequent sections, each API is explained 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) | Use this method to track a custom event from the OSM template. "eventName" : Name of the tracked event "eventAttr" : Event attributes that will be tracked along with the event |
| MoeOSM.trackClick(widgetId) | Use this method to track clicks for campaign performance measurement. "widgetId" : Identifier of the widget being clicked. Helpful when multiple CTAs are present in a single template |
| MoeOSM.trackDismiss() | Use this method to track dismiss stats for campaign performance measurement. |
| MoeOSM.dismissMessage() | Attach this method on your template for closing the OSM message on button click or any other click. |
| info | JS Methods for OSM Integrate 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>) | This bridge is used to track clicks on the Landing page. All the elements with a valid href will have this click tracking added by default. |
| Moengage.landingPages.trackFormSubmit(lp_context, <attribute_object>) | This event also gets tracked by default whenever any Form element is present in the Landing page. |
| Moengage.landingPages.trackEvent(<event_name>, lp_context, <event_attributes>) | Used to track a custom event from the Landing page. |
| info | JS Methods for Landing Pages Integrate 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.
| info | Note All elements with a valid |
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.
| info | Note This event gets tracked by default whenever any Form element is present in 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');