Integration

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

Flutter 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

APMDeeplinkUtilsModule.addListener((event) {
  Map mapEvent = event;
  String method = mapEvent["method"];
  if(method == "apmDeeplinkOnboardingButtonOkClicked") {
    log('method : apmDeeplinkOnboardingButtonOkClicked');
  }
  else if(method == "apmDeeplinkOnboardingButtonLaterClicked") {
    log('method : apmDeeplinkOnboardingButtonLaterClicked');
  }
  else if(method == "apmDeeplinkOnboardingButtonNeverClicked") {
    log('method : 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. 123456789@appsmiles.fr)

Future apmConnection() async {
  try {
    Map<String, dynamic> userJson = <String, dynamic>{
      'partnerClientId': "demo-flutter",
      'email': "demo-flutter@demo.com",
      'optIn': 0,
    };
    Map? userJson2 = await APMUIServicesUserModule.userClientConnectWithJSON(userJson);
    log('APMUIServicesUserModule.userClientConnectWithJSON() : $userJson2');
  } on PlatformException catch (e) {
    log('APMUIServicesUserModule.userClientConnectWithJSON() Error : $e');
  }
}

3. Logout

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

APMUIServicesUserModule.userLogout()

try {
  await APMUIServicesUserModule.userLogout();
  log('APMUIServicesUserModule.userLogout() OK');
} catch (e) {
  log('APMUIServicesUserModule.userLogout() Error : $e');
}

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 »).

Map properties = {
    "zipcode": "33000",
    "establishment": "restaurant"
};
APMModule.triggerActionWithProperties("write_review", properties);

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.

Send multiple actions

If you need to send multiple actions at once, you must use another method:

const tags = ['tag1', 'tag2', 'tag3'];
APMModule.triggerActions(tags);

3. User properties

Just like for 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

// Single userProperty
APMUserPropertiesUtilsModule.addUserProperty("33000", "zipcode");

// Multiple userProperties
var properties = {
    "zipcode": "33000",
    "membership_level": "premium"
};
APMUserPropertiesUtilsModule.addUserProperties(properties);

Be careful of the order of the arguments for addUserProperty(value first) !

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),

// Remove single userProperty
APMUserPropertiesUtilsModule.removeUserProperty("zipcode");

// Remove all userProperties
APMUserPropertiesUtilsModule.removeUserProperties();

🔄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:

APMModule.refreshSDK(true);

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 APMDeepLinkUtilsModule.

APMDeeplinkUtilsModule.addListener((event) {
  Map mapEvent = event;
  String method = mapEvent["method"];
  if(method == "apmDeeplinkActionButtonGoClicked") {
    String? url = mapEvent["url"];
    String? action = mapEvent["action"];
    Map? params = mapEvent["params"];
    log('method : apmDeeplinkActionButtonGoClicked');
    log('url : $url');
    log('action : $action');
    log('params : $params');
  }
});

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 or the user may never see it again !

While the badge is hidden, the SDK continues to work. If there are triggerActions, the notifications will happen once the badge is shown.

2. Activate debug logs 🐞

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

APMModule.setDebugMode(true);

3. Listen for changes to a user

You can be notified f the user change with the class APMServicesUserListener. Set a listener with :

APMModule.setServicesUserListener((event) {
  Map mapEvent = event;
  String method = mapEvent["method"];
  if(method == "apmServicesUserChanged") {
    log('method : apmServicesUserChanged');
    Map? user = mapEvent["user"];
    log('user : $user');
  }
  else if(method == "apmServicesUserBalanceChanged") {
    log('method : apmServicesUserBalanceChanged');
    Map? user = mapEvent["user"];
    log('user : $user');
  }
  else if(method == "apmServicesUserUnsubscribed") {
    log('method : apmServicesUserUnsubscribed');
  }
});

3 callbacks available :

apmServicesUserChanged(APMUser user) : called when one of the user's attribute change
apmServicesUserBalanceChanged(APMUser user) : called when the userBalance change
apmServicesUserUnsubscribed() : called when the user unsubscribes

4. Add attributes/customDimensions/userProperties in your analytics

You can retrieve information from SDK to powered your analytics

"apm_user_connected" : "yes", "no"
"apm_user_animated" : "not_set", "animated", "anonymous", "unsubscribe"

static Future updateUserPropertiesAPM() async {
  Map user = await APMModule.user();
  Map? device = await APMModule.device();

  String? apmUserConnected = null;
  String? userToken = user["userToken"];
  if(userToken != null && userToken.isNotEmpty) {
    apmUserConnected = "yes";
  }
  else {
    apmUserConnected = "no";
  }

  String apmUserAnimated = "not_set";
  if(device != null && device["deviceStatus"] != null) {
    int deviceStatus = device["deviceStatus"];
    if(deviceStatus == 0)
      apmUserAnimated = "animated";
    else if(deviceStatus == 1)
      apmUserAnimated = "anonymous";
    else if(deviceStatus == 2)
      apmUserAnimated = "unsubscribe";
  }

  log('User is connected : $apmUserConnected and deviceStatus is $apmUserAnimated');
}