콘텐츠로 이동

사용자 작업 추적

브라우저 모니터링은 사용자의 상호작용 동작을 자동으로 감지하고 사용자 행동을 심층적으로 파악하므로, 애플리케이션에서 매번 클릭을 수동으로 계측할 필요가 없습니다.

다음 목표를 달성할 수 있습니다.

  • 주요 상호작용의 성능 파악(예: 작업 버튼 클릭)
  • 기능 채택률 정량화
  • 특정 브라우저 오류의 발생 단계 확인

Action 수집 활성화 제어

trackUserInteractions 초기화 매개변수는 애플리케이션에서 사용자의 클릭을 수집할 수 있습니다. 이는 사용자가 상호작용한 요소를 식별하기 위해 페이지에 포함된 민감·개인 데이터가 포함될 수 있음을 의미합니다.

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.init({
    // 기타 초기화 구성
    trackUserInteractions: true
  })

사용자 상호작용 추적

RUM SDK는 클릭을 자동으로 추적합니다. 아래 모든 조건을 충족하면 클릭 Action이 생성됩니다.

  • 클릭 후 활동이 감지된 경우, 즉 페이지 활동 상태
  • 클릭으로 새 페이지가 로드되지 않은 경우. 이 경우 RUM SDK는 별도의 RUM View 이벤트를 생성합니다.
  • Action 이름을 가져올 수 있는 경우

Action 메트릭

메트릭 유형 설명
action.duration number(ns) 작업의 로딩 시간.
action.action_long_task_count number 이 작업에 대해 수집된 모든 긴 작업 수.
action.action_resource_count number 이 작업에 대해 수집된 모든 리소스 수.
action.action_error_count number 이 작업에 대해 수집된 모든 오류 수.

RUM SDK는 각 클릭 후의 페이지 활동을 모니터링하여 작업 로딩 시간을 계산합니다. 페이지에 더 이상 활동이 없으면 작업이 완료된 것으로 간주됩니다.

Action 속성

속성 유형 설명
action.action_id String 사용자 작업의 UUID
action.action_type String 사용자 작업의 유형. 사용자 지정 작업의 경우 custom으로 설정
action.action_target String 사용자가 상호작용한 요소. 자동 수집된 작업에만 적용
action.action_name String 사용자 친화적인 이름 생성(예: "Click on #checkout"). 사용자 지정 작업의 경우 API 호출에 지정된 작업 이름

Action 작업 이름

RUM SDK는 클릭 가능한 요소와 그 부모 요소를 기반으로 Action 이름을 유추합니다. 자동 생성된 이름이 충분히 안정적이지 않은 경우 내장 속성을 사용하여 명시적으로 이름을 지정할 수 있습니다.

클릭 가능한 요소 또는 그 부모 요소에 data-guance-action-name을 추가합니다.

<button type="button" data-guance-action-name="提交订单">提交订单</button>

actionNameAttribute 초기화 매개변수를 사용하면 요소에 사용자 지정 속성을 추가하여 작업 이름을 지정할 수 있습니다.

초기화 시 속성 이름을 지정합니다.

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.init({
    // 기타 초기화 구성
    trackUserInteractions: true,
    actionNameAttribute: "data-custom-name"
  })

클릭 가능한 요소 또는 그 부모 요소에 해당 속성을 설정합니다.

<button type="button" data-custom-name="提交订单">提交订单</button>

요소에 내장 속성과 actionNameAttribute로 구성된 사용자 지정 속성이 동시에 존재하는 경우 내장 속성이 우선합니다.

자동 Action 이름 보호

RUM SDK 3.3.14 이상 버전에서는 enablePrivacyForActionName: true를 통해 DOM 개인정보 보호 수준을 자동으로 유추된 Action 이름에 적용할 수 있습니다.

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.init({
    // 기타 초기화 구성
    trackUserInteractions: true,
    enablePrivacyForActionName: true,
    defaultPrivacyLevel: "mask-user-input"
  })

