JS

최근 업데이트 2026. 10. 03.

최신 버전: v1.3.0

업데이트 시간: 2026-07-24

리소스 다운로드: 다운로드

1. 개요

AE 4.4 버전부터 운영 모듈에 구성 센터 기능이 출시되었습니다. AE 백엔드에서 기능 파라미터 구성을 추가하고 클라이언트 SDK를 통해 App으로 가져와, 플레이어와의 상호 작용 콘텐츠를 세밀하게 맞춤 설정할 수 있습니다.

이 문서에서는 클라이언트 SDK의 통합 과정을 소개합니다. 클라이언트 측에서는 ThinkingData SDK와의 상호 작용만 고려하면 되며, AE 백엔드의 작업 세부 사항은 신경 쓸 필요가 없습니다.

2. 통합

2.1 SDK 수동 통합

구성 센터에는 다음 ThinkingData SDK가 필요합니다.

SDK 이름	소개	버전 요구 사항
TDAnalytics	데이터 수집 및 처리	>= 2.1.0
TDRemoteconfig	AE 백엔드의 설정 정보 가져오기	>= 1.1.0
TDCore	통합 초기화 기능 제공	>= 1.1.0

1. 페이지 상단의 리소스 다운로드 링크를 클릭하여 SDK를 다운로드하고 압축을 해제합니다
2. tdcore.umd.min.js, thinkingdata.umd.min.js, tdremoteconfig.umd.min.js를 프로젝트의 같은 디렉터리로 드래그합니다

3. 초기화

현재 통합 방식으로 전환한 후에는 SDK 초기화에 TDApp 인스턴스를 사용하고, 그 외 데이터 수집 및 전송에는 window.thinkingdata 인스턴스를 사용합니다.

<script src="./thinkingdata.umd.min.js"></script>
<script src="./tdcore.umd.min.js"></script>
<script src="./tdremoteconfig.umd.min.js"></script>
TDApp.init({
   appId: "AppId",
   serverUrl:"ServerUrl",
   enableLog:true
 });

4. 사용

4.1 데이터 구조 예시

"configId" : {
    "templateId" : [
        {
         "#strategy_id" : "f712dff93afb1e79caefdf094bda4ba2",
          "paramater_x" : "1111",
          "#ops_receipt_properties" : {}
        }
    ],
    "#custom_params" : {

    }
}

참고:

configId: 운영 백엔드의 구성 센터 모듈에서 생성한 구성 항목 ID로, 비즈니스 모듈 정보를 식별하는 데 사용됩니다. 구성 항목에 대한 설명은 구성 항목을 참고하십시오

templateId: 비즈니스에서 구성 항목 아래에 추가한 템플릿 ID로, 구체적인 기능 모듈 정보를 식별하는 데 사용됩니다. 구성 템플릿에 대한 설명은 구성 템플릿을 참고하십시오

#strategy_id: 전략의 고유 ID로, 전략 라이프사이클 관리에 사용됩니다. 구성 전략에 대한 설명은 구성 전략을 참고하십시오

paramater_x: 구성 템플릿 파라미터로, 기능 모듈에 필요한 구성 파라미터에 해당합니다

#ops_receipt_properties: 이벤트 회수 통계에 사용됩니다. 전략 효과를 자동으로 집계해야 하는 경우(아직 미지원) 회수 이벤트에 이 속성을 포함해야 합니다

#custom_params: 클라이언트 구성 채널의 커스텀 파라미터로, 클라이언트로 전달할 유저 속성 정보를 정의할 수 있습니다.

4.2 로컬 기본값 설정

TDRemoteConfig SDK에서 구성 항목의 기본값을 설정할 수 있습니다. AE 서버에 구성 항목이 추가되지 않았거나 로컬에서 원격 값을 가져오지 못한 경우 SDK는 로컬 기본값을 가져옵니다.

형식

로컬 기본값의 구조는 다음 형식을 따라야 합니다:

{
    "configId": {
        "templateId": [
            { 
              "paramater_x" : ""
            }
        ]
    }
}

직접 설정

TDRemoteConfig.setDefaultValues({
    "configId":{
        "templateId":{
            "paramater_x":""
        }
    }
});

기본값 비우기

TDRemoteConfig.clearDefaultValues()

4.3 값 가져오기

구성 항목 아래에서 이미 배포되어 활성화된 특정 유형의 전략 콘텐츠를 가져옵니다:

let array = TDRemoteConfig.getData().get("configId").get("templateId").arrayValue();

참고:

configId: 운영 구성 센터에서 설정한 구성 항목 ID입니다. 구성 항목에 대한 설명은 구성 항목을 참고하십시오

templateId: 운영 구성 센터의 구성 항목 아래에서 설정한 템플릿 ID입니다. 구성 템플릿에 대한 설명은 구성 템플릿을 참고하십시오

값 가져오기 규칙

특정 key의 값을 가져오는 과정:

• 해당 key에 대응하는 원격 구성 값을 우선 가져옵니다
• 원격에 해당 key가 구성되어 있지 않으면 해당 key의 로컬 기본값을 찾습니다
• 로컬 기본값에도 해당 key가 없으면 빈 값을 반환합니다.

4.4 업데이트 리스닝

SDK를 초기화하기 전에 구성 가져오기 성공 알림 리스너를 추가합니다

TDRemoteConfig.addConfigFetchListener((status)=>{

});

알림에 포함되는 파라미터

팁

알림에는 기본적으로 이번 요청과 지난 요청 사이에 효력 일시 중지(suspend), 강제 비활성화(force_offline)로 변경된 전략 상태가 포함되며, 비즈니스 요구에 따라 사용할 수 있습니다. 사용할 필요가 없으면 무시해도 됩니다.

다음 방법으로 알림 파라미터를 가져옵니다

let map = statusData["strategy_status_map"];

kTDRemoteConfigStrategyStatusMap에 해당하는 value의 구조는 다음과 같으며, 구성 항목 템플릿에서 전략 id가 20241209인 전략의 상태를 나타냅니다.

{
  "configId" : {
    "templateId" : {
      "20241209" : "suspend"
    }
  }
}

5. 테스트 발송

연동의 사용 가능 여부와 구성 전략의 유효성을 빠르게 검증할 수 있도록 SDK는 테스트 모드를 지원합니다.

TDApp.init({
   appId: "AppId",
   serverUrl:"ServerUrl",
   enableLog:true,
   mode:"debug"
 });

클라이언트에서 debug 모드를 활성화하면 5s마다 테스트 전략을 가져옵니다. AE 운영 모듈에서 템플릿 테스트 또는 전략 테스트를 생성할 수 있으며, 구성 가져오기를 기다리는 동안 프런트엔드 페이지의 진행 노드를 확인할 수 있습니다.

구성 템플릿 문서의 클라이언트 테스트 발송 부분을 참고하십시오.

클라이언트 SDK 테스트 발송에는 테스트 디바이스가 필요합니다. 테스트 디바이스 목록에서 테스트 디바이스를 선택하거나 추가할 수 있습니다.