사용자 상호작용 계측

사용자 상호작용 계측은 웹 애플리케이션에서 발생하는 사용자의 다양한 상호작용 이벤트를 자동으로 감지하고 추적하는 기능을 제공합니다. 클릭, 입력, 폼 제출, 스크롤 등의 사용자 행동을 실시간으로 모니터링하여 사용자 경험과 애플리케이션 사용 패턴을 분석할 수 있습니다.

사용자 상호작용 계측은 다음과 같은 이벤트를 추적합니다:

사용자 상호작용 Telemetry는 주로 다음과 같은 인스트루멘테이션 범위를 통해 캡처됩니다:

사용자 상호작용 범위는 클릭, 입력, 폼 제출과 같은 DOM 상호작용 이벤트를 캡처합니다.

"scope": {
  "name": "@opentelemetry/instrumentation-user-interaction",
  "version": "0.44.1"
}

사용자 상호작용 스팬은 클릭과 같은 사용자 이벤트를 캡처합니다:

각 사용자 상호작용 스팬은 다음과 같은 속성을 포함합니다:

사용자 상호작용은 종종 다른 추적된 이벤트를 트리거합니다:

이 스키마는 IMQA 모니터링 시스템으로 Telemetry 데이터를 처리하고 저장하기 전에 사용자 상호작용을 위한 Telemetry 데이터를 검증하는 데 사용됩니다. 이는 모든 필수 필드가 올바르게 포함되어 있는지 확인합니다.

(boolean 또는 IMQAUserInteractionInstrumentationConfig, 선택)

사용자 상호작용 계측을 활성화하거나 비활성화합니다. true로 설정하면 클릭, 입력 등 사용자 상호작용 이벤트가 자동으로 계측됩니다. IMQAUserInteractionInstrumentationConfig을 통해 상호작용 계측의 세부 설정을 커스터마이즈할 수 있습니다.

interface UserInteractionInstrumentationConfig extends InstrumentationConfig {
    eventNames?: EventName[];
    shouldPreventSpanCreation?: ShouldPreventSpanCreation;
    events?: UserInteractionEventsConfig;
}

type UserInteractionEventsConfig = {
  [type: string]: boolean;
};
const DEFAULT_AUTO_INSTRUMENTED_EVENTS: UserInteractionEventsConfig = {
  // pointer
  click: true,
  dblclick: true,
  mousedown: true,
  mouseup: true,

  // form
  submit: true,
  reset: true,
  change: true,

  // drap & drop
  dragend: true,
  drop: true,

  // media
  ended: true,
  pause: true,
  play: true,
};

유효한 사용자 상호작용 Telemetry 객체는 다음과 같은 내용을 포함합니다:

데이터는 다양한 Telemetry 수집 및 분석 도구와 호환되는 OpenTelemetry 프로토콜 형식을 따릅니다.