Skip to main content

​
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:

​
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 nameDescription
clickTriggers when user clicks on field
changeTriggers when user change value of field
focusTriggers when user focus on field
blurTriggers when user unfocus from field
File upload events:
Event nameDescription
clickTriggers when user clicks on field
changeTriggers when user change value of field
acceptedFile was accepted to field
rejectedFile 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
PathEvent nameDescription
pageenterTriggers when page is entered
pageleaveTriggers when page is leaved
forminitializedTriggers 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)"