Web Apps

Initialization

In order to create ease for partners, we have divided the SDK into multiple modules. Each module represents a specific app niche that partners can use based on their app category. For this step, we will only focus on the core sdk

In order to use the SDK, Core is mandatory to include as it contains the elements regarding the basic app navigation and workflow including nudges. Moreover, all the modules require the core to be integrated in order to successfully log the events.

The easiest way to integrate Kenkai Web SDK in your project is using an NPM package. Add dependencies of the SDK in your package.json of your project.

    npm i @kenkai-io/js-sdk
    # or
    yarn @kenkai-io/js-sdk

OR

    "dependencies": {
        "@kenkai-io/js-sdk": "<version_number>"
    }

for version_number please head to npm package.

Kenkai SDK provides a mechanism to inject logs to the data analytics server. The overall functionality may be described as follows: whenever an event is logged, it is not immediately delivered. Instead, it is queued internally and sent to the server in batches, to save network bandwidth. If the network is down, the SDK is also able to store the events until it is back, or even store them in a permanent storage, like localStorage to manage the case where the user closes the application before the events are correctly delivered.

In your App.js,

Frontend Applications/Browser based (Vanilla JS, React, ...)

    import {CfLog} from '@kenkai-io/js-sdk'

    // Init CF SDK
    CfLog.createSDKInstance(
        '<your-sdk-key>',
        {
          activateNudgeMechanism: true,
          selfManagedNudges: false
        }
    )

    // Nudge CTA listener, required for e-commerce applications
     CfLog.getSDKInstance().on(CfLogEvents.NudgeAction, (type, id) => {
        console.log(type + "-> " + id);
        if (type === CfLogEventType.Redirect) {
            // navigate(`/commerce/${resource.id}`);
            console.log("Redirect not implemented in this app");
        } else if (type === CfLogEventType.AddToCart) {
            console.log("Add-to-cart not implemented in this app");
        } else {
            console.log("received unknown event type: ", type);
        }
    });

Backend Application/Server-side (Node.Js)

    import {
    CfLog,
    IdentifyAction
} from '@kenkai-io/js-sdk'



const cflog = new CfLog('<your-sdk-key>', {activateNudgeMechanism: false})

// OR

const options = {
    activateNudgeMechanism: false
}

const cflog = new CfLog('<your-sdk-key>', options)

• activateNudgeMechanism, indicates whether the SDK must receive and show nudges or not. When the SDK is embedded into a WebView and the native application already uses the Kenkai SDK, it is not needed to receive nudge also in the WebView, since they are already been received in the main application. Default is true.
• selfManagedNudges, the SDK provides the flag to manage the nudges for the users, by default the SDK manages the nudges (is false) on its own but the partners have the ability to manage the nudges on each screen type. When turned on, the partner need to explicitly call the nudge screen type ref on the screens subject to show nudges.

Kenkai SDK automatically starts tracking user data (e.g., OS version, device IDs) and engagement with the basic setup above. This data can be stored on the device and uploaded in batches to reduce network and power usage, and to increase the likelihood of successful uploads while you can also upload the events as soon as they happen.

Each event can further be understood in the context of its attributes which includes details like time, device details, locale, online/offline usage, screen time, interactions, and so on. This enables you to gain in-depth insights into user interactions across your app. You can also leverage this data to segment users, personalize messages and configure campaign targeting.

Offline vs online mode

SDK have two different working modes:

• online, intended to send logs and dimensions during the session where they are generated
• offline, which saves both types of messages in IndexedDB. SDk won't send them automatically. Instead, application developer must call the flush function.

For both modes, storage is enabled in case of network errors, so messages are not lost. Database is only purged when they are sent.

By default, the mode is online. To enable the offline, add it as property in the options object, when initializing the SDK:

    // Init CF SDK
    CfLog.createSDKInstance(
        '<your-sdk-key>',
        {
          activateNudgeMechanism: true,
          selfManagedNudges: false,
          offlineMode: true
        }
    )

At any moment, but specially during offline mode application might need to know the storage state (i.e.: how many logs/dimensions are storaged) to, for example, start flushing. For that task, just call getStorageCounts, which will retrieve an object formatted like this:

{
  logs: number;
  dimensions: number;
}

It is up to the application to decide when to call flush to start sending that data. This is an asynchronous process so, if needed, application can call getStorageCounts while it is flushing, to see the progress.

Next code snipped shows a common workflow for working in offline mode.

  CfLog.createSDKInstance(...)   // as explained in previous section

  // logging events
  CfECommerce.logIngestEvent(...)  // see specific module docs


  // ... more log ingestion...


  // eventually, somewhere in other part of the application
  // for example, as response to a user click on a button
  // (assuming async environment, use then otherwise)
  const counts = await CFLog.getStorageCounts()

  if (counts.logs || count.dimensions) {
      CfLog.flush()
  }

  setInterval(async () => {
    const counts = await CFLog.getStorageCounts()

    if (counts.logs === 0 && count.dimensions === 0) {
        // update UI (disabled button, message, etc)
    }
  }, 5000)

Storage compatibility

SDK uses IndexedDB for storing logs and dimensions. It needs to be supported in the platform where the sdk is embedded. Next tables shows the initial version that supports IndexedDB in both, browsers and webview.

Browser	Partially supported	Fully supported
Chrome	11	23
Edge	12	79
Safari	7.1	10
Firefox	4	10
Opera	—	15
IE	10	—
Chrome for Android	—	142
Safari on iOS	8	10
Samsung Internet	—	4
Opera Mini	—	—
Opera Mobile	—	80
UC Browser Android	—	15.5
Android Browser	—	4.4
Firefox for Android	—	144
QQ Browser	—	14.9
Baidu Browser	—	13.52
KaiOS Browser	—	2.5

Platform	Fully supported from
WKWebView (macOS)	-
WKWebView (iOS)	8
Android WebView	4.4
WebView2 (Windows)	-

---

Next Steps -> Adding Core Events