React Native 플러그인 연동

1. 리액트 플러그인 설치
1.1 플러그인 다운로드
터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.
npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git
1.2 플러그인 설치 확인
프로젝트에 플러그인이 정상 다운로드되면 node_modules 폴더 아래 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다. (폴더경로 : 프로젝트폴더 > node_modules > DotReactNativeBridge 폴더 depth 확인 )
​
​
2. Android 설정
앱에 SDK 추가
android프로젝트에서 가장 상위에 있는 build.gradle에 아래와 같이 와이즈트래커의 maven repository 주소를 추가합니다. 
​⚠
파인더를 기준으로 봤을 때  app폴더 하위에도 build.gradle이 존재하여, 해당 build.gradle 에 작성하는 부분이 아님을  꼭 의하시기 바랍니다. 
왼쪽: 폴더 기준  /  오른쪽 : 안드로이드 프로젝트 기준
폴더의 위치를 찾으셨다면, 해당 파일에서 검색을 통해 allprojects 라는 단어를 찾습니다. (혹은 파일의 가장 하위 부분에 존재하여, 스크롤 하단으로 이동) allprojects{ }를 찾았다면, repositories{ } 안에 아래 코드와 같이 와이즈트래커 repository url 을 추가합니다.
저장소가 JFrog에서 Github으로 변경되었습니다. 
이에따라 JFrog를 이용하는 방식은 2023년 9월까지만 제공되며, 이후부터는 아래 Github Package 이용하는 방식으로 필수 변경이 필요합니다.
(기존 JFrog에서 사용되던 라이브러리와 동일한 라이브러리가 포함되어있습니다)
앱에 SDK 추가 (JFrog Artifactory 이용) - 23년 9월 까지만 제공
build.gradle(root)
allprojects {
    repositories {
        google()
        mavenCentral()
        /* sdk repository url 추가 */ 
        maven { url 'https://wisetracker.jfrog.io/artifactory/wisetracker-gradle-release-local' }
    }
}
...
앱에 SDK 추가 (Github Package 이용)
gradle(root)
allprojects {
    repositories {
        google()
        mavenCentral()
        /* wisetracker sdk repository config */
        maven {
            def endPoint = "https://analytics.wisetracker.co.kr/console/android/sdk/github/credentials.do"
            url = uri(new URL(endPoint+'?name=URI').text)
            credentials {
                username = new URL(endPoint+'?name=USER').text
                password = new URL(endPoint+'?name=TOKEN').text
            }
        }
    }
}
​
다음으로 "app"모듈단위에 있는 build.gradle 파일에 아래와 같이 Wisetracker SDK를 추가해주세요. 먼저 SDK를  추가할 "app"모듈의 build.gradle의 위치는 다음과 같습니다. 
(폴더경로 : /프로젝트폴더/android/app/build.gradle)
왼쪽: 폴더 기준  /  오른쪽 : 안드로이드 프로젝트 기준
"app"모듈의 build.gradle 파일을 열었다면, dependencies 단어를 검색하여 해당 단어가 위치하는 곳으로 스크롤을 이동합니다. dependencies{ } 중괄호 안 하위 부분에 아래에 와이즈트래커 SDK를 추가합니다.
build.gradle(app모듈)
dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    ....
    // SDK
     implementation "com.sdk.wisetracker:base_module:latest.release"
     implementation "com.sdk.wisetracker:new_dot_module:latest.release"
}
​
AuthorizationKey 등록
AuthorizationKey를 등록할 수 있는 파일의 위치는 아래와 같습니다.
왼쪽: 폴더 기준  /  오른쪽 : 안드로이드 프로젝트 기준
프로젝트의 app/src/main/res/values/strings.xml 파일에 아래 코드를 추가합니다.
XML
<string-array name="dotAuthorizationKey">
    <item name="useMode">1</item>
    <item name="serviceNumber">xxxxx</item>  <!--서비스번호 변경 필수 -->
    <item name="expireDate">14</item>
    <item name="isDebug">false</item>
    <item name="isInstallRetention">true</item>
    <item name="isFingerPrint">true</item>
    <item name="accessToken"></item>
