@deerden/qualetics-react-native-sdk

qualetics-react-native-sdk

Installation

Install peer dependencies

$ npm install @react-native-async-storage/async-storage --save $ npm install react-native-native-mqtt --save

Install SDK

$ npm install @deerden/qualetics-react-native-sdk --save

Usage

Example

import QualeticsService from "@deerden/qualetics-react-native-sdk";


const qualetics = new QualeticsService("qualeticstest", "supersecretpassword", "nlp", false, {
  host: 'tcp://api.qualetics.com',
  port: 1883,
  defaultActor: {
    type: "User",
    id: "1234",
  }
});

qualetics.init();

/*
...
*/

<Button onPress={() => {
  qualetics.send({
    "actor": {
      "type": "User",
      "id": "js1234"
    },
    "action": {
      "type": "ButtonClick"
    },
    "context": {
      "type": "Button",
      "name": "Button1"
    }
  });
}} title="Press" />

Options

Initialize event tracker

  var qualetics = new Qualetics.service("YOUR_APPLICATION_ID", "YOUR_APPLICATION_SECRET", "SESSION_PREFIX" /* , false (Optional, currently always false since automatic page tracking is not supported on react native, Options (Optional) object containing additional options ) */).init();

You can provide few options when construction the tracker instance.

{
  host: string, // Host that tracker will connect to, defaults to ws://api.qualetics.com

  port: number, // Port that tracker will connect to, defaults to 8083

  defaultActor: Actor object // Default actor for all the messages

  stickySessionId: boolean, // Store sessionId as cookie, defaults to true, only usable on browser
                            // If stored sessionId has different session prefix than what is configured
                            // new session id will be generated and it will be stored

  storeDefaultActorFromApiCall: boolean, // Store default actor from api call, defaults to true, only usable on browser
                                        // This setting will have no effect if default actor setting is set
  trackUserGeoLocation: boolean  // Currently not supported on react-native
  trackPageVisibilityChanges: boolean //Currently not supported on react native
}

Sending events

After the tracker has been initialized you can start sending events. Data format in the event should be:

{
  "actor": {
    "type": "User", // Required
    "id": "js1234", // Optional, id of the user
    "attributes": { //Optional, key - value pairs that can provide more data about the actor
      "name": "John Doe",
      "age": "31",
      "address": {
        "street": "Test street 1",
        "zip": "50100"
      }
    }
  },
  "action": {
    "type": "New User", // Required
    "attributes": { // Optional, key - value pairs that can provide more data about the action
      "referrer": "Facebook",
      "coupon": "KIHSK123FS"
    }
  },
  "context": {
    "type": "Course", // Require
    "id": "12321123", // Optional, identifier for the context
    "attributes": { // Optional, key - value pairs that can provide more data about the context
      "speaker": "Jane Doe"
    }
  }
}

Events can be sent either by sending the complete JSON object

    qualetics.send({
      "actor": {
        "type": "User",
        "id": "js1234"
      },
      "action": {
        "type": "ButtonClick"
      },
      "context": {
        "type": "Button",
        "name": "Button1"
      }
    });

or using the builder message builder

    let message = qualetics.createMessage();
    message.setAction({
      type: "ButtonClick"
    }).setActor({
      type: "User",
      id: "js1234"
    }).setContext({
      type: "Button",
      name: "Button2"
    }).send();

Events

Currently you can listen to connection events from the tracker if you for some reason want to wait until tracker has connected. This is not necessary since the tracker will sent events when to connection is made is it wasn't at the time of the sending.

  qualetics.onConnect(() => {
    console.log("Connected");
  });