React MoEngage

A convenient wrapper around the MoEngage Web SDK for React.

Install

npm install --save react-moengage

Usage

import MoEngage from "react-moengage"

MoEngage.init("MOENGAGE_APP_ID", {
    debugLogs: 0,
    swPath: "/customSw.js",
})

MoEngage.trackEvent("PurchaseMade", { ...data })

Methods

All methods are camel-cased versions of those specified in the MoEngage SDK documentation.

MoEngage.trackEvent("PurchaseMade", { value: 0.5 })

MoEngage.addFirstName("Dominick")
MoEngage.addLastName("Cobb")
MoEngage.addEmail("[e-mail]")
MoEngage.addMobile("[phone]")

Moengage.addUserAttribute("replenishment_date", new Date(2021, 4, 30))

The moe object is also accessible directly if need-be:

const moe = MoEngage.moe

moe.onsite.registerCallback(...args)
moe.onsite.getData(...args)

Environment

By default debugLogs is set to 1 (test mode).

As in the MoEngage SDK documentation, set debugLogs to 0 in order to push data to your LIVE environment. Set it to 1 in order to push data to your TEST environment & enable logging to the console.

Server-Side Rendering

Please note in order to initialise this library, the MoEngage SDK relies on the window object and therefore will only work in the browser. If server-side rendering, it is recommended to call init() in somewhere like componentDidMount() or useEffect(..., []).

import MoEngage from "react-moengage"

class MyComponent extends React.Component {
    componentDidMount() {
        const options = { ... }
        MoEngage.init("MOENGAGE_APP_ID", options)
    }
}