사용자 화면 추적

📘
React Native에서의 화면 이동은 아래 React Native 개발자 문서를 참고해주세요.

React Native: Navigating Between Screens

React Navigation: Screen tracking for analytics

React Native는 기본적으로 단일 Activity/ViewController 구조를 사용하므로, 자동으로 화면 정보를 수집하기 어렵습니다.

$page_view 및 $engagement 이벤트를 정상적으로 수집하려면, 화면이 변경될 때마다 setCurrentScreen 메소드를 직접 호출해야 합니다.

setCurrentScreen

React Native SDK 3.30.0 이상 버전에서 지원하는 기능입니다.

setCurrentScreen(screen) 메소드로 화면을 추적합니다.

화면 추적의 최소 단위 시간은 1초 입니다.
1초 이내에 변경된 페이지의 $engagement 는 측정되지 않습니다.

파라미터	타입	필수	설명
name	`string`	필수	현재 화면의 명입니다.
screenClass	`string`	필수	별도의 클래스 명을 남기지 않을 경우 name과 동일한 값을 기입하면 됩니다.

🚧
동일 화면에 대한 화면 추적은 할 수 없습니다.
이전 화면과 동일한(name과 screenClass가 모두 동일한) Screen으로 setCurrentScreen을 호출한 경우 화면 전환이 되지 않은 것으로 인식되어 아무런 동직을 하지 않습니다.

$page_view, $engagement가 호출되지 않습니다.

예시

hackleClient.setCurrentScreen({
    name: screenName,
    screenClass: className,
});

import * as React from 'react';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createInstance } from '@hackler/react-native-sdk';

export const hackleClient = createInstance('YOUR_SDK_KEY');

export default function App() {
  const navigationRef = useNavigationContainerRef();
  const routeNameRef = React.useRef<string | undefined>();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        const routeName = navigationRef.current?.getCurrentRoute()?.name;
        routeNameRef.current = routeName;

        if (initialRouteName) {
          hackleClient.setCurrentScreen({ name: routeName, screenClass: routeName });
        }
      }}
      onStateChange={() => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current?.getCurrentRoute()?.name;

        if (currentRouteName && previousRouteName !== currentRouteName) {
          hackleClient.setCurrentScreen({ name: currentRouteName, screenClass: currentRouteName });
        }

        routeNameRef.current = currentRouteName;
      }}
    >
      {/* Navigator 구성 */}
    </NavigationContainer>
  );
}

속성 (Property)

핵클 SDK는 이벤트(Event) 객체에 속성을 추가할 수 있도록 지원합니다.

이벤트 객체에 추가 가능한 속성 개수는 최대 64개입니다.

구분	타입	제약사항
속성 명(key)	`string`	글자수 제한은 128자입니다. (128 characters) 대소문자를 구분하지 않습니다. 예를 들어 amount와 AMOUNT는 같은 키로 인식합니다.
속성 값(value)	`boolean`, `string`, `number`, `array`	string 타입인 경우 글자수 제한은 1024자입니다. (1024 characters) number 타입인 경우 정수 최대 15자리, 소수점 최대 6자리를 지원합니다.

예시

hackleClient.setCurrentScreen({
    name: screenName,
    screenClass: className,
    properties: {
        productId: "12345",
        category: "Electronics",
        price: 99000,
        inStock: true,
    },
});

automaticScreenTracking 비활성화

SDK에서는 기본적으로 automaticScreenTracking이 활성화되어 있습니다.
Activity/ViewController 단위의 자동 화면 정보 수집을 원하지 않는 경우 automaticScreenTracking를 비활성화 해야 합니다.

SDK를 초기화 할 때 automaticScreenTracking을 설정할 수 있습니다.

❗️
automaticScreenTracking이 활성화 된 상태에서 setCurrentScreen를 통해 수동으로 화면 수집을 하는 경우, $page_view와 $engagement가 과수집 되거나 의도하지 않은 속성으로 수집될 수 있습니다.
수동으로 화면 정보를 수집하는 경우 automaticScreenTracking 비활성화를 추천합니다.

Example

import { HackleApp } from '@hackler/react-native-sdk';

export const hackleClient = createInstance('YOUR_SDK_KEY', {
  automaticScreenTracking: false,
});

Updated about 10 hours ago