ReactNative 플러그인 연동가이드

1. 리액트 플러그인 설치 (AOS/IOS 공통 설정)

1.1 플러그인 다운로드

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

Copy
SHELL
1$ npm install --save git+https://github.com/WisetrackerTechteam/RW-react-package.git

1.2 플러그인 설치 확인

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

2. Android 설정

2.1 AuthorizationKey 등록

프로젝트의 app/res/values/strings.xml 파일에 아래 코드를 추가합니다.

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

추가한 코드 중 serviceNumber의 value를 올바른 값으로 변경해야 합니다. 와이즈트래커에 로그인하여 화면 상단의 Service 부분을 선택하면 앱 이름과 함께 올바른 Service Number 가 나타납니다. Service No. 옆의 숫자를 복사하여 serviceNumber의 value로 입력해주세요.

authKey

2.2 Http 통신 허용 설정

프로젝트의 Target API 28 이상일 경우 Http 통신 허용 추가

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

Copy
XML
1<!-- app/res/xml/network_security_config.xml -->
2<?xml version="1.0" encoding="utf-8"?>
3<network-security-config>
4    <domain-config cleartextTrafficPermitted="true">
5        <domain includeSubdomains="true">trk.analytics.wisetracker.co.kr</domain>
6    </domain-config>
7</network-security-config>

2.3 유입 경로 분석

2.3.1 딥링크 분석

딥링크를 통해 앱이 실행되는 경로 분석이 필요한 경우 적용해 주세요.

딥링크 설정

AndroidManifest.xml 파일에서 앱의 환경에 맞춰 딥링크로 오픈되는 Activity의 android:host, android:scheme 값을 변경해 주세요.

Copy
XML
1<!--  예시는 wisetracker://wisetracker.co.kr 링크로 진입시 딥링크 분석이 가능 -->
2<activity android:name="kr.co.wisetracker.DeepLinkActivity" 
3          android:launchMode="singleTop" >
4    <intent-filter>
5        <action android:name="android.intent.action.VIEW" />
6        <category android:name="android.intent.category.DEFAULT" />
7        <category android:name="android.intent.category.BROWSABLE" />
8        <!-- 딥링크로 진입될 스키마와 호스트 정보 입력 -->
9        <data android:host="wisetracker.co.kr"
10              android:scheme="wisetracker" />
11    </intent-filter>
12</activity>

3. iOS 설정

3.1 Framework & Bridge 파일 세팅

3.1.1 node_modules - DotReactNativeBridge - ios 경로에 4개의 Framework파일과 2개의 소스파일을 Xcode 프로젝트 최상단 폴더에 Drag & Drop 방식으로 가져다 놓습니다.

3.1.2 위 작업 중 반드시 Copy items if needed 옵션을 체크합니다.

3.1.3 작업 완료 후 Xcode 프로젝트 폴더에 아래와 같이 설치 되었음을 확인할 수 있습니다.

3.1.4 Targets - General - Frameworks, Libraries, and Embedded Content 메뉴로 이동하여 Embed 옵션을 Embed Without Signing로 세팅합니다.

3.2 info.plist 값 세팅

info.plist 파일을 Open As Source Code 방식으로 오픈한 후, 아래 코드를 추가합니다.

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

authKey

http통신을 허용하기 위해 NSAppTransportSecurity 를 아래와 같이 추가합니다

Copy
XML
1<key>NSAppTransportSecurity</key>
2<dict>
3    <key>NSAllowsArbitraryLoads</key>
4    <true/>
5</dict>

4. 플러그인 초기화

리액트 프로젝트에서 앱 시작시 최초 로드되는 .js 파일에 아래 코드를 추가합니다. 초기화 시 아래와 같은 기본 분석이 가능합니다.

앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표

Copy
JAVASCRIPT
1import DotReactBridge from 'DotReactNativeBridge/wrapper/react/DotReactBridge.js';
2import Dop from 'DotReactNativeBridge/dop-native-sdk-inf.js'