React Native 플러그인 연동

allprojects {
    repositories {
        google()
        mavenCentral()
        /* wisetracker sdk repository config */
        maven {
            def endPoint = "https://analytics.wisetracker.co.kr/console/android/sdk/github/credentials.do"
            url = uri(new URL(endPoint+'?name=URI').text)
            credentials {
                username = new URL(endPoint+'?name=USER').text
                password = new URL(endPoint+'?name=TOKEN').text
            }
        }
    }
}

dependencies {
    ....
    // SDK
     implementation "com.sdk.wisetracker:base_module:latest.release"
     implementation "com.sdk.wisetracker:new_dot_module:latest.release"
}

<string-array name="dotAuthorizationKey">
    <item name="useMode">1</item>
    <item name="serviceNumber">xxxxx</item>  <!--서비스번호 변경 필수 -->
    <item name="expireDate">14</item>
    <item name="isDebug">false</item>
    <item name="isInstallRetention">true</item>
    <item name="isFingerPrint">true</item>
    <item name="accessToken"></item>
</string-array>

<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 이상일 경우 해당 라인 추가 --> 
    

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

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 com.sdk.wisetracker.new_dot.open.DOT;

public class MainActivity extends ReactActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(null);
    
        // SDK 호출
        DOT.initialization(this);
    }
}

import React, {useEffect, useRef, useState} from 'react';
import {NavigationContainer} from '@react-navigation/native';
// Wisetracker SDK
import {NativeModules} from ‘react-native’;

const App = () => {

const routeNameRef = useRef();
const navigationRef = useRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onStateChange={async () => {
      const previousRouteName = routeNameRef.current;
      const currentRouteName = navigationRef.current.getCurrentRoute().name;
   
     /* Activity 감지를 위한 예제 코드 */
      NativeModules.DotReactBridge != null &&
        /*로케이션 정보가 바뀔때마다 onStartPage 호출*/
        (NativeModules.DotReactBridge.onStartPage(),    
        NativeModules.DotReactBridge.logScreen(
          JSON.stringify({
            event: 'MainPage',            /*페이지 분석을 위한 custom eventName*/
            page_id: currentRouteName,    /*location 정보*/
          }),
        ));
    }}>
  <Stack.Navigator>
    <Stack.Screen
      name="Main"
      component={Main}
    />
    <Stack.Screen
      name="Login"
      component={Login}
    />
  </Stack.Navigator>
</NavigationContainer>
  );
};

export default App;

<key>dotAuthorizationKey</key>
<dict>
    <key>serviceNumber</key>
    <string>xxxxx</string>              <!-- 서비스번호 필수변경 -->
    <key>expireDate</key>
    <string>14</string>
    <key>isDebug</key>
    <string>true</string>
    <key>isInstallRetention</key>
    <string>true</string>
    <key>isFingerPrint</key>
    <string>true</string>
    <key>accessToken</key>
    <string></string>
    <key>useMode</key>
    <string>2</string>
</dict>

#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]; 
}

import DOT
import DotReactBridge

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // S: Wisetracker SDK init
  DOT.initialization(launchOptions, application: application)
  #if DEBUG
    DOT.checkDebugMode(true)
  #else
    DOT.checkDebugMode(false)
  #endif
  // E: Wisetracker SDK init
}

import DOT

class SceneDelegate: UIResponder, UIWindowSceneDelegate {
...
  func sceneDidBecomeActive(_ scene: UIScene) {
    // Start : Wisetracker SDK 호출
    DOT.initialization(nil, application: UIApplication.shared)
    #if DEBUG
      DOT.checkDebugMode(true)
    #else
      DOT.checkDebugMode(false)
    #endif
    // E: Wisetracker SDK init
  }
...
}

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;
			} 
		}  
	} 
}}