Analytics

On web based frameworks SDK is not able to autodetect all events like on native frameworks. With that said it is still able to detect Application crashes. For everything else custom events need to be used.

Custom event

A simple custom event can be created by calling:

Smartlook.trackCustomEvent({name: string})

Addition data passed as a object can be added to custom event:

Smartlook.trackCustomEvent({name: string, eventProperties: object})

A simple custom event can be created by using:

Smartlook.trackCustomEvent({
  name: "sample_event",
  eventProperties: {
    id: "sample_id",
    text: "sample text"
  }
})

🚧

Event properties will effectively use only flat objects. In case an object that includes objects or arrays as a child elements is used, these elements are going to be ignored.

Navigation event

Screen/navigation transitions can be manually tracked by calling:

Smartlook.trackNavigationEvent({name: string, viewState: Smartlook.ViewState})

where viewState can be either Smartlook.ViewState.START or Smartlook.ViewState.STOP.

📘

Navigation events need to be tracked manually, because web technology based applications typically consist of single activity. Manual tracking needs to be implemented so mobile heatmaps work correctly.

Timed event

Duration of any time-sensitive or long-running actions in the application can be measured using timed events. A timed event can be started by using the following:

Smartlook.startTimedCustomEvent({name: string}, successCallback: function(eventId: string));
Smartlook.startTimedCustomEvent({name: string, eventProperties: object}, successCallback: function(eventId: string));

This will not send out any events but will return a unique eventId that needs to be stored and it is then used to stop/cancel a custom timed event. To send out an event with a duration, stop needs to be called:

Smartlook.stopTimedCustomEvent({eventId: string});
Smartlook.stopTimedCustomEvent({eventId: string, eventProperties: object});

with corresponding eventId obtained from startTimedCustomEvent.

📘

Properties set in start will be merged with properties set in stop/cancel. Properties from stop/cancel have a higher priority and will rewrite conflicting properties from the start.

In case a given action failed cancelTimedCustomEvent() can be called instead of stopTimedCustomEvent() it has an extra field used for the reason of any failure:

Smartlook.cancelTimedCustomEvent({eventId: string, reason: string});
Smartlook.cancelTimedCustomEvent({eventId: string, reason: string, eventProperties: object});

Typical use of timed event might look like this:

Smartlook.startTimedCustomEvent({name: "duration_event"}, function(eventId) {
  setTimeout(function() {
    Smartlook.stopTimedCustomEvent({eventId: eventId});
  }, 1000);
});

In this case the duration_event will have duration a property set to circa 1000ms.

Global event properties

Extra properties can be attached to every event, these properties are called global event properties. Global event properties can be set by calling:

Smartlook.setGlobalEventProperties({globalEventProperties: object, immutable: boolean});
Smartlook.setGlobalEventProperty({key: string, value: string, immutable: boolean});

Smartlook.setGlobalEventProperties({
  globalEventProperties: {
    global: "property",
    sample: "test"
  },
  immutable: true
});

Properties set to be immutable have the highest priority and once set they cannot be overridden (only removed).

📘

Global event properties have higher a priority so in the merging process they will override custom properties with the same key.

Remove global event properties

A global property with a given key can be removed:

Smartlook.removeGlobalEventProperty({key: string});

Or all global event properties can be removed at once:

Smartlook.removeAllGlobalEventProperties();

📘

Global event properties are stored until they are not removed or the app is uninstalled.

Event tracking modes

It can be beneficial to disable some automatically detected events due to security or usability reasons. This can be done using event tracking modes.

Tracking modes are defined in the Smartlook.EventTrackingMode enumeration:

• FULL_TRACKING: this a default state. SDK tracks all automatically detected events along with all user defined events.
• IGNORE_USER_INTERACTION: disables automatically detected selector (click on a View), focus, touch, gesture and keyboard events.
• IGNORE_NAVIGATION_INTERACTION: disables automatically detected navigation events. User defined ones are still being sent.
• IGNORE_RAGE_CLICKS: disables automatic detection and tracking of rage click events.
• NO_TRACKING: no automatically detected events are tracked. Only user defined events are still tracked.

Setup with event tracking modes

Single or a combination of event tracking modes can be set right at the SDK setup:

Smartlook.setupAndStartRecording({smartlookAPIKey: string, eventTrackingModes: [Smartlook.EventTrackingMode]});

Set event tracking modes

Single or a combination of event tracking modes can be set any time after SDK setup by using the following:

Smartlook.setEventTrackingMode({eventTrackingMode: Smartlook.EventTrackingMode});
Smartlook.setEventTrackingModes({eventTrackingModes: Smartlook.EventTrackingMode[]});

👍

Next reading

• Further info about event tracking modes could be found in the Event Tracking conceptual document.
• Also take a look at the pin code keyboard sample, demonstrating usage of analytic event modes.