커스텀 View¶

RUM 브라우저 SDK는 기본적으로 사용자가 새 페이지를 방문하거나 단일 페이지 애플리케이션(SPA)의 URL이 변경될 때 자동으로 View를 생성합니다. 비즈니스에서 View의 경계, 이름 또는 URL을 제어해야 하는 경우 수동 View를 활성화할 수 있습니다.

수동 View 활성화¶

초기화 시 trackViewsManually: true로 설정합니다:

<script
  src="https://static.guance.com/browser-sdk/v3/dataflux-rum.js"
  type="text/javascript"
></script>
<script>
  window.DATAFLUX_RUM &&
    window.DATAFLUX_RUM.init({
      applicationId: "<APPLICATION_ID>",
      site: "<PUBLIC_OPENWAY_URL>",
      clientToken: "<CLIENT_TOKEN>",
      trackViewsManually: true,
    })
</script>

활성화되면 SDK는 더 이상 브라우저 URL을 기반으로 자동으로 View를 생성하지 않습니다. 애플리케이션은 첫 번째 페이지와 각 비즈니스 페이지 전환 시 startView()를 호출해야 합니다.

View 시작¶

이름만 지정하기:

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView({
    name: "product-detail",
  })

SDK 3.3.6부터는 View URL을 함께 지정할 수 있습니다:

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView({
    name: "/products/:id",
    url: "/products/42?source=campaign",
    context: {
      page_group: "product",
    },
  })

url은 절대 URL 또는 현재 페이지에 대한 상대 URL일 수 있습니다. SDK는 이 값을 사용하여 View의 url, url_path 및 query 컨텍스트를 생성합니다. 해석할 수 없는 경우 브라우저의 현재 URL로 대체됩니다.

startView()는 다음 매개변수를 지원합니다:

문자열 단축 표기법도 사용할 수 있습니다:

window.DATAFLUX_RUM &&
  window.DATAFLUX_RUM.startView("product-detail")

프레임워크 Router¶

React, Vue, Angular, Next.js 및 Nuxt 애플리케이션은 프론트엔드 프레임워크 플러그인을 사용하는 것이 좋습니다. Router 플러그인은 자동으로 수동 View를 처리하며, 라우트가 성공적으로 제출된 후 startView()를 호출합니다.

동일한 라우트 변경을 추적하기 위해 Router 플러그인과 비즈니스 코드의 startView()를 동시에 사용하지 마십시오. 그렇지 않으면 중복 View가 생성됩니다.

주의사항¶

1. trackViewsManually를 활성화한 후에는 첫 번째 View도 애플리케이션에서 시작해야 합니다.
2. View는 해당 비즈니스 페이지가 표시되기 시작할 때 시작되어야 하며, 리소스, 오류 및 작업이 이전 View에 포함되지 않도록 해야 합니다.
3. View 이름은 라우트 템플릿 또는 안정적인 비즈니스 이름을 사용해야 하며, 사용자 ID, 주문 번호와 같은 높은 카디널리티 값을 직접 사용하지 마십시오.
4. startView()를 단독으로 호출하면 페이지 이동이 트리거되지 않으며, RUM View 컨텍스트만 전환됩니다.