Integration

Connect the SPLIO / D-AIM SDK to all of your website's features to start driving your users and build retention.

Web Integration

🚩 You have the D-ENGAGE sticker up and running.

Now you need to integrate the SDK deeper into your website 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.

Summary

To properly integrate our SDKs to your app, here are all the steps you have to think about :

• User authentication

• Interactions

• User Properties

• Navigation

I. User authentication

1. Login

Method: user.login(...)

• If the user already exists, connects him

• If not, creates the account and connects him

Should be called right after you've logged in/registered a user to your own website. Do not call this method on each page. ApmService keeps the user connected across pages through the use of localStorage.

ApmService.user.login(
  email: string, 
  partnerClientId: string, // your user's ID
  firstName: string, 
  lastName: string, 
  segments: JSON // deprecated
  dataConsentCode?: -1 | 0 | 1 // NOT_SET = -1, ACCEPT = 0, REFUSE = 1
)

Return value

Success

{
    user: userObject{}
}

Error

ApmError{}

Possible reasons:

• If invalid arguments

• If already connected

• If user has not accepted RGPD yet (will connect once it is)

Example

Connecting user 'John Doe' with his email [e-mail] associated with the ID/token you gave him.

ApmService.user.login('[e-mail]', '1326793', 'John', 'Doe', null, -1);

If logs are in "debug" mode, you'll see the HTTP call to "user/clientcheckcredentials" and a response with a "success" status

Did it work ?

The easiest way of verifying if a user is connected is to check inside the localStorage if there is a key as d-engage-[your partner id]-user

Here is an example of a user currently connected

3. Logout

Method: user.logout()

Logs a user out. This must be called when a user is logged out of your website. The SDK will revert to its non-connected state.

Example

ApmService.user.logout();

II. Interactions

1. Send an interaction

Method: generosity.add(...)

Tells our server that the user accomplished the given action after ApmService checks whether the user is allowed to do the action (frequency, filters, etc...).

The tags must match with the tagging plan established with our team.

ApmService.generosity.add(
  tagId: string,
  properties?: {[s: string]: string}
);

Return value

Success

{
  earn: earnObject,
  user: userObject
}

Error

ApmError{}

See error message

Example

// Write a review on a business
ApmService.generosity.add("writeReview");
// Write a review on a restaurant
ApmService.generosity.add("writeReview", {establishment: "restaurant"});
// Write a review on a restaurant in Paris
ApmService.generosity.add("writeReview", {establishment: "restaurant", location: "75000"});
// Write a review on a hotel/restaurant
ApmService.generosity.add("writeReview", {establishment: "restaurant|hotel"});

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

Only necessary when using our filter functionality.

Method: userProperties.add(...), userProperties.remove(...)

Call these methods to update user properties. These user properties are stored permanently on a device (using localStorage). The keys and values must match with the filters established inside our BackOffice.

ApmService.userProperties.add(
  userProperties: {[s: string]: string}
);
ApmService.userProperties.remove(
  userPropertyKeys: string[]
);

Return value

The current userProperties

{
  key1: "value1",
  key2: "value2"
}

Example

ApmService.userProperties.add({location: "33130", bankCard: "true", gender: "male"});
// => {location: "33130", bankCard: "true", gender: "male"}
ApmService.userProperties.remove(["location", "gender"]);
// => {bankCard: "true"}
ApmService.userProperties.remove();
// => {}

4. Navigation

The following chapter concerns mainly ApmView.

You can handle navigation inside our modal through Deeplinks. These must follow the schema apm://{screen}/{arg?}

Available deeplinks :

// Open modal on a specific screen

apm://screen_my_account // Menu screen
apm://screen_gifts // List of all available gifts for a current user
apm://screen_gift/{giftId} // Detail of a specific gift
apm://screen_how_works // Tutorial screen
apm://screen_mission // Mission Screen
apm://screen_burns // List of all granted gifts for a current user
apm://screen_burn/{burnId} // Detail of a specific granted gift
apm://screen_earns // History of all non-qualifying points for a current user
apm://screen_unsubscribe // Unsubscription screen
apm://screen_levels // Level screen (DEPRECIATED FOR NOW)
apm://screen_mentions // Mentions pages
apm://screen_page/{pageId} // Specific campain page 


// Actions
apm://back // (DEPRECIATED FOR NOW)
apm://closeBadge // Close the modal
apm://trigger_action/{tagId} // sends an interaction
apm://trigger_game/{gameId} // launch a game