Cordova 플러그인 연동가이드

1. 코르도바 플러그인 설치 (AOS/IOS 공통 설정)

1.1 Plugman 설치 (Plugman 미설치 경우)

1.1.1 Plugman 설치

Copy
NODE
1$ npm install -g plugman@1.5

1.1.2 Plugman 설치 버전 확인

plugman version 2.0 이상인 경우에 원격지의 라이브러리가 정상 설치되지 못하는 현상이 있어, plugman 1.5 버전 사용을 권장합니다.

Copy
NODE
1plugman –v

1.2 플러그인 다운로드

터미널에서 해당 프로젝트 경로로 이동한 후 아래의 명령어를 통해 코르도바 플러그인을 설치합니다.

1.2.1 Android

Copy
NODE
1plugman install -d --platform android --project ./platforms/android --plugin https://github.com/WisetrackerTechteam/RW-cordova-package.git

1.2.2 iOS

Copy
NODE
1plugman install -d --platform ios --project ./platforms/ios --plugin https://github.com/WisetrackerTechteam/RW-cordova-package.git

1.3 플러그인 설치 확인

1.3.1 Android

코르도바 프로젝트에 플러그인이 정상 다운로드되면 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다.

1.3.2 iOS

코르도바 프로젝트에 플러그인이 정상 다운로드되면 X-code를 통해 다음과 같이 플러그인 파일이 추가된 것을 확인할 수 있습니다.

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

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 파일에 플러그인 초기화와 Library inject 하는 코드를 추가합니다.
초기화 시 아래와 같은 기본 분석이 가능합니다.

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

샘플 코드는 index.js 기준으로 작성하였습니다. 적용 프로젝트에 맞게 적용해 주세요.

Copy
JAVASCRIPT
1var app = {
2
3    // Application Constructor
4    initialize: function() {
5        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
6    },
7
8    // deviceready Event Handler
9    //
10    // Bind any cordova events here. Common events are:
11    // 'pause', 'resume', etc.
12    onDeviceReady: function() {
13        this.receivedEvent('deviceready');
14    },
15
16    // Update DOM on a Received Event
17    receivedEvent: function(id) {
18
19        var parentElement = document.getElementById(id);
20        var listeningElement = parentElement.querySelector('.listening');
21        var receivedElement = parentElement.querySelector('.received');
22
23        listeningElement.setAttribute('style', 'display:none;');
24        receivedElement.setAttribute('style', 'display:block;');
25
26        /*
27        ** Wisetracker SDK 초기 설정 코드 적용 예시 
28        */
29        // SDK 초기화를 위해 최초 1회만 호출
30        cordova.plugins.DotCordovaBridge.init();
31        // 이후 로드되는 모든 페이지에 injecting 함수 호출
32        cordova.plugins.DotCordovaBridge.inject();
33            
34    }
35        
36};
37
38app.initialize();