ReactNative 플러그인 연동가이드
1. 리액트 플러그인 설치 (AOS/IOS 공통 설정)
1.1 플러그인 다운로드
터미널에서 아래의 명령어를 통해 리액트 플러그인을 프로젝트에 다운로드 합니다.
CopySHELL1$ 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 파일에 아래 코드를 추가합니다.
CopyXML1<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로 입력해주세요.
2.2 Http 통신 허용 설정
프로젝트의 Target API 28 이상일 경우 Http 통신 허용 추가
CopyXML1<!-- AndroidManifest.xml -->2<application3 android:icon="@mipmap/ic_launcher"4 android:label="@string/app_name"5 android:networkSecurityConfig="@xml/network_security_config"6 android:theme="@style/AppTheme">
CopyXML1<!-- 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
값을 변경해 주세요.
CopyXML1<!-- 예시는 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 방식으로 오픈한 후, 아래 코드를 추가합니다.
CopyXML1<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>
추가한 코드 중 serviceNumber
의 value를 올바른 값으로 변경해야 합니다. 와이즈트래커에 로그인하여 화면 상단의 Service 부분을 선택하면 앱 이름과 함께 올바른 Service Number 가 나타납니다. Service No. 옆의 숫자를 복사하여 serviceNumber
의 value로 입력해주세요.
http통신을 허용하기 위해 NSAppTransportSecurity 를 아래와 같이 추가합니다
CopyXML1<key>NSAppTransportSecurity</key>2<dict>3 <key>NSAllowsArbitraryLoads</key>4 <true/>5</dict>
4. 플러그인 초기화
리액트 프로젝트에서 앱 시작시 최초 로드되는 .js 파일에 아래 코드를 추가합니다. 초기화 시 아래와 같은 기본 분석이 가능합니다.
- 앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
- 통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
CopyJAVASCRIPT1import DotReactBridge from 'DotReactNativeBridge/wrapper/react/DotReactBridge.js';2import Dop from 'DotReactNativeBridge/dop-native-sdk-inf.js'