React Native 플러그인 연동

1. 리액트 플러그인 설치

1.1 플러그인 다운로드

터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.
1
npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git
Copied!

1.2 플러그인 설치 확인

프로젝트에 플러그인이 정상 다운로드되면 node_modules 폴더 아래 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다.

2. Android 설정

앱에 SDK 추가

프로젝트의 build.gradle ( root 파일 ) 에 아래와 같이 와이즈트래커의 maven repository 주소를 추가합니다.
gradle
1
allprojects {
2
repositories {
3
google()
4
mavenCentral()
5
/* sdk repository url 추가 */
6
maven { url 'https://wisetracker.jfrog.io/artifactory/wisetracker-gradle-release-local' }
7
}
8
}
Copied!
아래와 같은 오류 메시지가 보여지는 경우, "Gradle Scripts"의 "settings.properties"파일을 수정해야 합니다.
A problem occurred evaluating root project 'XXX'.
Build was configured to prefer settings repositories over project repositories but repository 'Google' was added by build file 'build.gradle'
Gradle "settings.gradle"
1
...
2
dependencyResolutionManagement {
3
4
// =====================
5
// 위와 같은 오류가 발생하면
6
// 아래 한 줄을 주석처리합니다.
7
// =====================
8
9
// repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
10
11
repositories {
12
google()
13
mavenCentral()
14
}
15
}
16
*/
17
...
Copied!
"app"모듈단위의 app/build.gradle 파일에 있는 dependencies에 아래와 같이 Wisetracker SDK를 추가해주세요.
gradle
1
dependencies {
2
implementation fileTree(dir: 'libs', include: ['*.jar'])
3
....
4
// SDK
5
implementation "com.sdk.wisetracker:base_module:1.0.39"
6
implementation "com.sdk.wisetracker:new_dot_module:1.0.29"
7
}
Copied!

AuthorizationKey 등록

프로젝트의 app/res/values/strings.xml 파일에 아래 코드를 추가합니다.
XML
1
<string-array name="dotAuthorizationKey">
2
<item name="useMode">1</item>
3
<item name="serviceNumber">xxxxx</item>
4
<item name="expireDate">14</item>
5
<item name="isDebug">false</item>
6
<item name="isInstallRetention">true</item>
7
<item name="isFingerPrint">true</item>
8
<item name="accessToken"></item>
9
</string-array>
Copied!
추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 와이즈트래커에 로그인하여 화면 상단의 Service 부분을 선택하면 앱 이름과 함께 올바른 Service Number 가 나타납니다. Service No. 옆의 숫자를 복사하여 serviceNumber의 value로 입력해주세요.

HTTP 통신 허용

프로젝트의 Target API가 API Level 28 이상일 경우에 적용하는 설정입니다. 아래와 같이 HTTP 통신을 허용하는 두 가지 설정을 추가해주세요.

AndroidManifest.xml 설정

XML
1
<!-- AndroidManifest.xml -->
2
<application
3
android:icon="@mipmap/ic_launcher"
4
android:label="@string/app_name"
5
android:networkSecurityConfig="@xml/network_security_config"
6
android:theme="@style/AppTheme">
Copied!

app/res/xml/network_security_config.xml 설정

  • 이 파일이 없으면 해당 위치에 새로 만들어주세요.
XML
1
<?xml version="1.0" encoding="utf-8"?>
2
<network-security-config>
3
<domain-config cleartextTrafficPermitted="true">
4
<domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>
5
</domain-config>
6
</network-security-config>
Copied!

초기화

Application을 상속받는 클래스가 아닌 Activity를 상속받는 기본 화면의 onCreate() 함수에 적용해 주세요.
Java
Kotlin
1
import com.sdk.wisetracker.new_dot.open.DOT;
2
3
public class MainActivity extends AppCompatActivity {
4
@Override
5
protected void onCreate(Bundle savedInstanceState) {
6
// SDK 호출
7
DOT.initialization(this);
8
}
9
}
Copied!
1
import com.sdk.wisetracker.new_dot.open.DOT
2
3
class MainActivity : AppCompatActivity() {
4
override fun onCreate(savedInstanceState: Bundle?) {
5
super.onCreate(savedInstanceState)
6
setContentView(R.layout.activity_main)
7
...
8
// SDK 호출
9
DOT.initialization(this)
10
}
11
}
Copied!

Activity 감지를 위한 설정 추가

화면(Activity) 전환을 분석하기 위한 설정입니다. onResume()onStartPage()호출을 추가해주세요.해주세요.
😄
Activity에서 화면을 구현하지 않고 Fragment를 이용하는 경우, ActiviryonResume()대신FragmentonResume()에 추가해주세요. ActivityonResume()에도 onStartPage()호출이 중첩되면 안돼요.
Java
Kotlin
1
@Override
2
protected void onResume() {
3
super.onResume();
4
DOT.onStartPage(this);
5
}
Copied!
1
override fun onResume() {
2
super.onResume()
3
...
4
// SDK 호출
5
DOT.onStartPage(this)
6
}
Copied!