이 스위치는 기본값이 false이며, 기존 애플리케이션의 Action 이름 지정 동작을 유지합니다. 활성화하면 SDK는 defaultPrivacyLevel과 조상 요소의 data-gc-privacy 속성 또는 gc-privacy-* 클래스 이름을 결합하여 실제 개인정보 보호 수준을 계산합니다.

개인정보 보호 수준 자동 Action 이름 동작
allow 기존 이름 지정 정책을 유지합니다.
mask 고정 이름 Masked Element를 사용하며 DOM 텍스트나 표준 이름 지정 속성을 읽지 않습니다. 허용 영역에서 마스킹된 하위 요소의 텍스트도 제외됩니다.
mask-user-input 민감한 폼 컨트롤의 텍스트와 표준 이름 지정 속성을 보호하며, 폼이 아닌 콘텐츠는 기존 동작을 유지합니다.
hidden 숨겨진 하위 트리에서의 클릭은 자동 Action을 생성하지 않습니다.

위에서 설명한 내장 속성 또는 actionNameAttribute로 명시적으로 지정된 이름은 애플리케이션이 적극적으로 제공한 비즈니스 메타데이터로 간주되며 mask 및 mask-user-input에서도 계속 사용할 수 있습니다. hidden 하위 트리에서는 여전히 자동 Action이 생성되지 않습니다. 이 스위치는 자동 수집된 Action 이름에만 영향을 주며, addAction()으로 전달된 이름은 애플리케이션이 직접 제어합니다.

Shadow DOM의 Action

RUM SDK는 개방형 Shadow DOM(mode: "open") 내부의 클릭 작업 자동 수집을 지원합니다.

  • 이벤트의 실제 클릭 요소를 기반으로 Action 이름과 Shadow 경계가 포함된 위치 정보를 생성합니다.
  • iframe의 JavaScript realm에서 생성된 후 ShadowRoot에 마운트된 요소(예: 무경계 마이크로 프런트엔드로 렌더링된 버튼)를 지원합니다.
  • 동일한 ShadowRoot 내의 aria-labelledby 연결 요소에서 이름을 가져오는 것을 지원합니다.
  • 단일 및 다중 중첩 개방형 ShadowRoot를 지원합니다.

Shadow DOM 경계를 넘는 경우 자동 Action 이름은 명시적 이름 지정 속성 또는 버튼, 링크, ARIA 등 명확한 의미를 가진 상호작용 요소만 사용하며, 임의의 텍스트 노드, 테이블 행, 카드 컨테이너의 집계 텍스트를 이름으로 사용하지 않습니다. 기본 상호작용 의미가 없는 사용자 지정 컨테이너의 경우 클릭 요소 또는 그 조상 요소에 data-guance-action-name을 추가하거나 actionNameAttribute로 사용자 지정 이름 지정 속성을 구성하세요.

<div data-guance-action-name="打开付款单" role="button">
  <!-- 결제 명세서 내용 -->
</div>

이 제한은 Shadow DOM 경계를 넘는 자동 Action 이름 지정에만 적용되며, 일반 DOM은 기존 이름 지정 정책을 유지합니다.

폐쇄형 Shadow DOM(mode: "closed")은 외부 스크립트에 내부 노드를 노출하지 않으므로 브라우저 이벤트에서 제공하는 Shadow Host 정보로만 수집할 수 있으며, 내부 요소의 이름과 위치 정보는 보장할 수 없습니다.

사용자 지정 Action

클릭으로 표현할 수 없는 비즈니스 작업은 addAction API를 사용하여 사용자 지정 Action을 생성하세요.

연동 확인

  1. 명확한 이름이 있는 버튼을 클릭합니다.
  2. 브라우저 Network에서 /v1/write/rum 전송 요청을 확인합니다.
  3. 해당 Web 애플리케이션의 Action 탐색기에서 Action 이름, 지속 시간, 연결된 Resource 및 Error 수를 확인합니다.

Action이 없으면 trackUserInteractions가 true인지, 현재 Session이 샘플링에 포함되는지, 클릭 후 귀속 가능한 페이지 활동이 발생했는지 순서대로 확인합니다.

문서 평가

이 페이지가 도움이 되었나요?