</string-array>
추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 
​와이즈트래커 대시보드에 로그인하여 설정 > 서비스설정 메뉴에서 '서비스번호' 항목에 기재된 숫자를 확인 후 복사하여 serviceNumber 값을 변경 해 주세요.
서비스번호 확인
HTTP 통신 허용
프로젝트의 Target API가 API Level 28 이상일 경우에 적용하는 설정입니다. 아래와 같이 HTTP 통신을 허용하는 두 가지 설정을 추가해주세요.
 ✔
 network_security_config.xml 설정은 경우에 따라 생략될 수 있으며, 필수설정은 아닙니다.
AndroidManifest.xml 설정
해당 파일의 경로는 다음과 같습니다. (android > app > src > main > AndroidMainfest.xml )
​
​
작성되어 있는 코드에, 아래 한 줄 짜리 networkSecurityConfig 코드를 복사하여 <application androidname = > 안에 복사하여 붙여넣기 하면 아래 최종 코드와 같은 모양이 됩니다.
android:networkSecurityConfig="@xml/network_security_config"
XML
<application androidname=".MainApplication"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:theme="@style/AppTheme"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:allowBackup="false"
    android:networkSecurityConfig="@xml/network_security_config" > <!-- API Level 28 이상일 경우 해당 라인 추가 --> 
    
app/res/xml/network_security_config.xml 설정
신규 설정의 경우
기존에 설정되어있는 경우
1.network_security_config.xml 파일을 생성합니다.
2.로컬 환경을 추가 한 후, xml 파일에 와이즈트래커 도메인을 추가 해 주세요. 
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <!-- 로컬에서 개발하는 경우에는 아래와 같이 로컬 개발환경을 추가해야 metro server와 통신할 수 있습니다 -->
        <domain includeSubdomains="true">localhost</domain>
        <!-- 와이즈트래커 도메인 추가 -->
        <domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>
    </domain-config>
</network-security-config>
3.trk.analytics.wisetracker.co.kr 도메인을 추가 해 주시면 와이즈트래커 SDK 통신이 가능해집니다. 
기존 network_security_config.xml 설정이 되어 있으셨다면,
<domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>
와이즈트래커 도메인을 '추가' 해주시면 와이즈트래커 SDK 통신이 가능합니다.
​🔽
 신규로 network_security_config.xml 파일을 생성할 경우 경로입니다. 
왼쪽: 폴더 기준  /  오른쪽 : 안드로이드 프로젝트 기준
초기화
Application을 상속받는 클래스가 아닌 Activity를 상속받는 기본 화면의 onCreate() 함수에 적용해 주세요.  Activity를 상속받는 클래스의 위치는 다음과 같습니다. (android > app > src > main > java > com > 프로젝트명 > MainActivity 클래스)
Java
Kotlin
import com.sdk.wisetracker.new_dot.open.DOT;
​
public class MainActivity extends ReactActivity {
​
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
    
        // SDK 호출
        DOT.initialization(this);
    }
}
import com.sdk.wisetracker.new_dot.open.DOT
​
class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    ...
    // SDK 호출
    DOT.initialization(this)
  }
}
Bridge파일 추가
마지막으로 bridge 함수들을 호출 할 수 있게 bridge 파일을 추가 합니다.
왼쪽은 현 페이지 상단에 기재된 플러그인 다운로드시 생긴 DotReactNativeBridge 폴더 하위에 있는 "kr"폴더의 위치이며 해당 kr 폴더를 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/android/app/src/main/java 경로에 복사한 "kr" 폴더를 붙여넣기 합니다.
왼쪽은 가장 상단에 있는 플러그인 설치시 추가 된 플러그인 파일 폴더 / 오른쪽은 프로젝트 폴더 경로
DotReactBridge 객체 NativeModules 등록
파일 추가 후 MainApplication.java 파일에 Wisetracker SDK BridgePackage를 추가 해 줍니다.
​
​
import kr.co.wisetracker.BridgePackage;
​
public class MainApplication extends Application implements ReactApplication {
    private final ReactNativeHost mReactNativeHost = new ReactNativeHostWrapper(
      this,
      new ReactNativeHost(this) {
      @Override
      public boolean getUseDeveloperSupport() {
        return BuildConfig.DEBUG;
      }
  
      @Override
      protected List<ReactPackage> getPackages() {
        @SuppressWarnings("UnnecessaryLocalVariable")
        List<ReactPackage> packages = new PackageList(this).getPackages();
  
        // Wisetracker SDK BridgePackage 추가
        packages.add(new BridgePackage());
  
        return packages;
      }
  
      @Override
      protected String getJSMainModuleName() { return "index"; }
    });
  }