[추가] 고급 설정

고급 설정의 경우, 해당 링크를 참고해 주시기 바랍니다.

3. iOS 설정

SDK 설치

Cocoapod 환경에서 SDK 다운로드 방법

XCode 프로젝트 파일중 Podfile 파일에 다음과 같이 SDK를 추가합니다
1
pod 'RW'
Copied!
기존에 SDK를 한번 설치한 경우에는 설치할SDK 버전을 표시해야 하는 경우도 있습니다. 아래와 같이 설치할 SDK버전을 명시적으로 표시하면 됩니다.
1
pod 'RW', '~> 1.1.14'
Copied!
Podfile 에 해당라인을 추가한 후 Terminal 프로그램을 실행하여 다음의 명령을 수행합니다
1
pod install
Copied!
SDK 버전 업데이트의 경우 다음의 명령을 수행합니다.
1
pod update
Copied!
정상적으로 설치가 되면 아래와 같은 폴더 구조를 확인할 수 있습니다.

SDK 설치 - Cocoapod 사용하지 않을 경우

SDK 파일을 URL에서 다운로드 합니다.
다운된 파일을 압축 해제하면 다음과 같은 파일이 확인 가능하고 이중 아래에 선택된 3개의 파일을 분석 대상 앱 프로젝트에 추가합니다.
프로젝트 선택후 마우스 우클릭, Add Files to 메뉴를 선택합니다.
앞에서 다운로드 받고, 압축 해제한 폴더에 들어가서 아래와 같이 추가 대상 파일을 선택하고, 화면 아래쪽 설정은 존재하는 모든 target에 포함되었는지 확인후 추가 하면 됩니다.
BuildSetting 에 아래와 같이 설정을 추가합니다.
xcode 가 12.3 이후 버전이고 빌드 과정에서 아래와 유사한 오류가 발생하는 경우가 있으며,
위의 경우에는 아래와 같이 설정을 하고, 빌드를 하면됩니다.

dotAuthorizationKey 등록

info.plist 파일을 Open As Source Code 방식으로 오픈한 후, 아래 코드를 추가합니다.
XML
1
<key>dotAuthorizationKey</key>
2
<dict>
3
<key>serviceNumber</key>
4
<string>xxxxx</string>
5
<key>expireDate</key>
6
<string>14</string>
7
<key>isDebug</key>
8
<string>true</string>
9
<key>isInstallRetention</key>
10
<string>true</string>
11
<key>isFingerPrint</key>
12
<string>true</string>
13
<key>accessToken</key>
14
<string></string>
15
<key>useMode</key>
16
<string>2</string>
17
</dict>
Copied!
추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 와이즈트래커에 로그인하여 화면 상단의 Service 부분을 선택하면 앱 이름과 함께 올바른 Service Number 가 나타납니다. Service No. 옆의 숫자를 복사하여 serviceNumber의 value로 입력해주세요.

HTTP 통신 허용

http통신을 허용하기 위해 NSAppTransportSecurity 를 아래와 같이 추가합니다.
이전과 마찬가지로 info.plist 파일을 Open As Source Code 방식으로 오픈한 후, 아래 코드를 추가합니다.
1
<key>NSAppTransportSecurity</key>
2
<dict>
3
<key>NSAllowsArbitraryLoads</key>
4
<true/>
5
</dict>
Copied!

초기화

  • 초기화 방법은 SceneDelegate 가 설정된 경우와 설정되지 않은 경우에 따라 달라집니다.
  • SceneDelegate를 사용하지 않으면 AppDelegate에서 초기화작업을 하고, 그렇지 않고 SceneDelegate를 사용하면 SceneDelegate에서 이 작업을 해야 합니다.

1. iOS13 미만 (SceneDelegate 없음)

AppDelegate의 didFinishLaunchingWithOptions 함수에 SDK를 Initialization하기 위한 코드를 다음과 같이 적용합니다. SDK가 정상적으로 초기화 되었을 때 아래와 같은 기본 분석이 가능합니다.
  • 앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
  • 통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
