React Native SDK - 基本的な統合

フォローする
Avatar
Jared Ornstead
Updated
ドキュメント

始める前にSDK の前提条件

Singular SDKの統合の 手順に従ってください：プランニングと前提条件。

これらのステップはSingular SDKを統合するための前提条件です。

SDKのインストール

Singular React SDKをプロジェクトに追加します：

  1. プロジェクトのルートディレクトリでターミナルを開きます。

  2. 以下のコマンドでSDKパッケージをプロジェクトにダウンロードします：

    bash
    npm install singular-react-native --save
    • React Native0.60以上を使用している場合は、Singularパッケージがプロジェクトに自動リンクされます。

    • React Nativeバージョン0.59以前を使用している場合は、以下を実行して、Singularパッケージからネイティブブリッジコードをプロジェクトにリンクします：

      bash
      react-native link singular-react-native
    • Expoを使用している場合Expo を使用している場合：上記のように Singular SDK をインストールした後、パッケージをapp.json またはapp.config.js の plugins 配列に追加します：
      bash
      "expo": {
  "plugins": ["singular-react-native"]
}
      次に、Expoのネイティブコードのカスタマイズガイドを使用してアプリを再構築します。

前提条件の設定

iOSの前提条件

プロジェクトのルート・ディレクトリで、以下のコマンドを実行します：

bash
cd ios && pod install

Android の前提条件

project/build.gradle ファイルのallprojectsセクションで、以下をアプリの 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" />
Kids SDKを統合する場合は、com.google.android.gms.permission.AD_ID パーミッションを除外して ください。

Samsung Galaxy Storeのインストール・リファラーをサポートするには、以下を追加します：

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

Singular SDKのtransitive dependenciesを無効にしている場合は、 app/build.gradleに以下を追加します：

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

Proguardを使用する場合の構成要件

React Native AndroidでSingular SDK用のProGuardを設定する

Singular Android SDKをReact Native Androidアプリに統合する場合は、リリースビルドで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アカウントにログインし、"Developer Tools > SDK Integration > SDK Keys"に移動して取得します）。

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