Activity 감지를 위한 설정
화면(Activity)전환을 분석하기 위한 설정입니다. 사용하는 라우터의 location 정보가 바뀔때마다 onStartPage를 호출 해 주어야 합니다. 아래는 React Navigation 라이브러리를 사용할때의 예제입니다.
App.js
import React, {useEffect, useRef, useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';
// Wisetracker SDK
import {NativeModules} from ‘react-native’;
​
const App = () => {
​
const routeNameRef = useRef();
const navigationRef = useRef();
​
  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={async () => {
      const previousRouteName = routeNameRef.current;
      const currentRouteName = navigationRef.current.getCurrentRoute().name;
   
     /* Activity 감지를 위한 예제 코드 */
      NativeModules.DotReactBridge != null &&
        /*로케이션 정보가 바뀔때마다 onStartPage 호출*/
        (NativeModules.DotReactBridge.onStartPage(),    
        NativeModules.DotReactBridge.logScreen(
          JSON.stringify({
            event: 'MainPage',            /*페이지 분석을 위한 custom eventName*/
            page_id: currentRouteName,    /*location 정보*/
          }),
        ));
    }}>
  <Stack.Navigator>
    <Stack.Screen
      name="Main"
      component={Main}
    />
    <Stack.Screen
      name="Login"
      component={Login}
    />
  </Stack.Navigator>
</NavigationContainer>
  );
};
​
export default App;
​
​
Facebook 광고 성과 측정
​Facebook App Ads 의 퍼포먼스를 와이즈트래커로 측정하는데 필요한 설정으로, Facebook SDK가 앱에 추가되어 있는 경우에만 설정을 적용할 수 있습니다.
아래 페이지로 이동하여 Android Facebook 광고 성과 측정을 위한 코드를 추가 해 주세요.
SDK 삽입
Wisetracker Docs
Android Facebook 광고성과측정 
이벤트 설정
​✅
초기화와 bridge 폴더 복사 이후에 화면전환 또는 이벤트 분석을 위한 적용 방법은 sample소스를 다운받으신 후 확인이 가능합니다.
[추가] 고급 설정
고급 설정의 경우, 해당 링크를 참고해 주시기 바랍니다.
설정 확인 
모든 설정 완료 후 log를 통해 데이터 수집을 확인 합니다. 
[WiseLog]: RetrofitLogInterceptor#intercept(33)#DEBUG_MESSAGE#SERVER RESPONSE -> 
{"msg":"Data Receive Success","code":"RES001","visitNewServerTime":1657275610434,
"attributedInfo":{"linkId":{},"install":{},"pushMessage":{},"assist":[],
"iosAd":{},"open":{},"abusing":{}}}
log에 해당 내용이 확인이 된다면 수신이 정상적으로 이루어졌으며, 와이즈트래커의 SDK를 호출할 준비가 완료되었습니다. 
3. iOS 설정
SDK 설치
Cocoapod 환경에서 SDK 다운로드 방법
XCode 프로젝트 중 Podfile 파일에 다음과 같이 SDK를 추가합니다
pod 'RW'
기존에 SDK를 한번 설치한 경우에는 설치할SDK 버전을 표시해야 하는 경우도 있습니다. 아래와 같이 설치할 SDK버전을 명시적으로 표시하면 됩니다.
pod 'RW', '~> 1.1.45'
Podfile 에 해당라인을 추가한 후 Terminal 프로그램을 실행하여 다음의 명령을 수행합니다
pod install
SDK 버전 업데이트의 경우 다음의 명령을 수행합니다.
pod update
정상적으로 설치가 되면 아래와 같은 폴더 구조를 확인할 수 있습니다.
​
​
SDK 설치 - Cocoapod 사용하지 않을 경우
SDK 파일을 URL에서 다운로드 합니다.
다운된 파일을 압축 해제하면 다음과 같은 파일이 확인 가능하고 이중 아래에 선택된 3개의 파일을 분석 대상 앱 프로젝트에 추가합니다.
프로젝트 선택후 마우스 우클릭, Add Files to 메뉴를 선택합니다.
​
​
앞에서 다운로드 받고, 압축 해제한 폴더에 들어가서 아래와 같이 추가 대상 파일을 선택하고, 화면 아래쪽 설정은 존재하는 모든 target에 포함되었는지 확인후 추가 하면 됩니다.
BuildSetting 에 아래와 같이 설정을 추가합니다.
xcode 가 12.3 이후 버전이고 빌드 과정에서 아래와 유사한 오류가 발생하는 경우가 있으며,
위의 경우에는 아래와 같이 설정을 하고, 빌드를 하면됩니다.
dotAuthorizationKey 등록
xcode프로젝트에서 info.plist 파일을 찾습니다. info.plist의 위치는 다음과 같습니다. 
​
​
info.plist 파일을 Open As Source Code 방식으로 오픈한 후, 아래 코드를 복사하여 info.plist의 가장 하단에 다음과 같은 위치에 붙여넣기 합니다. 
XML
<key>dotAuthorizationKey</key>
<dict>
    <key>serviceNumber</key>
    <string>xxxxx</string>
    <key>expireDate</key>
    <string>14</string>
    <key>isDebug</key>
    <string>true</string>
    <key>isInstallRetention</key>
    <string>true</string>
    <key>isFingerPrint</key>
    <string>true</string>
    <key>accessToken</key>
    <string></string>
    <key>useMode</key>
    <string>2</string>
