이벤트 및 메트릭 정의
이벤트 트리거
- Backend 추적
  - 추가 속성
  - 컨트롤러 및 API 헬퍼
- Frontend 추적

내부 이벤트 추적을 위한 빠른 시작

GitLab은 더 효율적이고 확장 가능하며 통합된 추적 API를 제공하기 위해 기존의 RedisHLL 및 Snowplow 추적을 폐기하고 있습니다. 대신 새로운 track_event (Backend) 및 trackEvent(Frontend) 메소드를 구현하고 있습니다. 이 방식으로 RedisHLL 카운터를 업데이트하고 기존 구현에 신경쓰지 않고 Snowplow 이벤트를 전송할 수 있습니다.

내부 이벤트 추적을 코드에 도입하기 위해 다음과 같은 세 가지 작업을 수행해야 합니다.

이벤트 정의
하나 이상의 메트릭 정의
이벤트 트리거

이벤트 및 메트릭 정의

이벤트 및/또는 메트릭 정의를 생성하려면 gitlab 디렉토리의 internal_events 생성기를 사용하세요:

ruby scripts/internal_events/cli.rb

이 CLI는 특정 사용 사례를 기반으로 올바른 정의 파일을 생성한 다음, 계기 및 테스트를 위한 코드 예제를 제공합니다.

이벤트 트리거

이벤트를 트리거하여 메트릭을 업데이트 하는 것은 Backend 및 Frontend에서 약간 다릅니다. 아래 관련 섹션을 참조하세요.

Backend 추적

내부 이벤트를 사용한 Backend Instrumentation에 관한 비디오를 시청하세요.

이벤트를 트리거하려면, 원하는 인수와 함께 Gitlab::InternalEventsTracking 모듈에서 track_internal_event 메소드를 호출하세요:

include Gitlab::InternalEventsTracking

track_internal_event(
  "i_code_review_user_apply_suggestion",
  user: user,
  namespace: namespace,
  project: project
)

이 메소드는 자동으로 이벤트 i_code_review_user_apply_suggestion와 관련된 모든 RedisHLL 메트릭을 증가시키고, 해당되는 명명된 인수와 표준 컨텍스트 (SaaS 전용)를 가진 Snowplow 이벤트를 전송합니다. 또한, 이벤트를 트리거하는 클래스의 이름이 Snowplow 이벤트의 category 속성에 저장됩니다.

unique: project.id와 같은 unique 속성이 있는 메트릭을 정의한 경우 project 인수를 제공해야 합니다.

가능한 많은 수의 user, namespace, 및 project를 채우는 것이 장려됩니다. 이는 데이터 품질을 높이고 미래에 메트릭을 정의하는 것을 더 쉽게 만듭니다.

project만 제공하고 namespace는 제공하지 않은 경우, project.namespace가 이벤트의 namespace로 사용됩니다.

일부 경우에는 category를 수동으로 지정하거나 전혀 제공하지 않을 수 있습니다. 그런 경우, 모듈을 사용하는 대신 InternalEvents.track_event 메소드를 직접 호출할 수 있습니다.

추가 속성

추적하는 동안 추가 속성을 전달할 수 있습니다. 주어진 이벤트와 관련된 추가 데이터를 저장하는 데 사용될 수 있습니다. 하나의 이벤트에 대해 최대 세 개의 추가 속성을 label (문자열), property (문자열), 및 value(숫자) 키와 함께 보낼 수 있습니다.

추가 속성은 additional_properties 해시를 #track_event 호출에 포함하여 전달됩니다:

Gitlab::InternalEvents.track_event(
  "i_code_review_user_apply_suggestion",
  user: user,
  additional_properties: {
    label: 'admin',
    value: 20
  }
)

컨트롤러 및 API 헬퍼

컨트롤러에는 ProductAnalyticsTracking이라는 도우미 모듈이 있어 특정 컨트롤러 작업에 대한 내부 이벤트를 추적하기 위해 #track_internal_event를 호출할 수 있습니다:

class Projects::PipelinesController < Projects::ApplicationController
  include ProductAnalyticsTracking

  track_internal_event :charts, name: 'p_analytics_ci_cd_pipelines', conditions: -> { should_track_ci_cd_pipelines? }

  def charts
    ...
  end

  private

  def should_track_ci_cd_pipelines?
    params[:chart].blank? || params[:chart] == 'pipelines'
  end
end

