Fibotalk SDK implementation

We have created a fibotalk npm package for react-native applications. You can install our package by running “npm install” like this:

$npm install --save fibo-react

Now import our library from the package in your react-native “App.js” file like:

import Fiboview from 'fibo-react';
import { React, Component } from 'react';
import { StyleSheet, View, Text } from 'react-native';
...

Now put the “Fiboview” in your base component like this:

Considering App as your base component

export default class App extends Component {
    render() {
        return (
            ...
            <Fiboview
                appid={<rcl>}
                userInfo={{"userId": "user", ...}}
                ref={(e)=>{this.fibo=e}} />
            ...
        );
    }
}

The “rcl” mentioned here can be retrieved from https://app.fibotalk.com by following below steps:

1. Sign in to https://app.fibotalk.com/accounts/login. If you do not have any account on fibotalk, please signup at https://app.fibotalk.com/accounts/signup.
   
2. Go to “Get Started”
   
3. Copy “rcl” from the screen,
   
   The line marked with red is your rcl.
   You have to put this into the code for the appid mentioned above.

Note: Fibotalk cannot be implemented without providing a valid “appid”.

 

Set userInfo

In the above implementation, we put userInfo in the Fiboview as a property. This is used to identify the user who is doing this activity.

It’s not necessary to provide userInfo here. You can provide the userInfo at the time of login or signup also.

An userInfo object can be like this:

{
    userId: "unique_user_identifier",
    name: "User's Name",
    ...
    account: {
        accountId: "unique_account_id",
        plan: "trial",
        group: "User's group name",
        ...
    }
}

It is necessary to provide userId, otherwise, the details will not be stored. You can provide any user details that you want to be tracked so that you can use it while filtering through user cohorts in fibotalk.

User groups:

We provide a facility to group users through account feature. You can provide the common values of those grouped users in the account. Some of these values can be plan, trial_end, etc. It is mandatory to provide accountId in the account to identify the group.

 

Track the Page/view changes

Fibotalk track page change events of the user to track the journey of the user in a session. This can help you track the activity of your user in your application in user journey charts.

Here, you can use event listeners on your <Router> or <NavigationContainer>.

If you are using <Router>, put it like this,

<Router>
  <Scene key="home" on={(e)=>{this.fibo.set("page_open", "home")}}>
     ...
  </Scene>
  <Scene key="about" on={(e)=>{this.fibo.set("page_open", "about")}}>
     ...
  </Scene>
</Router>

If you are using <NavigationContainer>, put it like this,

<NavigationContainer>
 <Stack.Navigator>
  ...
  <Stack.Screen
   name="Chat"
   component={Chat}
   listeners={{
   focus: e => {
    this.fibo.set("page_open", "Chat");
   }}
  />
  ...
  <Stack.Screen
   name="Home"
   component={Chat}
   listeners={{
   focus: e => {
    this.fibo.set("page_open", "Home");
   }}
  />
  ...
 </Stack.Navigator>
</NavigationContainer>

If you are using any other implementation for routing between pages, please contact us at support@fibotalk.com.

 

Track Click events

Fibotalk tracks touch events on mobile devices for user action points. Set “onTouchStart” listener on the parent view which can be <ScrollView>, <SafeAreaView>, etc. and call fibo method to set the event. For example:

<SafeAreaView onTouchStart={(e)=>this.fibo.set(“click_event”, e)}>
    ...
</SafeAreaView>

By this method, we take the innermost text available from the touchpoint, so we cannot capture touch on images and other non-text elements. Moreover, this method tracks even scroll touches. So, we do not recommend the above-mentioned method.

For capturing actual touch events that you want to be tracked, we recommend the following method:

<Button onPress={(e)=>{this.fibo.set("click_event", e)}}>
<Image source={...} onPress={(e)=>{this.fibo.set("click_event", e)}}>

 

Login and Signup events

We can track login and signup events of the users. This can be implemented by calling our fibo function onPress of the element which is doing the login/signup. For example: when you get login/signup success in your application, you can call our fibo method after that like:

this.fibo.set("login", { userId: "" });
this.fibo.set("signup", { userId: "" });

As we mentioned above, you can provide userInfo with login/signup events also.

 

Custom Events

You can provide custom events to fibotalk named as you want it to be. The format of the custom event call is “this.fibo.set(‘your cust event name’, ‘event value’, {other_params_as_object_keys: “values”})”.

The parameters used here are:

• ‘your cust event name‘ – Name of the event that you want to provide. Example: “api_response“
• ‘event value‘ – Value of the event occurred. For example: if the event api_response occurred, the value field will say which API was used or it can be whether the status of the API in success or failure.
• ‘other_params_as_object_keys’ – Other details of the event like for example: if the event api_response occurred, you may want to save the API status, latency, response code, or some other things at the same time. So while the API URL can be the event value and other values can go here in an object.

Example custom event:

If you want to track API responses, you can call our function when you receive the response like,

this.fibo.set("api_response", "/api/sample", { latency: 2, status: "success", resCode: 200 })

You can provide any other event of your choice and track it on our fibotalk application.

 

Please reach out to us at support@fibotalk.com for further help.