React Native SDK - 기본 통합

팔로우
Avatar
Kesava Peteti
Updated
문서

시작하기 전에: SDK 전제 조건

Singular SDK 연동의 단계를 따르세요 :계획 및 전제 조건의 단계를 따르세요.

이러한 단계는 모든 Singular SDK 연동의 전제 조건입니다.

SDK 설치

프로젝트에 Singular React SDK를 추가하려면:

  1. 프로젝트의 루트 디렉토리에서 터미널을 엽니다.

  2. 다음 명령을 사용하여 프로젝트에 SDK 패키지를 다운로드합니다:

    bash
    npm install singular-react-native --save
    • React Native 0.60 이상을 사용하는 경우 Singular 패키지가 프로젝트에 자동 링크됩니다.

    • React Native 버전 0.59 이하를 사용하는 경우 다음을 실행하여 Singular 패키지의 네이티브 브리지 코드를 프로젝트에 링크하세요:

      bash
      react-native link singular-react-native
    • Expo를 사용하는 경우: 위에서 설명한 대로 Singular SDK를 설치한 후 app.json 또는 app.config.js 의 플러그인 배열에 패키지를 추가합니다:
      bash
      "expo": {
  "plugins": ["singular-react-native"]
}
      그런 다음 엑스포의 네이티브 코드 사용자 지정 가이드를 사용하여 앱을 다시 빌드합니다.

사전 요구 사항 설정

iOS 사전 요구 사항

프로젝트의 루트 디렉토리에서 다음 명령을 실행합니다:

bash
cd ios && pod install

안드로이드 사전 요구 사항

project/build.gradle 파일의 모든 프로젝트 섹션에서 앱의 Maven 리포지토리에 다음을 추가합니다:

project/build.gradle
allprojects {
  repositories {
    maven { url 'https://maven.singular.net/' }
  }
}

필수 Android 권한 및 종속성 추가하기

AndroidManifest.xml 파일의 <manifest> 태그 아래에 이러한 권한을 추가합니다:

AndroidManifest.xml
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="BIND_GET_INSTALL_REFERRER_SERVICE" />
<uses-permission android:name="com.android.vending.CHECK_LICENSE" />
<uses-permission android:name="com.google.android.gms.permission.AD_ID" />
키즈 SDK를 연동하는 경우com.google.android.gms.permission.AD_ID 권한을제외합니다 .

삼성 갤럭시 스토어의 설치 리퍼러를 지원하려면 다음을 추가합니다:

AndroidManifest.xml
<queries>
   <package android:name="com.sec.android.app.samsungapps" />
</queries>

Singular SDK에 대한 전이 종속성을 비활성화한 경우 앱/build.gradle에 다음을 추가합니다:

app/build.gradle
dependencies {
    ...
    implementation 'com.android.installreferrer:installreferrer:2.2'
    implementation 'com.google.android.gms:play-services-appset:16.0.0'
    ...
}

프로가드를 사용하는 경우 구성 요구 사항

리액트 네이티브 안드로이드에서 Singular SDK용 ProGuard 구성하기

Singular 안드로이드 SDK를 React Native 안드로이드 앱에 연동할 때, 릴리스 빌드에서 SDK가 올바르게 작동하도록 하기 위해 특정 ProGuard 규칙을 추가해야 합니다. 코드를 최적화하고 난독화하기 위해 ProGuard(또는 최신 대체 버전인 R8)는 React Native 릴리스 빌드에서 기본적으로 활성화됩니다. 적절한 ProGuard 규칙이 없으면 Singular SDK 또는 해당 종속성이 제거되거나 난독화되어 런타임 문제를 일으킬 수 있습니다.

다음 단계에 따라 Singular SDK용 ProGuard를 구성하세요:

  1. ProGuard 규칙 파일 찾기: React Native 프로젝트에서 android/app/proguard-rules.pro 파일로 이동합니다. 이 파일에는 앱에 대한 사용자 정의 ProGuard 규칙이 포함되어 있습니다.
  2. Singular SDK ProGuard 규칙을 추가합니다: android/app/proguard-rules.pro 에 다음 줄을 추가하여 Singular SDK와 해당 종속성을 유지합니다:
proguard-rules.pro
# Preserve Singular SDK classes
-keep class com.singular.sdk.** { *; }

# Preserve Android Install Referrer library
-keep public class com.android.installreferrer.** { *; }

# Uncomment the following line if you are using the Singular 'revenue' function with Google Play Billing Library
#-keep public class com.android.billingclient.** { *; }

SDK 연동

참고: Singular SDK를 구현할 때 GDPR, CCPA 및 COPPA를 포함하되 이에 국한되지 않는 비즈니스를 수행하는 지역에서 제정된 다양한 개인정보 보호법을 준수해야 한다는 점을 잊지 마세요. 자세한 내용은 SDK 옵트인 및 옵트아웃 사례를 참조하세요.

앱을 열 때마다 SDK 초기화 코드를 호출해야 합니다. 이는 모든 Singular 어트리뷰션 기능의 전제 조건이며, 또한 새로운 사용자 세션을 Singular로 전송합니다. 세션은 사용자 리텐션을 계산하는 데 사용됩니다.

Singular 라이브러리 가져오기

App.tsx 파일에 다음 코드를 추가하여 Singular 클래스를 가져옵니다.

App.tsx
import { Singular, SingularConfig, Events, Attributes } from 'singular-react-native';

Singular SDK 초기화하기

  1. SingularConfig 객체를 만듭니다. 이 객체에는 SDK 키와 SDK 비밀 번호가 포함됩니다(키와 비밀 번호는 Singular 계정에 로그인하고"개발자 도구 > SDK 연동 > SDK 키"로 이동하여 얻을 수 있습니다).

  2. 선택 사항으로 여러 구성 방법을 추가하여 다양한 SDK 기능을 설정하거나 활성화할 수 있습니다.

  3. 그런 다음 init 메서드를 사용하여 SDK를 초기화하여 SingularConfig 객체를 전달합니다.

예를 들어

App.tsx
import React, { useEffect } from 'react';
import { Singular, SingularConfig, Events, Attributes } from 'singular-react-native';

export default function App() {
  useEffect(() => {
    // Create Singular configuration
    const config = new SingularConfig('SDK KEY', 'SDK SECRET')
      .withCustomUserId('user_123456') // Set a custom user ID for tracking
      .withLimitDataSharing(false) // Allow data sharing (set to true for compliance if needed)
      .withFacebookAppId('123456789012345') // Optional: For Facebook integration
      .withLogLevel(3) // Enable verbose logging for debugging
      .withLoggingEnabled(); // Enable SDK logs

    // Define SingularLink callback for deep linking
    const handleSingularLink = (params: any) => {
      console.log('SingularLink params:', params);
      // Example: Navigate to a specific screen based on params.deeplink
    };

    // Initialize Singular SDK
    Singular.init(config, handleSingularLink);

  }, []); // Empty dependency array ensures this runs once on app start

  return (
    // Your app's UI components
  );
}