Cordova 플러그인 연동가이드
1. 코르도바 플러그인 설치 (AOS/IOS 공통 설정)
1.1 Plugman 설치 (Plugman 미설치 경우)
1.1.1 Plugman 설치
CopyNODE1$ npm install -g plugman@1.5
1.1.2 Plugman 설치 버전 확인
plugman version 2.0 이상인 경우에 원격지의 라이브러리가 정상 설치되지 못하는 현상이 있어, plugman 1.5 버전 사용을 권장
합니다.
CopyNODE1plugman –v
1.2 플러그인 다운로드
터미널에서 해당 프로젝트 경로로 이동한 후 아래의 명령어를 통해 코르도바 플러그인을 설치합니다.
1.2.1 Android
CopyNODE1plugman install -d --platform android --project ./platforms/android --plugin https://github.com/WisetrackerTechteam/RW-cordova-package.git
1.2.2 iOS
CopyNODE1plugman 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 파일에 아래 코드를 추가합니다.
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 설정
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 파일에 플러그인 초기화와 Library inject 하는 코드를 추가합니다.
초기화 시 아래와 같은 기본 분석이 가능합니다.
- 앱 실행 및 방문수, 일/주/월순수방문수 등 방문과 관련된 지표
- 통신사, 단말기, 국가 등 방문자의 단말기 환경으로 부터 추출될 수 있는 지표
샘플 코드는 index.js 기준으로 작성하였습니다. 적용 프로젝트에 맞게 적용해 주세요.
CopyJAVASCRIPT1var app = {23 // Application Constructor4 initialize: function() {5 document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);6 },78 // deviceready Event Handler9 //10 // Bind any cordova events here. Common events are:11 // 'pause', 'resume', etc.12 onDeviceReady: function() {13 this.receivedEvent('deviceready');14 },1516 // Update DOM on a Received Event17 receivedEvent: function(id) {1819 var parentElement = document.getElementById(id);20 var listeningElement = parentElement.querySelector('.listening');21 var receivedElement = parentElement.querySelector('.received');2223 listeningElement.setAttribute('style', 'display:none;');24 receivedElement.setAttribute('style', 'display:block;');2526 /*27 ** Wisetracker SDK 초기 설정 코드 적용 예시28 */29 // SDK 초기화를 위해 최초 1회만 호출30 cordova.plugins.DotCordovaBridge.init();31 // 이후 로드되는 모든 페이지에 injecting 함수 호출32 cordova.plugins.DotCordovaBridge.inject();3334 }3536};3738app.initialize();