Wigzo React Native SDK

This article will guide you through the process of Wigzo React Native SDK integration. You can integrate WigzoSDK in your app in simple steps.

Installation

Make sure you have the following peer dependencies installed in your project:

• @react-native-async-storage/async-storage
• react-native-device-info
• react-native-get-random-values
• react-native-linear-gradient
• uuid
• isomorphic-fetch

You can install these dependencies using npm:

npm install @react-native-async-storage/async-storage react-native-device-info react-native-get-random-values react-native-linear-gradient uuid isomorphic-fetch

Initializing Wigzo SDK

• Import Wigzo in root file. (example:- app.js)
• Initialize Wigzo SDK using following snippet.

example:

import Wigzo from 'wigzo-react-native-sdk';.
const wigzo = new Wigzo("<ORGANIZATION_TOKEN>");
(async () => {
	try {
		const wigzoInitialize = await wigzo.initialize();
	} catch (error) {
		console.error(error);
	}
})();

Congratulations! You have successfully integrated Wigzo SDK in your app. Let us guide you through usage of this SDK.

Using Wigzo SDK

Setting up Events (or Activity) tracking.

Below API's capture event occurred for a user. You can use these API's whenever an event or activity occurs.

EventMapper

To create event with only event name and value:

await wigzo.eventData("<EVENT_NAME>", "<EVENT_VALUE>");

EventData

EventData includes the following information:

| fields | Description | |:---------------------|:----------------------------------------------| | eventName | name of the event | | eventValue | value of the event | | eventMetaData | additional information about event |

Metadata

To create event with additional event information :

Metadata includes information :

| fields | Description | |:------------|:--------------------------| | productId | Product Id of Item | | title | Title of item | | description | Description of item | | url | Web or android url of Item | | tags | Tags related to item | | price | Price of Item |

await wigzo.eventData("<EVENT_NAME>", "<EVENT_VALUE>", <EVENT_METADATA_OBJECT>);

NOTE: Event name and Event value both are required to create an event.

Setting up User Profile tracking.

Below API's help you capture profile of User. User’s profile should be created only once. ####UserProfileMapper

To create User profile:

UserProfileMapper ​class includes following fields :

| Fields | Description | |:----------------|:---------------------------------| | fullName | Full name of user | | userName | User name of user | | email | Email of user | | organization | Organization of the user |_ | phone | Phone number of user | | gender | Gender of user | | birthYear | Birth year of user | | customData | Json to provide any other data about user |

To save and send User profile data to Wigzo , following method can be used :

await wigzo.userProfile(userData);

Exceptional Case :

####EmailMapper

await wigzo.userEmail(<USER_EMAIL>);

FIREBASE

There are few events which are required to be sent to Wigzo in order to show you the correct information about the campaigns triggered from Wigzo Dashboard.

First you need to map FCM token with Wigzo and then register the token.

Map FCM

To map FCM with Wigzo, call mapFcm(<FCM_TOKEN>) function. Wigzo is required to be notified about the token every time the token is generated.

Register FCM

To map FCM with Wigzo, call registerFcm(<FCM_TOKEN>) function. This step also is mandatory whenever a new token is generated

import { STORAGE_KEYS } from 'wigzo-react-native-sdk';
...
const sendTokenToServer = async (token: any) => {
  await wigzo.storeData(STORAGE_KEYS.fcmToken, token);
  await wigzo.mapFcm(token);
  await wigzo.registerFcm(token);
}

Note: Map FCM and Register FCM both are required when a new token is generated. Also Map FCM should happen before registering.

Notifying Wigzo about the notification received:

Notifying Wigzo that the notification has been recieived by the user is important, as it helps us keep track of the data which has been sent by Wigzo to provide you with the important insights about your campaigns. To do so:

• In the messaging().onMessage and messaging().setBackgroundMessageHandler hooks get the oragnization ID and campaign ID from the notification message data and call wigzo.notificationRead() function as mentioned below.

messaging().onMessage(async message => {
    	...
		sendNotificationReceivedEvent(message);
	});

messaging().setBackgroundMessageHandler(async message => {
    	...
		sendNotificationReceivedEvent(message);
	});

async function sendNotificationReceivedEvent(message) {
	const organizationID = message.data.organizationId;
    const campaignID = message.data.id;
	await wigzo.notificationRead(campaignID, organizationID);
}

Notifying Wigzo about the notification Clicked:

Notifying Wigzo about the notification has been clicked by the user is another crucial step as it helps Wigzo collecting the data about the campaigns triggered from the Wigzo Dashboard. To do so:

When the user clicks on the notification, extract the organizationId and campaignId from the notification data and call wigzo.notificationOpen() method. Example:

When the notification is clicked/opened call the below mentioned function

	async function notificationClicked ({ detail }) => {
      const { organizationID, campaignID } = detail.notification?.data;
	  await wigzo.notificationOpen(campaignID, organizationID);
    }

In-App Notifications

In-App Notifications are the pop-ups (Dialogs) which are required to be displayed when a notification (of push type : inapp or both) is received.

An In-App notification dialog consists of the following components:

• Image section (If template supports one).
• Title section (notification title).
• Body section (notification message/body).
• Positive response button (Ok button).
• Negative response button (Cancel or X button).

Integrate In App Notifications

import { useWigzoInAppNotification } from 'wigzo-react-native-sdk';
const [showModal, hideModal, NotificationComponent] = useWigzoInAppNotification(wigzo);

// in onMessage hook
showModal(message?.notification);

// then render the below mentioned component into the root.
<NotificationComponent />

When the OK button is clicked, an event "WigzoInAppNotificationPositiveClicked" is emitted with the notification data. Implement the event listener to further utilise the notification data.

When the Cancel or X button button is pressed it simply closes the dialog and no action is taken.

Now in that callback function your logic to take further action should be written, like:- redirecting user to some another screen and notifying wigzo about the notification click (mentioned above in this document).

Setup InApp Notification buttons event listener

useEffect(() => {
   const wigzoInAppPositiveEventManagerSubscription = wigzo.InAppEventManager.addListener('WigzoInAppNotificationPositiveClicked', () => { 
   	// add your positive button logic here.  
   });

   return () => {
   	wigzo.InAppEventManager.removeListener(wigzoInAppPositiveEventManagerSubscription);
   };
}, []);

Redirection can be based on the key-value pairs received in the intent data (payload). It is recommended that you use deep links to redirect users to another screen. If deep links are not possible use appropriate key-value pairs (sent via Wigzo Dashboard) for unique identification and redirection.