Integration

Connect the app's miles® SDK to all of your app's features to start driving your users and build retention.

React Native Integration

🚩 You have the app's miles banner up and running.

Now you need to integrate the SDK deeper into your application so that your user can: - 🧠understand how the program works. - 🔎discover all the functionalities that you slaved away at developing ! - 🥕be rewarded for consistently using your application's main features.

I. Connection

1. Onboarding

Skip to the Connect section if you intend to have everyone participate in the program by default

Purpose

The first thing that the user will see when clicking on the app's miles banner is the onboarding.

This onboarding has two purposes:

• 🎓 Present and explain the program
• ❓ Ask the user their consent to take part in the program

Onboarding choices

There are up to 3 buttons on the onboarding, and you must attach a listener in order to redirect the user depending on their input.

The input of the user will affect the variable OPT_IN in the following way: (default: APM_DEVICE_OPT_IN_NOT_SET)

• 👍 OK: APM_DEVICE_OPT_IN_ACCEPT
• ⌚ Later: APM_DEVICE_OPT_IN_NOT_SET
• 👎 Never: APM_DEVICE_OPT_IN_REFUSE

var _apmDeeplinkOnboardingButtonOkClicked: Object;
var _apmDeeplinkOnboardingButtonLaterClicked: Object;
var _apmDeeplinkOnboardingButtonNeverClicked: Object;

//Init APMDeeplinkListener
APMDeeplinkUtilsModule.setListener();
const aPMDeeplinkUtilsModule = new NativeEventEmitter(NativeModules.APMDeeplinkUtilsModule);
_apmDeeplinkOnboardingButtonOkClicked = aPMDeeplinkUtilsModule.addListener('apmDeeplinkOnboardingButtonOkClicked', (apmDeeplinkOnboardingButtonOkClicked) => console.log("apmDeeplinkOnboardingButtonOkClicked", apmDeeplinkOnboardingButtonOkClicked));
_apmDeeplinkOnboardingButtonLaterClicked = aPMDeeplinkUtilsModule.addListener('apmDeeplinkOnboardingButtonLaterClicked', (apmDeeplinkOnboardingButtonLaterClicked) => console.log("apmDeeplinkOnboardingButtonLaterClicked", apmDeeplinkOnboardingButtonLaterClicked));
_apmDeeplinkOnboardingButtonNeverClicked = aPMDeeplinkUtilsModule.addListener('apmDeeplinkOnboardingButtonNeverClicked', (apmDeeplinkOnboardingButtonNeverClicked) => console.log("apmDeeplinkOnboardingButtonNeverClicked", apmDeeplinkOnboardingButtonNeverClicked));

Connected or non-connected

There can be two different onboardings:

• for non-connected users

• for connected users

Both of these onboardings only appear if the user has not decided whether they want to opt in or not.

An onboarding only appears if the optIn value is NOT_SET. If you want to force the optIn and still wish to present the program, it is better to use tutorials or walkthroughs (both can be configured in our BackOffice and require no code).

2. Connect

In order to offer a seamless experience, app's miles doesn't have a login or create-account page. The login/create-account process for app's miles is parallel to yours.

APMUIServicesUserModule.userClientConnect()

This method can both connect and create an account:

• If an app's miles account already exists with the given userID, the method signs them in.

• If no account exists, the method will automatically create their account and sign them in.

This method needs : « email », « userID » and « optIn » – « email » is the email of user – « userID » is a unique identifier in your database – « optIn » is the RGPD OptIn

If you don’t want give the email, you can build a encrypted email with the userID: {userID}@{your-company-name}.com (e.g. [e-mail])

async function apmConnection() {
  var firstname = 'Vincent';
  var lastname = 'Ducastel';
  var email = '[e-mail]'; // Required
  var facebookId = null;
  var userId = 'demo-awesome-ios'; // Required
  var oldClientId = null;
  var segments = null;
  var optIn = 0; // Required
  //optIn: 
  // - APM_DEVICE_OPT_IN_NOT_SET = -1
  // - APM_DEVICE_OPT_IN_REFUSE = 1
  // - APM_DEVICE_OPT_IN_ACCEPT = 0 


  try {
    var user = await APMUIServicesUserModule.userClientConnect(firstname, 
                                                                lastname, 
                                                                   email, 
                                                              facebookId, 
                                                                  userId, 
                                                             oldClientId, 
                                                                segments,
                                                                   optIn);
    console.log("user.email : "+user.email);
  } catch (e) {
    console.log("e.code : "+e.code);
    console.log("e.message : "+e.message);
  }
}