</dict>
​
​
추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 
​와이즈트래커 대시보드에 로그인하여 설정 > 서비스설정 메뉴에서 '서비스번호' 항목에 기재된 숫자를 확인 후 복사하여 serviceNumber 값을 변경 해 주세요.
서비스번호 확인
HTTP 통신 허용
http통신을 허용하기 위해 NSAppTransportSecurity 를 아래와 같이 추가해야합니다.
이전과 마찬가지로 info.plist 파일을 Open As Source Code 방식으로 오픈한 후, NSAppTransportSecurity 를 검색합니다. 
<!-- HTTP 통신 허용 -->
<key>NSAllowsArbitraryLoads</key>
<true/>
위의 코드를 복사하여 NSExceptionDomains 위에 코드를 붙여넣기 합니다. 아래의 샘플 코드를 확인하여, 정확한 위치에 코드 추가가 이루어졌는지 확인합니다.
<key>NSAppTransportSecurity</key>
<dict>
	<!-- HTTP 통신 허용 -->
	<key>NSAllowsArbitraryLoads</key>
	<true/>
	<key>NSExceptionDomains</key>
	<dict>
		<key>localhost</key>
		<dict>
			<key>NSExceptionAllowsInsecureHTTPLoads</key>
			<true/>
		</dict>
	</dict>
