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(new SmartlookCustomEvent(name: string));
Addition data passed as a object
can be added to custom event:
smartlook.trackCustomEvent(new SmartlookCustomEvent(name: string, eventProperties: object));
A simple custom event can be created by using:
smartlook.trackCustomEvent(new SmartlookCustomEvent("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(new SmartlookNavigationEvent(name: string, viewState: SmartlookViewState));
where viewState
can be either SmartlookViewState.START
or SmartlookViewState.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(new SmartlookTimedCustomEventStart(name: string)): promise<string>;
smartlook.startTimedCustomEvent(new SmartlookTimedCustomEventStart(name: string, eventProperties: object)): promise<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(new SmartlookTimedCustomEventStop(eventId: string));
smartlook.stopTimedCustomEvent(new SmartlookTimedCustomEventStop(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(new SmartlookTimedCustomEventCancel(eventId: string, reason: string));
smartlook.cancelTimedCustomEvent(new SmartlookTimedCustomEventCancel(eventId: string, reason: string, eventProperties: object));
Typical use of timed event might look like this:
smartlook.startTimedCustomEvent(new SmartlookTimedCustomEventStart("duration_event")).then((eventId) => {
setTimeout(function() {
smartlook.stopTimedCustomEvent(new SmartlookTimedCustomEventStop(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(new SmartlookGlobalEventProperties(globalEventProperties: object, immutable: boolean));
smartlook.setGlobalEventProperty(new SmartlookGlobalEventProperty(key: string, value: string, immutable: boolean));
smartlook.setGlobalEventProperties(new GlobalEventProperties({sample: "property"}, true);
smartlook.setGLobalEventProperty(new setGlobalEventProperty("sample", "property", 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(SmartlookGlobalEventPropertyKey(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
: automatically detected events will not be tracked. User defined events are still enabled.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:
var builder = new SmartlookSetupConfigBuilder(smartlookAPIKey: string)
.eventTrackingModes(eventTrackingModes: SmartlookEventTrackingModes);
Smartlook.setupAndStartRecording(builder.build());
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: SmartlookEventTrackingMode);
Smartlook.setEventTrackingModes(eventTrackingModes: SmartlookEventTrackingModes);
Smartlook.setEventTrackingMode(SmartlookEventTrackingMode.FULL_TRACKING());
Smartlook.setEventTrackingModes(new SmartlookEventTrackingModes([SmartlookEventTrackingMode.FULL_TRACKING()]);
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.