3. Logout

The same way the login process is parallel to yours, so is the logout:

II. Tagging plan

1. Send an action

In order to reward the user for an action, you need to place triggers in your application. You will need to follow the Tagging plan that your marketing team created with us.

Be careful with the spelling, an extra character like a 's' will change the tag

Call the method triggerAction to send a tag

APMModule.triggerAction(actionName);

Make sure to test each action by looking at the logs, especially for actions that are complex

Earn animation

2. Actions with properties

If your tagging plan requires the use of filters, you may need to send properties with your action.

Call triggerAction with a second parameter to send a tag with properties – property.key : Property keys must be strings and must be in the tagging plan (e.g. « zipcode », « establishment »). – property.value : Property values must be strings. (e.g. « 33000 », « restaurant »).

...

This example tag will match with the action « Write a review on a restaurant in Bordeaux ».

A tag may have multiple versions configured in our BackOffice. This is an unlikely scenario, but as an example, sending the same tag and properties 3 times may match with a different version each time.

3. User properties

In the same idea than 2. Send an action with properties, if your tagging plan requires the use of filters, you may need to send us userProperties so that we can offer filtered actions to the user.

Use the class APMUserPropertiesUtils to manage user properties.

userProperty.key : Property keys must strings. (e.g. « zipcode », « membership_level »). userProperty.value :Property values must strings. (e.g. « 33000 », « premium »).

➕Adding user properties

...
...

Example:

// Single userProperty
...
// Multiple userProperties
...

Adding a userProperty with a key that already exists will update it.

➖Removing user properties

If a userProperty is no longer valid, you can remove it (example: user does not wish to be geolocated anymore),

...
...

Example:

// Single userProperty
...
// All userProperties
...

🔄Refreshing after a change

If you have changed a userProperty that may have an impact on the actions that we can propose to the user, you will want to refresh the SDK (i.e. tell it to communicate with our API to get updated info).

You can do this by calling:

...

4. Action's deeplink

We showcase one action above others (Challenge of the day). Each action can be configured in our BackOffice with a deeplink so that the user can go to the screen where they can perform the action.

To listen to the click on the "Let's go !" 👉 button and get the deeplink URI, you need to use APMDeepLinkActionUtilsModule.

var _apmDeeplinkActionButtonGoClicked: Object;

//Init APMDeeplinkListener
APMDeeplinkUtilsModule.setListener();
const aPMDeeplinkUtilsModule = new NativeEventEmitter(NativeModules.APMDeeplinkUtilsModule);
_apmDeeplinkActionButtonGoClicked = aPMDeeplinkUtilsModule.addListener('apmDeeplinkActionButtonGoClicked', (apmDeeplinkActionButtonGoClicked) => console.log("apmDeeplinkActionButtonGoClicked", apmDeeplinkActionButtonGoClicked));

III. Advanced functions

1. Show/Hide badge

You can hide the badge if you have a screen where you don't want the user to be distracted (e.g. checkout).

// Hide the badge
APMModule.hideBadge();
// Show it
APMModule.showBadge();

Make sure to show the badge again once you leave the screen !

2. Activate debug logs 🐞

Logs are quire useful, right ? Here's how to unleash the (controlled) fury of debug logs:

3. User listener

You can be notify when the user changed with the following code

const aPMModuleEmitter = new NativeEventEmitter(NativeModules.APMModule);

//Init APMServicesUserListener
var _servicesUserChangedSubscription: Object;

APMModule.setServicesUserListener();
_servicesUserChangedSubscription = aPMModuleEmitter.addListener('servicesUserChanged', (user) => console.log("servicesUserChanged", user));

4. Get a user

Acquired tags

Tags can be set on levels, actions, challenges and trophies. When the user reaches/completes/obtains one of the above, they will acquire the corresponding tags. You can retrieve all the tags a user has acquired:

var user = await APMModule.user();
console.log("APMModule.user() : " + user);
if(user)
{
    var acquiredTags = user.acquiredTags;
    if(acquiredTags)
    {
        console.log("user.acquiredTags : " + user.acquiredTags);
        console.log("user.acquiredTags[0] : " + user.acquiredTags[0]);
    }
}