</dict>
초기화
초기화 방법은 SceneDelegate 가 설정된 경우와 설정되지 않은 경우에 따라 달라집니다.
SceneDelegate를 사용하지 않으면 AppDelegate에서 초기화작업을 하고, 그렇지 않고 SceneDelegate를 사용하면 SceneDelegate에서 이 작업을 해야 합니다.
1. iOS13 미만 (SceneDelegate 없음)
AppDelegate 폴더의 위치는 다음과 같습니다.
​
​
AppDelegate 파일을 열어 didFinishLaunchingWithOptions 를 검색하여, didFinishLaunchingWithOptions 함수에 SDK를 Intialization하기 위한 코드를 다음과 같이 적용합니다. SDK가 정상적으로 초기화 되었을 때 아래와 같은 기본 분석이 가능합니다.
앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
swift
Objective-C
import DOT
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // S: Wisetracker SDK init
  DOT.initialization(launchOptions, application: application)
  #if DEBUG
    DOT.checkDebugMode(true)
  #else
    DOT.checkDebugMode(false)
  #endif
  // E: Wisetracker SDK init
}
#import <DOT/DOT.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  
  RCTAppSetupPrepareApp(application);
​
  // S: Wisetracker SDK init
  [DOT initialization:launchOptions application:application];
  #ifdef DEBUG
    [DOT checkDebugMode:true];
  #else
    [DOT checkDebugMode:false];
  #endif
  // E: Wisetracker SDK init
  
  return YES;
}
위의 코드를 추가한 후 아래의 샘플코드를 통해 맞는 위치에 코드 적용이 이루어 졌는지 확인 합니다.
wisetracker SDK init sample 코드
DOT가 사용되는 곳에서는 파일 최상단에 #import <DOT/DOT.h>을 통해 import가 필요합니다. 이하 적용 예시에서는 import하는 부분이 생략되어 있습니다.
2. iOS13 이상 (SceneDelegate 사용)
👉 iOS13 이상이어도 SceneDelegate를 사용하지 않을 수도 있어요, 이   때에는 위의 SceneDelegate를 사용하지 않는 경우를 참조하세요.
SceneDelegate의 sceneDidBecomeActive함수에 SDK를 Initialization하기 위한 코드를 다음과 같이 적용합니다. SDK가 정상적으로 초기화 되었을 때 아래와 같은 기본 분석이 가능합니다.
앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
swift
Objective-C
import DOT
​
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
...
  func sceneDidBecomeActive(_ scene: UIScene) {
    // Start : Wisetracker SDK 호출
    DOT.initialization(nil, application: UIApplication.shared)
    #if DEBUG
      DOT.checkDebugMode(true)
    #else
      DOT.checkDebugMode(false)
    #endif
    // E: Wisetracker SDK init
  }
...
}
#import <DOT/DOT.h>
​
@implementation SceneDelegate
...
- (void)sceneDidBecomeActive:(UIScene *)scene {
  // S: Wisetracker SDK init
  [DOT initialization:nil application:[UIApplication sharedApplication]];
  #ifdef DEBUG
    [DOT checkDebugMode:true];
  #else
    [DOT checkDebugMode:false];
  #endif
  // E: Wisetracker SDK init
}
...
@end
Bridge 파일 추가 
마지막으로 bridge 함수들을 호출 할 수 있게 bridge 파일을 추가 합니다.
왼쪽은 처음 플러그인 다운로드시 생긴 node_modules/DotReactNativeBridge/ios 폴더 하위에 있는 bridge파일의 위치이며 파일을 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/ios/프로젝트명과 동일한 폴더 경로에 복사한 두 개의 bridge 파일을 붙여넣습니다.
왼쪽은 플러그인 설치시 추가 된 플러그인 파일 폴더 / 오른쪽은 프로젝트 폴더 경로
Bridge 파일 추가 후 AppDelegate.mm 파일에 DotReactBridge *dotReactBridge를 추가 해 줍니다.
Objective-C
#import "DotReactBridge.h"
​
- (NSArray<id<RCTBridgeModule>> *)extraModulesForBridge:(RCTBridge *)bridge
{
  // If you'd like to export some custom RCTBridgeModules, add them here!
  DotReactBridge *dotReactBridge = [DotReactBridge alloc];
  return @[dotReactBridge]; 
}
Facebook 광고 성과 측정
​Facebook App Ads 의 퍼포먼스를 와이즈트래커로 측정하는데 필요한 설정으로, Facebook SDK가 앱에 추가되어 있는 경우에만 설정을 적용할 수 있습니다. 자세한 사항은 React Native library 를 참고 해 주세요.
비즈니스 인증
​Facebook Developer 사이트의 앱설정-기본설정에서 비즈니스 인증 여부를 확인 해 주세요. 비즈니스 인증이 완료되지 않았을 경우, 리퍼러 정보가 수신되지 않아, facebook 광고 성과에 대한 측정이 어렵습니다.
FBSDK 다운로드 방법
1.Facebook SDK 설치
yarn 으로 facebook SDK 설치 :
yarn add react-native-fbsdk-next
npm 으로 설치 :
npm install --save react-native-fbsdk-next
2.Info.plist 설정
info.plist 를 source code 로 오픈하여, <dict>...</dict>사이에 Facebook 개발자 앱 대시보드에서 확인하여 APP-ID 및 TOKEN 등 필수변경 항목을 꼭 체크하여 변경 해 주세요.
Info.plist
<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fbAPP-ID</string>      >>>>> 필수 변경!
  </array>
  </dict>
