Skip to content

페이지 뷰 관련

jinsang edited this page Aug 29, 2023 · 1 revision

구성


페이지뷰(PageView) 수집 방법

  • App.tsx 또는 App root components에 SDK 초기화가 선행되어야 합니다.

    페이지뷰: 방문자가 페이지를 열어본 횟수를 말합니다.

  • 수집하고자 하는 앱 화면 컴포넌트의 useEffect 또는 useLayoutEffect 에 ACS.send(...) 를 구현합니다.
  • useCallback 을 응용해 버튼 액션등의 리스너에서도 ACS.send(...) 사용 가능합니다.
export default function Screen() {
  useLayoutEffect(() => {
    const params = ACParams.init(ACParams.TYPE.EVENT, '제품 화면')
    ACS.send(params)
      .then((response) => {
        if (response) {
          console.log('response: ' + JSON.stringify(response))
        }
        console.log(`success sdk send ${params.name}`)
      })
      .catch((err) => {
        if (err) {
          console.log('err: ' + JSON.stringify(err))
        }
      })
  }, [])
}

컴포넌트 생성 순서 주의

  • 컴포넌트 재사용을 위해 다양한 방법으로 화면을 구성하고 계실겁니다.
  • 예)
    • SDK 사용을 별도의 훅스를 만들어 사용하는 경우
    • 화면구성시 페이지뷰 API 를 사용하도록한 상황에서 하위 컴포넌트 구성시 제품노출, 로그인등 추가로 API를 사용하는 경우
  • component tree 생성시 하위 component SDK API 가 먼저 호출되는 경우
    • 예를들면 제품 노출 API가 먼저 호출되고 제품 노출 페이지뷰 API 가 늦게 호출되는 경우가 있을 수 있습니다.
    • 수정 제안
      • 상위 component 부터 하위 component 구성 순서로 SDK API를 호출 할 수 있도록 화면 구성을 수정합니다.
      • 하위 component SDK API 만 사용하도록 수정합니다.
      • useEffect 내부에서 SDK API 를 사용하도록 수정합니다.
    • 이해를 돕기위한 Demo 링크
  • React State 변수 변경에 따른 의도치 않게 SDK API가 반복 호출되는 경우
    • 수정 제안
      • 의도하신 경우가 아닌 경우 SDK API가 반복호출되지 않도록 수정 부탁드립니다.
      • 훅의 의존성 배열 관리시 의도와 다른부분이 있는지 확인 합니다.

API 가이드

send

  • 페이지 뷰(PageView) 정보를 전송합니다.

메서드

static send(value: ACParams, callback: (error?: object, result?: ACEResponseToCaller) => void): void;
static send(value: ACParams): Promise<ACEResponseToCaller>;

매개변수

  • ACParams.init(type: ParamType, value?: string): 이벤트 정보 전송에 사용되는 static 메서드
    • type: 이벤트 종류
      • 페이지 뷰의 경우: ACParams.TYPE.EVENT
    • value: 화면명
      • 예: 제품 화면