-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를 전체 추가해주세요.
<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 파일에 와이즈트래커 도메인을 추가 해 주세요.
<?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 통신이 가능해집니다.
왼쪽은 현 페이지 상단에 기재된 플러그인 다운로드시 생긴 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"; }
});
}
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() 함수에 적용해 주세요.
왼쪽은 처음 플러그인 다운로드시 생긴 node_modules/DotReactNativeBridge/ios 폴더 하위에 있는 bridge파일의 위치이며 파일을 복사한 뒤 , 오른쪽에 보이는 현 프로젝트 폴더의 /프로젝트명/ios/프로젝트명과 동일한 폴더 경로에 복사한 두 개의 bridge 파일을 붙여넣습니다.
Bridge 파일 추가 후 AppDelegate.mm 파일에 DotReactBridge *dotReactBridge를 추가 해 줍니다.
React Native Bridgeless 모드로 개발하시는 경우 아래 코드를 추가하지 않으셔도 됩니다.
(RN 0.74.0 부터 기본적으로 Bridgeless 활성화)
#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하기 위한 코드를 다음과 같이 적용합니다.
Hybrid App인 경우에만 적용하면 되는 설정으로, WebView로 표시한 웹페이지 내에서 발생하는 이벤트를 측정하기 위해 필요합니다. 웹뷰로 불러온 페이지를 감지할 수 있도록 webview 컴포넌트에 다음과 같이 onLoadStart 와 onMessage 를 설정 해 줍니다.
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 라이브러리는 더이상 업데이트 되지 않습니다.
react-native-fbsdk-next 라이브러리를 통해 지원하고 있으나, 해당 라이브러리에서는 Facebook 지연된 딥링크에 대한 AppLinkData 는 확인되지 않아, RN 코드에서는 Facebook 지연된 앱 링크에 대한 데이터 확인이 불가함을 안내드리며, Facebook 지연된 딥링크 사용시 아래의 Native코드로 적용하셔야 함을 안내드립니다.
