Skip to content
Closed
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 56 additions & 0 deletions docs/browser/events.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!--- Hugo front matter used to generate the website version of this page:
linkTitle: Events
--->

# Semantic conventions for browser events

**Status**: [Development][DocumentStatus]

This document defines semantic conventions for browser (web) instrumentations
that emit events.

## UserAction Event

<!-- semconv event.browser.user_action -->
<!-- NOTE: THIS TEXT IS AUTOGENERATED. DO NOT EDIT BY HAND. -->
<!-- see templates/registry/markdown/snippet.md.j2 -->
<!-- prettier-ignore-start -->
<!-- markdownlint-capture -->
<!-- markdownlint-disable -->

**Status:** ![Development](https://img.shields.io/badge/-development-blue)

The event name MUST be `browser.user_action`.

This event describes actions performed by the user such as click, scroll, zoom, resize, etc.

**Body fields:**

| Body Field | Type | Description | Examples | [Requirement Level](https://opentelemetry.io/docs/specs/semconv/general/attribute-requirement-level/) | Stability |
|---|---|---|---|---|---|
| `click_coordinates` | string | Click coordinates captured as a string in the format {x}X{y}. | `345X23` | `Recommended` | ![Development](https://img.shields.io/badge/-development-blue) |
| `element` | string | Target element tag name and it is obtained via event.target.tagName. | `button` | `Recommended` | ![Development](https://img.shields.io/badge/-development-blue) |
| `element_xpath` | string | Target element xpath | `//*[@id='testBtn']` | `Recommended` | ![Development](https://img.shields.io/badge/-development-blue) |
| `tags` | string | Grab data from data-otel-* attributes in tree. | `id` | `Recommended` | ![Development](https://img.shields.io/badge/-development-blue) |
| `user_action_type` | enum | Type of interaction. See enum [here](https://github.com/microsoft/ApplicationInsights-JS/blob/main/extensions/applicationinsights-clickanalytics-js/src/Enums.ts) for potential values we could add support for. | `cl` | `Required` | ![Development](https://img.shields.io/badge/-development-blue) |

`user_action_type` has the following list of well-known values. If one of them applies, then the respective value MUST be used; otherwise, a custom value MAY be used.

| Value | Description | Stability |
|---|---|---|
| `cl` | An element is left clicked by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `cm` | An element is middle clicked by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `cr` | An element is right clicked by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `ke` | An element is entered via keyboard by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `ks` | A space is entered via keyboard by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `o` | User actions that are not listed above. | ![Development](https://img.shields.io/badge/-development-blue) |
| `r` | An element is resized by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `s` | An element is scrolled by a user. | ![Development](https://img.shields.io/badge/-development-blue) |
| `z` | An element is zoomed by a user. | ![Development](https://img.shields.io/badge/-development-blue) |

<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- END AUTOGENERATED TEXT -->
<!-- endsemconv -->

[DocumentStatus]: https://opentelemetry.io/docs/specs/otel/document-status
82 changes: 82 additions & 0 deletions model/browser/events.yaml
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
groups:
- id: event.browser.user_action
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would like to see the id/name be related to the group they come from with the list defined at: https://www.w3schools.com/jsref/obj_events.asp that way we can have a more tailored body/attributes.

stability: development
type: event
name: browser.user_action
brief: >
This event describes actions performed by the user such as click, scroll, zoom, resize, etc.
body:
id: browser.user_action
requirement_level: required
stability: development
type: map
fields:
- id: element
type: string
stability: development
brief: Target element tag name and it is obtained via event.target.tagName.
requirement_level: recommended
examples: ["button"]
- id: element_xpath
type: string
stability: development
brief: Target element xpath
requirement_level: recommended
examples: ["//*[@id='testBtn']"]
- id: user_action_type
type: enum
members:
- id: clickleft
value: "cl"
stability: development
brief: An element is left clicked by a user.
- id: clickright
value: "cr"
stability: development
brief: An element is right clicked by a user.
- id: clickmiddle
value: "cm"
stability: development
brief: An element is middle clicked by a user.
- id: scroll
value: "s"
stability: development
brief: An element is scrolled by a user.
- id: zoom
value: "z"
stability: development
brief: An element is zoomed by a user.
- id: resize
value: "r"
stability: development
brief: An element is resized by a user.
- id: keyboardenter
value: "ke"
stability: development
brief: An element is entered via keyboard by a user.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This description is not clear to me. is that similar to keyboard.space below? so we track when user hits enter while an element (probably an input) has the focus?

If so I wonder why we want to differentiate between these two keys.

- id: keyboardspace
value: "ks"
stability: development
brief: A space is entered via keyboard by a user.
- id: other

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

another interesting event IMHO is input

value: "o"
stability: development
brief: User actions that are not listed above.
stability: development
brief: >
Type of interaction.
See enum [here](https://github.com/microsoft/ApplicationInsights-JS/blob/main/extensions/applicationinsights-clickanalytics-js/src/Enums.ts) for potential values we could add support for.
requirement_level: required
examples: ["cl"]
- id: click_coordinates
type: string
stability: development
brief: Click coordinates captured as a string in the format {x}X{y}.
requirement_level: recommended
examples: ["345X23"]
- id: tags
type: string
stability: development
brief: Grab data from data-otel-* attributes in tree.
requirement_level: recommended
examples: ["id"]
Loading