</array>
<key>FacebookAdvertiserIDCollectionEnabled</key>
<true/>
<key>FacebookAppID</key>
<string>APP-ID</string>            >>>>> 필수 변경!
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>      >>>>> 필수 변경!
<key>FacebookDisplayName</key>
<string>APP-NAME</string>          >>>>> 필수 변경!
3.Facebook SDK 초기화
AppDelegate.mm
#import <FBSDKCoreKit/FBSDKCoreKit-swift.h>
#import <React/RCTLinkingManager.h>
​
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions{
   ...
   ...
  // Facebook sdk 초기화
  // *** 중요! Facebook 지연 앱 링크가 작동하려면 Facebook 앱과 앱 모두 ATT(앱 추적 투명성) 권한이 부여되어야 함. ***
 [[FBSDKApplicationDelegate sharedInstance] application:application
                        didFinishLaunchingWithOptions:launchOptions];
 [FBSDKApplicationDelegate.sharedInstance initializeSDK];
    ...
    ...
  // #############################################################
  // S: Wisetracker SDK init
  [DOT initialization:launchOptions application:application];
#ifdef DEBUG
  [DOT checkDebugMode:true];
#else
  [DOT checkDebugMode:false];
#endif
  // E: Wisetracker SDK init
  // #############################################################
  ...
  ...
  return YES;
}
​
​
4.Facebook 지연 앱 링크가 작동하기 위해 ATT(앱 추적 투명성) 권한 설정
Facebook 지연된 앱링크 동작을 위해서는 SDK를 적용하고있는 앱과, Facebook 앱이 사용자의 활동을 추적하도록 허용되어야 합니다. Facebook referrer 수신을 위해 Facebook 앱과 귀하의 앱 모두에서 ATT를 활성화 해 주세요.
5.FBSDK 로부터 Install Referrer를 수신하고, SDK에 전달하는 방법
사용자가 Facebook에 노출된 광고를 클릭하고 앱을 설치한 경우 설치된 앱에서는 FBSDK를 통해서 AppLinkData를 수신받을 수 있습니다. 
4. HybridApp을 위한 추가 설정
Hybrid App인 경우에만 적용하면 되는 설정으로, WebView로 표시한 웹페이지 내에서 발생하는 이벤트를 측정하기 위해 필요합니다. 웹뷰로 불러온 페이지를 감지할 수 있도록 webview 컴포넌트에 다음과 같이  onLoadStart 와 onMessage 를 설정 해 줍니다.
ReactNative Webview
import {WebView} from 'react-native-webview';
​
onLoadStart={(syntheticEvent)=>{ 
	if( NativeModules.DotReactBridge != null ){  
	/**
	웹 페이지가 로딩 시작될때, onStartPage 호출 
	**/
	NativeModules.DotReactBridge.onStartPage(); 
	} 
}}   
​
​
onMessage={(event) => { 
	if( event.nativeEvent.data !== undefined ){
	// 데이터 수신은 string으로 전달되므로 json으로 변환 
	let webData = JSON.parse(event.nativeEvent.data);
		if( webData.method ){
			switch(webData.method){
			
			// setUser call
			case "setUser" : 
			NativeModules.DotReactBridge.setUser(JSON.stringify(webData.data)); 	
			break;
			
			// logEvent call 
			case "logEvent" : 
			NativeModules.DotReactBridge.logEvent(JSON.stringify(webData.data)); 	
			break;
			
			// logScreen call 
			case "logScreen" : 
			NativeModules.DotReactBridge.logScreen(JSON.stringify(webData.data));
			break;
			
			// logPurchase	
			case "logPurchase" : 
			NativeModules.DotReactBridge.logPurchase(JSON.stringify(webData.data));
			break;
			} 
		}  
	} 
}} 	
이벤트 설정
​✅
초기화와 bridge 폴더 복사 이후에 화면전환 또는 이벤트 분석을 위한 적용 방법은 sample소스를 다운받으신 후 확인이 가능합니다. 
[추가] 고급 설정
고급 설정의 경우, 해당 링크를 참고해 주시기 바랍니다.
설정 확인
모든 설정 완료 후 xcode의 console을 통해 log확인을 합니다. console 검색 시 아래 "RES001" 코드가 확인이 되신다면, 수신이 정상적으로 이루어졌으며, 와이즈트래커의 SDK를 호출할 준비가 완료되었습니다. 
code = RES001;
msg = "Data Receive Success";
​
5. SampleCode 제공
☑️ReactNative SDK 설정을 도와드리기위한 샘플코드가 제작되어 있습니다. 
해당 가이드 참고시 샘플 코드도 함께 참고 하신다면, SDK 적용을 수월하게 진행하실 수 있습니다.
GitHub - WisetrackerTechteam/SdkSampleSource
GitHub
[추가] iOS 14 개인정보방침 변경 관련 가이드 
iOS 14부터 IDFA를 획득하기 위해서는 사용자의 동의를 얻어야 합니다. 
info.plist파일에 NSUserTrackingUsageDescription 설정 추가
<key>NSUserTrackingUsageDescription</key>
<string>Your data will be used to deliver personalized ads to you.</string>
App Tracking Transparency 동의 System Alert 노출 & API 호출
IDFA 획득을 위해 앱 추적 투명성 동의 요청 System Alert(대화 상자)을 띄워야 합니다. 동의 요청 System Alert(대화 상자) 화면에 띄우려면 requestTrackingAuthorizationWithCompletionHandler:를 호출합니다. completionHandler에서 동의 시 SDK API를 호출하도록 위와 같이 구현하시면 됩니다.
Swift
Objective-C
import AppTrackingTransparency
import AdSupport
if #available(iOS 14, *) {
	ATTrackingManager.requestTrackingAuthorization { (AuthorizationStatus) in
		if(AuthorizationStatus == .authorized) {
			DOT.setIDFA(ASIdentifierManager.shared().advertisingIdentifier.uuidString)
		}
	}
} else {
	DOT.setATTAuthorizationStatus(3)
}
#import <AppTrackingTransparency/ATTrackingManager.h>
#import <AdSupport/AdSupport.h>
if (@available(iOS 14, *)) {
	[ATTrackingManager requestTrackingAuthorizationWithCompletionHandler:^(ATTrackingManagerAuthorizationStatus status) {
		if(status == ATTrackingManagerAuthorizationStatusAuthorized) {
			[DOT setIDFA:[[[ASIdentifierManager sharedManager] advertisingIdentifier] UUIDString]];
		}
	}];
} else {
	[DOT setATTAuthorizationStatus:3];
}
관련 공식 문서 https://developer.apple.com/app-store/user-privacy-and-data-use/​
개발 관련 공식 문서 https://developer.apple.com/documentation/apptrackingtransparency​
Last modified 5d ago