> ## Documentation Index
> Fetch the complete documentation index at: https://platform.docs.zenoo.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Analytics

> Analytics configuration for specific page

### 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](https://analytics.google.com/analytics/web)
* `gtm` — [Google Tag Manager](https://tagmanager.google.com)
* `hotjar` — [HotJar](https://www.hotjar.com)
* `mixpanel` — [MixPanel](https://mixpanel.com)
* `smartlook` — [Smartlook](https://www.smartlook.com)

#### Example integration

```yaml theme={null}
# 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.:

```yaml theme={null}
# 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:

```yaml theme={null}
- !component as: div
  onClick: !function "analytics.authorization(flow.export.identityId)"
```

#### Events management

Analytics events can be dispatched [manually](#dispatch-events-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:

```yaml theme={null}
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:

```yaml theme={null}
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](/technical-specification/hub-client/target-configuration/state#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.

```yaml theme={null}
!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).

```yaml theme={null}
!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:**

```yaml theme={null}
# 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](/technical-specification/hub-client/target-configuration/state#expression-context)

```yaml theme={null}
- !component as: div
  onClick: !function "analytics.event(eventName, eventParams)"
```