Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

For the Initialization use method, this function should be first in your application :

Code Block
languagejs
Mapp.engage(sdkKey: string, googleProjectId: string, server: string, appID: string, tenantID: string);

const App = () => {
  ...
}

@param {string} sdkID - The SDK ID for your account.
@param {string} googleProjectID - The Google project id from your Firebase console for the chosen app.

Info

googleProjectId - Can be empty String. It is not used, but it is here only for backward compatibility.

@param {string} server - The Server, which will be used for engagement, this info will be provided by account managers.
@param {string} tenantID - The ID which recognizes you at the Mapp Engage system, will be also provided by account managers.

iOS uses most information from AppoxeeCofig.plist as explained in the integration section, so you need to have that plist set up inside iOS project.

Server list:
  •     L3

  • L3_US

  •     EMC

  •     EMC_US

  •     CROC

Check if the plugin is initialized

Code Block
languagejs
const ready = await Mapp.isReady();

Check if the device is registered in Mapp

Code Block
languagejs
const registered = await Mapp.isDeviceRegistered().then(data => {
    //do something with data
    }

Alias

...

;

Alias

Get device alias

Code Block
languagejs
let alias = await Mapp.getAlias();

Set device alias

Code Block
languagejs
Mapp.setAlias(”some alias”)

Device API

Get device info

Code Block
languagejs
let deviceInfo = await Mapp.getDeviceInfo();

Push API

Push Enabled

Check if the feature is enabled.

Code Block
languagejs
let enabled = await Mapp.isPushEnabled();

Push toggle

Disable or enable push.

Code Block
languagejs
await Mapp.getAliassetPushEnabled(false).then(data => {
   ; // disable
await Mapp.setPushEnabled(true); // enable

Request permission to display notification (for Android 13 and higher ONLY)

Code Block
languagejs
let result = await Mapp.requestPostNotificationPermission();
if (result == true) {
  console.log(data'PERMISSION GRANTED');
} else {
   Alertconsole.alertlog(data)'PERMISSION NOT GRANTED');
  });

Set device alias

Code Block
Mapp.setAlias(”some alias”)

Device API

Get device info

Push messages event

Push message events are triggered when a push message is received, opened, dismissed, or when a silent push message is received.
Subscribe/listen for push events:

Code Block
languagejs
Mapp.getDeviceInfo().then(dataaddPushListener(pushMessage => {

     console.log(dataJSON.stringify(pushMessage));
      Alert.alert(data)'Push message   event', JSON.stringify(pushMessage));
});

Push API

Push Enabled

Check if the feature is enabled.For iOS also is an available listener for rich messages:

Code Block
languagejs
 Mapp.isPushEnabledaddRichMessagesListener((notification).then(data => {
            console.log(dataJSON.stringify(notification));
            Alert.alert(dataJSON.toStringstringify(notification))
        })

Push toggle

Disable or enable push.

Code Block
languagejs
Mapp.setPushEnabled(true)

Push notification received

Subscribe/listen for push received events:

Code Block
Mapp.addPushListener((notification) => {
            console.log(JSON.stringify(notification));
            Alert.alert(JSON.stringify(notification))
        });

For iOS also is an available listener for rich messages:

Code Block
Mapp.addRichMessagesListener((notification;

Setup for push message handling from React Native plugin

For a use-cases where clients needs to handle push messages on their own, or when using some additional push service (besides MAPP), then some additional setup needs to be done.

Android setup

Multiple firebase services can not exist in the same aplication, it will rise conflicts and unpredictable behaviour. So, we need to disable default service from Mapp native part.

Open android folder and update the AndroidManifest.xml file:

Code Block
languagexml
<service android:name=".MessageService"
    android:exported="false"
    tools:node="remove">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

After that we disabled the default Mapp service for receiving and handling push messages, we need to provide another service for push messages. This can be done in 2 ways.

Native implementation

We can create in the native part, our service that will extend MessageService, and implement the required functionality.

Code Block
languagejs
public class MyMessageService extends MessageService {

    @Override
    public void onCreate() {
        super.onCreate();
    }
    
    @Override
    public void onMessageReceived(RemoteMessage remoteMessage) {
        if(remoteMessage.getData().containsKey("p")) {
            // handle Mapp push messages
            super.onMessageReceived(remoteMessage);
        }else{
            // handle your own push messages
        }
    }

    @Override
    public void onNewToken(String s) {
        super.onNewToken(s);
		// subscribe on your own service with firebase token
    }
}
Info

Every overridden method must call the super method in order for the underlying plugin works correctly.

React native implementation

For this way of handling push messages, we can use react native plugins:

Code Block
languagenone
# Install & setup the app module
yarn add @react-native-firebase/app

# Install the messaging module
yarn add @react-native-firebase/messaging

For complete instructions on how to use the plugins above and install them, please visit the official documentation: https://rnfirebase.io/messaging/usage

After we have successfully completed the setup of the app and messaging plugins, we only need to forward Mapp’s push messages to the Mapp plugin:

Code Block
languagejs
import FBMessaging from '@react-native-firebase/messaging';
...

const handleFirebasePushMessage = async (remoteMessage) => {
    let isFromMapp = await Mapp.isPushFromMapp(remoteMessage);
   console.log(JSON.stringify(notification) if(isFromMapp){
      Mapp.setRemoteMessage(remoteMessage);
    }else{
      // handle push messages from other services
    }
};

...
// to recevive and handle push messages when application is in a background/quit state
FBMessaging().setBackgroundMessageHandler(handleFirebasePushMessage);

// to receive and handle push messages when application is in a foreground state
Alert.alert(JSON.stringify(notification))
        });FBMessaging().onMessage(handleFirebasePushMessage);

and also needs to forward Firebase device token

Code Block
languagejs
const token = await FBMessaging().getToken();
Mapp.setToken(token); // forward Firebase token to a Mapp plugin

Check if received push message is from MAPP.

@param{RemoteMessage} remoteMessage - message received from firebase messaging service.

Code Block
languagejs
let isFromMapp = await Mapp.isPushFromMapp(remoteMessage);

Provide firebase token to the Mapp SDK. It’s used for registring device for receiving push messages from Mapp.

@param{String} token - token generated from Firebase Messaging instance.

Code Block
languagejs
Mapp.setToken(token);

Pass received firebase message to the Mapp SDK.

@param{RemoteMessage} remoteMessage - message received from firebase messaging service.

Code Block
languagejs
Mapp.setRemoteMessage(remoteMessage);

Log out

@param{boolean} pushEnabled - while logging out sets push the state

Code Block
languagejs
Mapp.logOut(pushEnabled)

Mapp plugin provides possibility to handle deep links received in push messages.

Deep-linking is a type of action that can be triggered when the user open the push notification. It provides the ability to open a specific page within the app. 

Code Block
  Mapp.addDeepLinkingListener(notification => {
    let action = notification.action;
    let url1 = notification.url;
    console.log(notification);
    const uri = new URL(url1);
    const link = url1;
    const message_id = action;
    //Alert.alert(JSON.stringify(url1));
    this.props.navigation.navigate('Home', {
      myLink: link,
      message_id: message_id,
    });
  });

Tags

Retrieving tags:

Code Block
languagejs
Mapp.getTags().then(data => {
      Alert.alert(JSON.stringify(data))
    });

Adding a tag:

@param{string} tag - channel tag

Code Block
languagejs
Mapp.addTag("tagName");

Removing tag:

@param{string} tag - channel tag

Code Block
languagejs
Mapp.removeTag("tagName");

...

Set a string value for a key.
@param {string} key - A key to be paired with the value.
@param {string} value - A value which contains string.

Code Block
languagejs
Mapp.setAttributeString("some key", "some value");

...

Set a number value for a key.
@param {string} key - A key to be paired with the value.
@param {number} value - A value which contains a number, i.e. "34", "34.54".

Code Block
languagejs
Mapp.setAttributeInt("some key", 34);

...

Set a boolean for a key.
@param {string} key - A key to be paired with the value.
@param {boolean} value - true, false

Code Block
languagejs
Mapp.setAttributeBollean("some key", true);

...

To get inbox messages use Mapp.fetchInboxMessage()

Code Block
languagejs
    Mapp.fetchInboxMessage().then(data => {
      if (Platform.OS == "ios") {
        Mapp.addInboxMessagesListener(
          (messages) => {
            Alert.alert(JSON.stringify(messages))
          });
      } else {
        Alert.alert(JSON.stringify(data))
      }

iOS uses events for inbox messages (Mapp.addInboxMessagesListener )and cannot return them as promise.

To get the latest inbox message use Mapp.fetchInboxMessage();

Code Block
languagejs
  const latestMessage = await Mapp.fetchLatestInboxMessage();
  if (latestMessage != null) {
    // use latest message
  }

Show In-App message

The method triggers an In-App message.
@param {string} event-specific DCM event trigger. 

Code Block
languagejs
Mapp.triggerInApp("app_open")

...

@param{string} eventId

Code Block
languagejs
Mapp.inAppMarkAsRead(templateId: number, eventId: string);

Mapp.inAppMarkAsUnRead(templateId: number, eventId: string);

Mapp.inAppMarkAsDeleted(templateId: number, eventId: string);

...

Start location monitoring

To start Geofencing (Geo targeting) use command Mapp.startGeofencing()

The location manager will be enabled and it will collect the location change events.

Code Block
Mapp.startGeoFencing()

Stop location monitoring

languagejs
  Mapp.startGeofencing()
    .then(result => {
      console.log(result);
      Alert.alert('Geofencing start', result);
    })
    .catch((code, error) => {
      console.log(code, error);
    });
Info

On Android, application must request Location permissions in runtime, to be able to start Geofencing.

Mapp plugin provides helper method to request required location permissions: COARSE_LOCATION, FINE_LOCATION, BACKGROUND_LOCATION.

Code Block
languagejs
let result = await Mapp.requestGeofenceLocationPermission();
if(resul){
  // location permissions are granted; Start Geofencing;
}else{
  // permissions are denied; Handle permissions denial
}

Note that requesting BACKGROUND_LOCATION has strict Google Policy and application must provide valid reasons to do that, otherwise Google can remove application from Google Play. More on this on official Google support pages.

Stop location monitoring

To stop Geofencing use command Mapp.stopGeoFencing()

The location manager will be disabled.

Code Block
languagejs
  Mapp.stopGeoFencing().stopGeofencing()
    .then(result => {
      console.log(result);
      Alert.alert('Geofencing stop', result);
    })
    .catch((code, error) => {
      console.log(code, error);
    });