이 도우미가 이벤트를 위해 현재 프로젝트 및 네임스페이스를 가져올 수 있도록 컨트롤러 본문에 이 두 가지 메소드를 추가해야 합니다:

  private

  def tracking_namespace_source
    project.namespace
  end

  def tracking_project_source
    project
  end

또한, API 헬퍼가 있습니다:

track_event(
  event_name,
  user: current_user,
  namespace_id: namespace_id,
  project_id: project_id
)

Frontend 추적

모든 전면 추적 호출은 현재 페이지의 컨텍스트에서 user.id, namespace.id, 및 project.id 값을 자동으로 전달합니다.

extra, context, label, property, 및 value와 같은 추가 속성을 전달해야 하는 경우 deprected snowplow implementation을 사용할 수 있습니다. 이 경우, 내부 이벤트에 대한 피드백 이슈에서 특정 사용 사례에 대해 알려주세요.

Vue 컴포넌트

Vue 컴포넌트에서는 Vue mixin을 사용하여 추적을 할 수 있습니다.

Vue 컴포넌트 추적을 구현하려면:

InternalEvents 라이브러리를 가져와서 mixin 메소드를 호출합니다:

import { InternalEvents } from '~/tracking';
const trackingMixin = InternalEvents.mixin();

컴포넌트에서 mixin을 사용합니다:

export default {
  mixins: [trackingMixin],

  data() {
    return {
      expanded: false,
    };
  },
};

trackEvent 메소드를 호출합니다. 추적 옵션은 두 번째 매개변수로 전달될 수 있습니다:

this.trackEvent('i_code_review_user_apply_suggestion');

또는 템플릿에서 trackEvent 메소드를 사용할 수 있습니다:

<template>
  <div>
    <button data-testid="toggle" @click="toggle">토글</button>

    <div v-if="expanded">
      <p>Hello world!</p>
      <button @click="trackEvent('i_code_review_user_apply_suggestion')">다른 이벤트 추적</button>
    </div>
  </div>
</template>

원시 자바스크립트

임의의 프론트엔드 자바스크립트 코드에서 이벤트를 직접 추적하기 위해, 원시 자바스크립트용 모듈이 제공됩니다. 이것은 mixin을 활용할 수 없는 컴포넌트 컨텍스트 외부에서 사용할 수 있습니다.

import { InternalEvents } from '~/tracking';
InternalEvents.trackEvent('i_code_review_user_apply_suggestion');

추가 속성

이벤트 추적 시 추가 속성을 전달할 수 있습니다. 주어진 이벤트와 관련된 추가 데이터를 저장하는 데 사용될 수 있습니다. label (문자열) 키, property (문자열) 및 value (숫자)와 함께 최대 세 개의 추가 속성을 전송할 수 있습니다.

Vue Mixin의 경우:

   this.trackEvent('i_code_review_user_apply_suggestion', undefined, {
    label: 'push_event',
    property: 'golang',
    value: 20
   });

원시 자바스크립트의 경우:

   InternalEvents.trackEvent('i_code_review_user_apply_suggestion', undefined, {
    label: 'admin',
    property: 'system',
    value: 20
   });

Data-track 속성

이 속성을 사용하면 버튼에 대한 GitLab 내부 이벤트를 추적하려면 클릭 핸들러에 JavaScript 코드를 작성할 필요가 없습니다. 대신, 이벤트 값을 포함한 data-event-tracking 속성을 추가하기만 하면 됩니다. 이는 HAML 뷰에서도 사용할 수 있습니다.

  <gl-button
    data-event-tracking="i_analytics_dev_ops_adoption"
  >
   클릭
  </gl-button>

Haml

= render Pajamas::ButtonComponent.new(button_options: { class: 'js-settings-toggle',  data: { event_tracking: 'action' }}) do

렌더링된 내부 이벤트

가끔은 컴포넌트가 렌더링되거나 로드될 때 내부 이벤트를 전송하고 싶을 수 있습니다. 이러한 경우 data-event-tracking-load="true" 속성을 추가할 수 있습니다:

= render Pajamas::ButtonComponent.new(button_options: { data: { event_tracking_load: 'true', event_tracking: 'i_devops' } }) do
        = _("새 프로젝트")

내부 이벤트 추적을 위한 빠른 시작

이벤트 및 메트릭 정의

이벤트 트리거

Backend 추적

추가 속성

컨트롤러 및 API 헬퍼

Frontend 추적

Vue 컴포넌트

원시 자바스크립트

추가 속성

Data-track 속성

Haml

렌더링된 내부 이벤트

도움말

기능 사용 가능성과 제품 평가판

도움받기