# Monitoring

# Initialization

To initialize monitoring, create new instances of the PlatforceCustomNavigator and CustomMonitoringAPI classes:

const storageKey = 'platforce-kpi';
const platforceCustomNavigator = new PlatforceCustomNavigator(getMonitoringData);
const platforceMonitoringAPI = new PlatforceMonitoringAPI(platforceCustomNavigator, storageKey);

storageKey is the name of the key used to store the KPI in the session storage.

Also, make sure your application is not using the kpi and custom keys in the local storage.

Use the PlatforceCustomNavigator functions to collect the KPI data:

platforceCustomNavigator.onenter()

This method is called on the page/slide enter event when the page/slide becomes active. It runs a timer to track the user's time spent on the active page/slide.
platforceCustomNavigator.onbeforeleave(chapterId, pageId, pageName)

This method is called before leaving the active page/slide. It stops the timer for the active page and saves the page/slide details.
platforceCustomNavigator.oncustom(customKey, getData)

This method is called for tracking custom KPI. It uses the getData callback to receive a value and an additional option for the passed customKey.
platforceCustomNavigator.onchange(event)

This method is called on the page/slide change event to calculate likes. Try calling it in the listener of the touch event/gesture event and pass the original event into this function.

Examples for platforceCustomNavigator:

// run page/slide timer for the first page
platforceCustomNavigator.onenter();

// add listener for custom swipe event to navigate between pages
document.addEventListener('swipe', ( event, direction) => {
    // save information about likes from event object
    platforceCustomNavigator.onchange(event);
    // ....
    // stop page/slide timer and save page/slide details
    platforceCustomNavigator.onbeforeleave('main', 'page-1', 'Intro');
    //
    // change active page logic
    // start page/slide timer
    platforceCustomNavigator.onenter();
})

// get element for custom KPI
const element = document.getElementById('range-slider');
// define getData callback, which will return the value of slider
const getData = () => {
    return {
        value: element.value,
        options: {
            debug: true
        }
    }
}
// add listener for range slider to tracking custom KPI value
element.addEventListener('input', () => {
    platforceCustomNavigator.oncustom('Custom range slider', getData.bind(element));

clearStorage

It is a method called by the CLM client before the start of the presentation. Commonly, to store KPI data during the presentation viewing, the browser's local storage is used.

Example:

window.executeMethod('clearStorage')

# Standard monitoring guidelines

Since Platforce CLM uses the presentation with the SPA architecture, the CLM client cannot track the transition between the slides. Thus, to gather standard monitoring data from the presentation, create the method in the presentation that implements the gathering of monitoring and data processing with platforceCustomNavigator and customMonitoringAPI.

# getKPI

You can check the collected KPI data from the developer console by call. The function returns JSON in the string format:

window.executeMethod('getKPI')

Example:

console.log(JSON.stringify(JSON.parse(window.executeMethod('getKPI')), null, 2))

As a result, getKPI must return a JSON object with KPI data, structured as follows:

{
    "slides":[
       {
          "id": "cobalt",
          "name": "Cobalt ",
          "time": 4,
          "chapter":"main",
          "likes":0
       },
       {
          "id": "second",
          "name": "Second ",
          "time": 10,
          "chapter": "main",
          "likes": 0
       }
    ],
    "chapter":[
       {
          "id": "main",
          "time": 14
       }
    ]
}

TIP

To divide the presentation logically, Platforce CLM uses the concept of slides and chapters. The slide represents a single page with some content, and the chapter represents a set of slides used to demonstrate the content united by a common topic.

Each item in the slides array is an object that contains the fields with the following tracking data:

id—visited slide's ID
name—readable name of the slide displayed in the Platforce CRM admin panel
time—time user spends on the slide
chapter—ID of the parent chapter for the slide
likes—users' evaluation of the viewed slide

TIP

Note that we count user likes from the slide if they swipe in the top part of the slide during the transition to the next slide.

Each item in the chapter array contains the information about the visited chapters. The main properties are:

id—visited chapter's ID
time—the total time user spends in the chapter (the time value in the chapter array is a total time user spends on each slide within certain chapter)

# Custom monitoring guidelines

The Platforce CLM client also allows you to receive custom monitoring data about the actions user performs on the slide (or any data you want). The data is also stored within the object that returns the getKPI method. Each custom monitoring record type is stored within its own array.

Example:

{
    "slides": [
        //some data here
    ],
    "chapter": [
             //some data here
    ],
    "customKPI": [{
        "key": "Number of clients",
        "value": 45
    },{
        "key": "Advanced info number",
        "value": 51,
    }]
}

In this example, the customKPI array represents custom monitoring record types. The object with the monitoring information must be stored in the array.

TIP

Additionally, to activate gathering of custom monitoring by CRM, it's required to configure monitoring schemes in the CRM admin panel. You can do this on the Platforce CRM portal.

# Result

After completing the call in the CLM client and synchronizing the device, the monitoring data is displayed in the admin panel as follows:

where the Slides Information section reflects standard KPI and the customKPI section reflects custom KPI.

← API