1. 리액트 플러그인 설치
1.1 플러그인 다운로드
터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.
Copy -npm 방식
npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git
-yarn 방식
yarn add https://github.com/WisetrackerTechteam/RW-react-package.git
1.2 플러그인 설치 확인
프로젝트에 플러그인이 정상 다운로드되면 node_modules 폴더 아래 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다. (폴더경로 : 프로젝트폴더 > node_modules > DotReactNativeBridge 폴더 depth 확인 )
2. Android 설정
앱에 SDK 추가
저장소가 JFrog에서 Github으로 변경되었습니다.
기존 JFrog를 이용하는 방식은 2023년 9월까지만 제공되며, 이후부터는 아래 Github Package 이용하는 방식으로 필수 변경이 필요합니다. 기존 방식을 사용하는 고객사의 경우 빌드시 오류가 발생될 수 있으며 Github 방식으로 변경 후 다시 빌드 해 주세요.
(기존 JFrog에서 사용되던 라이브러리와 동일한 라이브러리가 포함되어있습니다)
android프로젝트에서 가장 상위에 있는 build.gradle(project)에 아래와 같이 와이즈트래커의 maven repository 주소 를 추가합니다.
기존코드에 allprojects
가 있다면, repositories{ }
안에 아래 코드와 같이 와이즈트래커 repository url 을 추가 합니다. allprojects
가 없을경우 allprojects를 전체 추가
해주세요.
앱에 SDK 추가 (Github Package 이용)
gradle(root)
Copy 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를 추가해주세요.
"app"모듈의 build.gradle 파일의 dependencies{ } 중괄호 안 하위 부분에 아래에 와이즈트래커 SDK를 추가합니다.
build.gradle(app모듈)
Copy dependencies {
....
// 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
Copy <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 통신을 허용하는 두 가지 설정을 추가해주세요.
AndroidManifest.xml 설정
해당 파일의 경로는 다음과 같습니다. (android > app > src > main > AndroidMainfest.xml )
작성되어 있는 코드에, 아래 한 줄 짜리 networkSecurityConfig
코드를 복사하여 <application androidname = > 안에 복사하여 붙여넣기 하면 아래 최종 코드와 같은 모양이 됩니다.
Copy android:networkSecurityConfig="@xml/network_security_config"
XML
Copy <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 설정
신규 설정의 경우 기존에 설정되어있는 경우
network_security_config.xml 파일을 생성합니다.
로컬 환경을 추가 한 후, xml 파일에 와이즈트래커 도메인을 추가 해 주세요.
Copy <? 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 >
trk.analytics.wisetracker.co.kr
도메인을 추가 해 주시면 와이즈트래커 SDK 통신이 가능해집니다.
기존 network_security_config.xml 설정이 되어 있으셨다면,
Copy < domain includeSubdomains = "true" >trk.analytics.wisetracker.co.kr</ domain >
와이즈트래커 도메인을 '추가' 해주시면 와이즈트래커 SDK 통신이 가능합니다.
Bridge파일 추가
마지막으로 bridge 함수들을 호출 할 수 있게 bridge 파일을 추가 합니다.
왼쪽은 현 페이지 상단에 기재된 플러그인 다운로드시 생긴 DotReactNativeBridge 폴더 하위에 있는 "kr"
폴더의 위치이며 해당 kr 폴더를 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/android/app/src/main/java 경로에 복사한 "kr"
폴더를 붙여넣기 합니다.
DotReactBridge 객체 NativeModules 등록
파일 추가 후 MainApplication.java
파일에 Wisetracker SDK BridgePackage 를 추가 해 줍니다.
java kotlin
Copy 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" ; }
}) ;
}
Copy import android.app.Application
import com.facebook.react.PackageList
import com.facebook.react.ReactApplication
import com.facebook.react.ReactHost
import com.facebook.react.ReactNativeHost
import com.facebook.react.ReactPackage
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
import com.facebook.react.defaults.DefaultReactNativeHost
import com.facebook.react.flipper.ReactNativeFlipper
import com.facebook.soloader.SoLoader
import kr.co.wisetracker.BridgePackage;
class MainApplication : Application (), ReactApplication {
override val reactNativeHost: ReactNativeHost =
object : DefaultReactNativeHost ( this ) {
override fun getPackages (): List < ReactPackage > {
// Packages that cannot be autolinked yet can be added manually here, for example:
// packages.add(new MyReactNativePackage());
// Wisetracker SDK BridgePackage 추가
val packageList = PackageList ( this ).packages
packageList. add ( BridgePackage ())
return packageList
}
.. .
.. .
}
.. .
.. .
}
초기화
Application을 상속받는 클래스가 아닌 Activity
를 상속받는 기본 화면의 onCreate()
함수에 적용해 주세요.
Java Kotlin
Copy 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 );
}
}
Copy import com.sdk.wisetracker.new_dot.open.DOT
class MainActivity : AppCompatActivity () {
override fun onCreate (savedInstanceState: Bundle ?) {
super . onCreate (savedInstanceState)
.. .
// SDK 호출
DOT. initialization ( this )
}
}
Activity 감지를 위한 설정
화면(Activity)전환을 분석하기 위한 설정입니다. 사용하는 라우터의 location 정보가 바뀔때마다 onStartPage를 호출 해 주어야 합니다. 아래는 React Navigation 라이브러리를 사용할때의 예제입니다.
App.js
Copy 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;
[추가] Android 고급 설정
고급 설정의 경우, 해당 링크 를 참고해 주시기 바랍니다.
설정 확인
모든 설정 완료 후 log를 통해 데이터 수집을 확인 합니다.
Copy [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를 추가합니다
기존에 SDK를 한번 설치한 경우에는 설치할SDK 버전을 표시해야 하는 경우도 있습니다. 아래와 같이 설치할 SDK버전을 명시적으로 표시하면 됩니다.
Copy pod 'RW', '~> 1.1.53'
Podfile 에 해당라인을 추가한 후 Terminal 프로그램을 실행하여 다음의 명령을 수행합니다
SDK 버전 업데이트의 경우 다음의 명령을 수행합니다.
정상적으로 설치가 되면 아래와 같은 폴더 구조를 확인할 수 있습니다.
SDK 설치 - Cocoapod 사용하지 않을 경우
SDK 파일을 URL 에서 다운로드 합니다.
다운된 파일을 압축 해제하면 다음과 같은 파일이 확인 가능하고 이중 아래에 선택된 3개의 파일을 분석 대상 앱 프로젝트에 추가합니다.
프로젝트 선택후 마우스 우클릭, Add Files to 메뉴를 선택합니다.
앞에서 다운로드 받고, 압축 해제한 폴더에 들어가서 아래와 같이 추가 대상 파일을 선택하고, 화면 아래쪽 설정은 존재하는 모든 target에 포함되었는지 확인후 추가 하면 됩니다.
BuildSetting 에 아래와 같이 설정을 추가합니다.
xcode 가 12.3 이후 버전이고 빌드 과정에서 아래와 유사한 오류가 발생하는 경우가 있으며,
위의 경우에는 아래와 같이 설정을 하고, 빌드를 하면됩니다.
dotAuthorizationKey 등록
xcode프로젝트에서 info.plist 파일을 Open As Source Code 방식으로 오픈한 후, 아래 코드를 복사하여 info.plist의 가장 하단에 다음과 같은 위치에 붙여넣기 합니다.
XML
Copy <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 통신 허용
http통신을 허용하기 위해 NSAppTransportSecurity 를 아래와 같이 추가해야합니다.
이전과 마찬가지로 info.plist 파일을 Open As Source Code 방식으로 오픈한 후, NSAppTransportSecurity
를 검색합니다.
Copy <!-- HTTP 통신 허용 -->
<key>NSAllowsArbitraryLoads</key>
<true/>
위의 코드를 복사하여 NSExceptionDomains
위에 코드를 붙여넣기 합니다. 아래의 샘플 코드를 확인하여, 정확한 위치에 코드 추가가 이루어졌는지 확인합니다.
Copy <key>NSAppTransportSecurity</key>
<dict>
<!-- HTTP 통신 허용 -->
<key>NSAllowsArbitraryLoads</key>
<true/>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
Bridge 파일 추가
마지막으로 bridge 함수들을 호출 할 수 있게 bridge 파일을 추가 합니다.
왼쪽은 처음 플러그인 다운로드시 생긴 node_modules/DotReactNativeBridge/ios 폴더 하위에 있는 bridge파일의 위치이며 파일을 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/ios/프로젝트명과 동일한 폴더 경로에 복사한 두 개의 bridge 파일 을 붙여넣습니다.
Bridge 파일 추가 후 AppDelegate.mm 파일에 DotReactBridge *dotReactBridge
를 추가 해 줍니다.
React Native Bridgeless 모드로 개발하시는 경우 아래 코드를 추가하지 않으셔도 됩니다.
(RN 0.74.0 부터 기본적으로 Bridgeless 활성화)
Objective-C
Copy #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];
}
초기화
SDK가 정상적으로 초기화 되었을 때 아래와 같은 기본 분석이 가능합니다.
앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
초기화 방법은 SceneDelegate
가 설정된 경우 와 설정되지 않은 경우 에 따라 달라집니다.
SceneDelegate를 사용하지 않으면 AppDelegate에서 초기화작업을 하고, 그렇지 않고 SceneDelegate를 사용하면 SceneDelegate에서 이 작업을 해야 합니다.
1. iOS13 미만 (SceneDelegate
없음)
AppDelegate 파일을 열어 didFinishLaunchingWithOptions
를 검색하여, didFinishLaunchingWithOptions
함수에 SDK를 Intialization하기 위한 코드를 다음과 같이 적용합니다.
swift Objective-C
Copy import DOT
import DotReactBridge
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
}
Copy #import <DOT/DOT.h>
#import "DotReactBridge.h"
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
...
...
// 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;
}
2. iOS13 이상 (SceneDelegate
사용)
👉 iOS13 이상이어도 SceneDelegate를 사용하지 않을 수도 있어요, 이 때에는 위의 SceneDelegate를 사용하지 않는 경우를 참조하세요.
SceneDelegate
의 sceneDidBecomeActive
함수에 SDK를 Initialization하기 위한 코드를 다음과 같이 적용합니다.
swift Objective-C
Copy 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
}
...
}
Copy #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
4. HybridApp을 위한 추가 설정
Hybrid App인 경우에만 적용하면 되는 설정으로, WebView로 표시한 웹페이지 내에서 발생하는 이벤트를 측정하기 위해 필요합니다. 웹뷰로 불러온 페이지를 감지할 수 있도록 webview 컴포넌트에 다음과 같이 onLoadStart
와 onMessage
를 설정 해 줍니다.
ReactNative Webview
Copy 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 ;
}
}
}
}}
Facebook 광고 성과 측정
Facebook에서 공식으로 지원하던 ReactNative 라이브러리는 더이상 업데이트 되지 않습니다.
Facebook SDK for React Native 확인
react-native-fbsdk-next 라이브러리를 통해 지원하고 있으나, 해당 라이브러리에서는 Facebook 지연된 딥링크에 대한 AppLinkData 는 확인되지 않아, RN 코드에서는 Facebook 지연된 앱 링크에 대한 데이터 확인이 불가함을 안내드리며, Facebook 지연된 딥링크 사용시 아래의 Native코드로 적용하셔야 함을 안내드립니다.
Android Facebook 광고 성과 측정 Native 설정 방법
iOS Facebook 광고 성과 측정 Native 설정 방법
이벤트 설정
앱을 사용하는 유저의 다양한 행동을 분석하기위해 인앱 이벤트 API를 앱에 적용합니다.
[추가] iOS 고급 설정
고급 설정의 경우, 해당 링크 를 참고해 주시기 바랍니다.
설정 확인
모든 설정 완료 후 xcode의 console을 통해 log확인을 합니다. console 검색 시 아래 "RES001"
코드가 확인이 되신다면, 수신이 정상적으로 이루어졌으며, 와이즈트래커의 SDK를 호출할 준비가 완료되었습니다.
Copy code = RES001;
msg = "Data Receive Success";
5. SampleCode 제공
☑️ReactNative SDK 설정을 도와드리기위한 샘플코드가 제작되어 있습니다.
해당 가이드 참고시 샘플 코드도 함께 참고 하신다면, SDK 적용을 수월하게 진행하실 수 있습니다.