Swift
Objective-C
1
import DOT
2
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
3
// S: Wisetracker SDK init
4
DOT.initialization(launchOptions, application: application)
5
#if DEBUG
6
DOT.checkDebugMode(true)
7
#else
8
DOT.checkDebugMode(false)
9
#endif
10
// E: Wisetracker SDK init
11
}
Copied!
1
#import <DOT/DOT.h>
2
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
3
// S: Wisetracker SDK init
4
[DOT initialization:launchOptions application:application];
5
#ifdef DEBUG
6
[DOT checkDebugMode:true]
7
#else
8
[DOT checkDebugMode:false]
9
#endif
10
// E: Wisetracker SDK init
11
}
Copied!
DOT가 사용되는 곳에서는 import DOT을 통해 import가 필요합니다. 이하 적용 예시에서는 import하는 부분이 생략되어 있습니다.

2. iOS13 이상 (SceneDelegate 사용)

👉 iOS13 이상이어도 SceneDelegate를 사용하지 않을 수도 있어요, 이 때에는 위의 SceneDelegate를 사용하지 않는 경우를 참조하세요.

SceneDelegatesceneDidBecomeActive함수에 SDK를 Initialization하기 위한 코드를 다음과 같이 적용합니다. SDK가 정상적으로 초기화 되었을 때 아래와 같은 기본 분석이 가능합니다.
  • 앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
  • 통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
Swift
Objective-C
1
import DOT
2
3
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
4
...
5
func sceneDidBecomeActive(_ scene: UIScene) {
6
// S: Wisetracker SDK init
7
DOT.initialization(nil, application: UIApplication.shared)
8
#ifdef DEBUG
9
[DOT checkDebugMode:true]
10
#else
11
[DOT checkDebugMode:false]
12
#endif
13
// E: Wisetracker SDK init
14
}
15
...
16
}
Copied!
1
#import <DOT/DOT.h>
2
3
@implementation SceneDelegate
4
...
5
- (void)sceneDidBecomeActive:(UIScene *)scene {
6
// S: Wisetracker SDK init
7
[DOT initialization:nil application:[UIApplication sharedApplication]];
8
#ifdef DEBUG
9
[DOT checkDebugMode:true]
10
#else
11
[DOT checkDebugMode:false]
12
#endif
13
// E: Wisetracker SDK init
14
}
15
...
16
@end
Copied!

페이지 분석을 위한 설정

페이지뷰, 페이지 체류시간 분석이 가능합니다. 각 ViewController 이동 시에 호출되는 delegate 함수에 다음과 같이 기본적인 페이지 분석을 위한 코드를 적용합니다.
Swift
Objective-C
HTML
1
override func viewWillAppear(_ animated: Bool) {
2
super.viewWillAppear(animated)
3
DOT.onStartPage()
4
}
Copied!
1
- (void)viewWillAppear:(BOOL)animated {
2
[super viewWillAppear:animated];
3
[DOT onStartPage];
4
}
Copied!
1
<!- 별도 설정 없이 자동분석 ->
Copied!

[추가] 고급 설정

고급 설정의 경우, 해당 링크를 참고해 주시기 바랍니다.

[추가] iOS 14 개인정보방침 변경 관련 가이드

  • iOS 14부터 IDFA를 획득하기 위해서는 사용자의 동의를 얻어야 합니다.

info.plist파일에 NSUserTrackingUsageDescription 설정 추가

1
<key>NSUserTrackingUsageDescription</key>
2
<string>Your data will be used to deliver personalized ads to you.</string>
Copied!

App Tracking Transparency 동의 System Alert 노출 & API 호출

  • IDFA 획득을 위해 앱 추적 투명성 동의 요청 System Alert(대화 상자)을 띄워야 합니다. 동의 요청 System Alert(대화 상자) 화면에 띄우려면 requestTrackingAuthorizationWithCompletionHandler:를 호출합니다. completionHandler에서 동의 시 SDK API를 호출하도록 위와 같이 구현하시면 됩니다.
Swift
Objective-C
1
import AppTrackingTransparency
2
import AdSupport
3
if #available(iOS 14, *) {
4
ATTrackingManager.requestTrackingAuthorization { (AuthorizationStatus) in
5
if(AuthorizationStatus == .authorized) {
6
DOT.setIDFA(ASIdentifierManager.shared().advertisingIdentifier.uuidString)
7
}
8
}
9
} else {
10
DOT.setATTAuthorizationStatus(3)
11
}
Copied!
1
#import <AppTrackingTransparency/ATTrackingManager.h>
2
#import <AdSupport/AdSupport.h>
3
if (@available(iOS 14, *)) {
4
[ATTrackingManager requestTrackingAuthorizationWithCompletionHandler:^(ATTrackingManagerAuthorizationStatus status) {
5
if(status == ATTrackingManagerAuthorizationStatusAuthorized) {
6
[DOT setIDFA:[[[ASIdentifierManager sharedManager] advertisingIdentifier] UUIDString]];
7
}
8
}];
9
} else {
10
[DOT setATTAuthorizationStatus:3];
11
}
Copied!
Last modified 3d ago