Analytics

You are able to initialize different analytics providers when application starts and call specific action when certain event occurs. List of currently available providers:

ga — Google Analytics
gtm — Google Tag Manager
hotjar — HotJar
mixpanel — MixPanel
smartlook — Smartlook

Example integration

# index.yml
analytics:
  mixpanel: "a78gc206fb0a9d85edb622d10ec74b5d"
  gtm: "GTM-XXXXXX"

User indentification

To identify current user for different analytics providers analytics.authorizationToken configuration key can be used, e.g.:

# index.yml
analytics:
  authorizationToken: !expression "url.query.do_authorization"

In order to identify user not on initial page load, but by some event, analytics.authorization action from Expression context can be used:

- !component as: div
  onClick: !function "analytics.authorization(flow.export.identityId)"

Events management

Analytics events can be dispatched manually or using analytics event management. By defining analytics in page configuration built-in analytics event management will be involved, some UI components are dispatching basic default events, e.g. form fields have click, change, blur, focus, etc.

Analytics page configuration

Analytics configuration structure is coresponding to an event you want to handle and can be placed on every page. There are 3 ways you can set event configuration: “string”, “object” or “function” annotaion:

analytics:
  fields:
    firstName:
      # String annotation
      change: "firstNameChanged"
    middleName:
      # Object annotation
      change:
        eventName: "middleNameChanged"
        data:
          page: !expression "page.name"
          device: !expression: "device.deviceType"
    lastName:
      # Function annotation
      change: !function "analytics.event('lastNameChanged')"

You can also define this event configuration inside of parent structure, for example this function will be triggered on any field change:

analytics:
  fields:
    change: !function "analytics.event('someFieldChanged')"

Existing events

Form fields events:

Event name	Description
`click`	Triggers when user clicks on field
`change`	Triggers when user change value of field
`focus`	Triggers when user focus on field
`blur`	Triggers when user unfocus from field

File upload events:

Event name	Description
`click`	Triggers when user clicks on field
`change`	Triggers when user change value of field
`accepted`	File was accepted to field
`rejected`	File was rejected, it can be caused by prevalidations or livness detection

Path for these events is in this format fields.{FieldName}.{EventName}. Application lifecycle events

Path	Event name	Description
`page`	`enter`	Triggers when page is entered
`page`	`leave`	Triggers when page is leaved
`form`	`initialized`	Triggers when execution is initialized

Path for these events is in this format {Path}.{EventName}.

Analytics storage

Expression context has support for dispatching analytics events and for storing some values. Analytics storage is a simple key/value storage, that can contain any value. It has some utils to make its usage simpler: for numeric values there are increment and get. increment will augment value by 1, if value does not exist, it will set it to 1. Example: This will sends event with name Click with parameter count: 1 for first call, 2 for second call, etc.

!function "analytics.event('Click', { count: analytics.storage.increment('timesClicked') })

This will sends event with name Click with parameter count with value from storage. If this value does not exist, count will be set to 0 (default value).

!function "analytics.event('Click', { count: analytics.storage.get('timesClicked', 0) })

Global analytics params

There is a way to set global analytics params which will be sent with every single event. This injection works only when input params in event call is an object or was not provided. Global params has lower priority, so if you redefine same field in event params, it will overwrite it. Example:

# index.yml
analyticsParams:
  ip: !expression "flow.export.ip"
  page: !expression "page.name"

Dispatch events manually

To manually fire analytics event, use analytics.event method from expression context

- !component as: div
  onClick: !function "analytics.event(eventName, eventParams)"

Hub Backend

Hub Client

Analytics

Analytics

Example integration

User indentification

Events management

Analytics page configuration

Existing events

Analytics storage

Global analytics params

Dispatch events manually

​Analytics

​Example integration

​User indentification

​Events management

​Analytics page configuration

Existing events

​Analytics storage

​Global analytics params

​Dispatch events manually

Analytics

Example integration

User indentification

Events management

Analytics page configuration

Analytics storage

Global analytics params

Dispatch events manually