Analytics

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:

File upload events:

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

Application lifecycle events

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)"