React Native 플러그인 연동

1. 리액트 플러그인 설치

1.1 플러그인 다운로드

터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.

-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)

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모듈)

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

<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>

1. trk.analytics.wisetracker.co.kr 도메인을 추가 해 주시면 와이즈트래커 SDK 통신이 가능해집니다.

기존에 설정되어있는 경우

기존 network_security_config.xml 설정이 되어 있으셨다면,

<domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>

와이즈트래커 도메인을 '추가' 해주시면 와이즈트래커 SDK 통신이 가능합니다.

🔽 신규로 network_security_config.xml 파일을 생성할 경우 경로입니다.

왼쪽: 폴더 기준 / 오른쪽 : 안드로이드 프로젝트 기준

Bridge파일 추가

마지막으로 bridge 함수들을 호출 할 수 있게 bridge 파일을 추가 합니다.

왼쪽은 현 페이지 상단에 기재된 플러그인 다운로드시 생긴 DotReactNativeBridge 폴더 하위에 있는 "kr"폴더의 위치이며 해당 kr 폴더를 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/android/app/src/main/java 경로에 복사한 "kr" 폴더를 붙여넣기 합니다.

왼쪽은 가장 상단에 있는 플러그인 설치시 추가 된 플러그인 파일 폴더 / 오른쪽은 프로젝트 폴더 경로

DotReactBridge 객체 NativeModules 등록

파일 추가 후 MainApplication.java 파일에 Wisetracker SDK BridgePackage를 추가 해 줍니다.

java

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"; }
    });
  }

kotlin

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

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);
    }
}

Kotlin

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

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를 통해 데이터 수집을 확인 합니다.

[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.57'

Podfile 에 해당라인을 추가한 후 Terminal 프로그램을 실행하여 다음의 명령을 수행합니다

pod install

SDK 버전 업데이트의 경우 다음의 명령을 수행합니다.

pod update

정상적으로 설치가 되면 아래와 같은 폴더 구조를 확인할 수 있습니다.

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

SDK 파일을 URL에서 다운로드 합니다.

다운된 파일을 압축 해제하면 다음과 같은 파일이 확인 가능하고 이중 아래에 선택된 3개의 파일을 분석 대상 앱 프로젝트에 추가합니다.

프로젝트 선택후 마우스 우클릭, Add Files to 메뉴를 선택합니다.

앞에서 다운로드 받고, 압축 해제한 폴더에 들어가서 아래와 같이 추가 대상 파일을 선택하고, 화면 아래쪽 설정은 존재하는 모든 target에 포함되었는지 확인후 추가 하면 됩니다.

BuildSetting 에 아래와 같이 설정을 추가합니다.

xcode 가 12.3 이후 버전이고 빌드 과정에서 아래와 유사한 오류가 발생하는 경우가 있으며,

위의 경우에는 아래와 같이 설정을 하고, 빌드를 하면됩니다.

dotAuthorizationKey 등록

xcode프로젝트에서 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>

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

#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

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
}

Objective-C

#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

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
  }
...
}

Objective-C

#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

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를 앱에 적용합니다.

인앱 이벤트 설정Wisetracker Docs

[추가] iOS 고급 설정

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

설정 확인

모든 설정 완료 후 xcode의 console을 통해 log확인을 합니다. console 검색 시 아래 "RES001" 코드가 확인이 되신다면, 수신이 정상적으로 이루어졌으며, 와이즈트래커의 SDK를 호출할 준비가 완료되었습니다.

code = RES001;
msg = "Data Receive Success";

5. SampleCode 제공

☑️ReactNative SDK 설정을 도와드리기위한 샘플코드가 제작되어 있습니다.

해당 가이드 참고시 샘플 코드도 함께 참고 하신다면, SDK 적용을 수월하게 진행하실 수 있습니다.

GitHub - WisetrackerTechteam/SdkSampleSourceGitHub