メインコンテンツへスキップ

概要

Adrop React Native SDKを使用すると、React Nativeアプリでさまざまな広告フォーマットを簡単に連携できます。

対応広告フォーマット

フォーマット説明
バナー広告画面の一部に表示される長方形の広告
ネイティブ広告アプリコンテンツと自然に調和する広告
インタースティシャル広告全画面を覆う広告
リワード広告報酬を提供する全画面広告
ポップアップ広告ポップアップ形式で表示される広告

必要要件

React Native

  • React Native 0.71 以上

Android

  • APIレベル 23 (Android 6.0) 以上
  • compileSdkVersion 34
  • Kotlin 2.1.0 以上
  • Gradle 8.7 以上

iOS

  • iOS 13.0 以上
  • Swift 5.0 以上

インストール

1. パッケージインストール

npm install adrop-ads-react-native

2. Android設定

android/settings.gradle.ktsにバックフィル広告リポジトリを追加します。
android/settings.gradle.kts
dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        google()
        mavenCentral()
        maven { url = uri("https://artifact.bytedance.com/repository/pangle") }
    }
}
android/app/build.gradleにKotlinプラグインとバックフィル依存関係を追加します。
android/app/build.gradle
apply plugin: "kotlin-android"

dependencies {
    implementation 'io.adrop:adrop-ads-backfill:1.7.6'
}
android/app/src/main/AndroidManifest.xmlにバックフィルApp IDを追加します。
android/app/src/main/AndroidManifest.xml
<manifest>
    <application>
        <!-- Backfill App ID -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>
App IDの発行についてはAdropにお問い合わせください。

3. iOS設定

ios/Podfileを修正します。
ios/Podfile
use_frameworks!

target 'YourApp' do
  # その他の依存関係...

  # バックフィル広告SDK
  pod 'adrop-ads-backfill'
end
Podをインストールします。
cd ios && pod install --repo-update && cd ..

4. Info.plistの設定

バックフィル広告のためにios/YourApp/Info.plistに以下の設定を追加します。
  • GADApplicationIdentifier: バックフィル広告用のApp ID
  • SKAdNetworkItems: iOS 14以降で広告コンバージョントラッキングに必要
Info.plist
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy</string>

<key>SKAdNetworkItems</key>
<array>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cstr6suwn9.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4fzdc2evr5.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>4pfyvq9l8r.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>2fnua5tdw4.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ydx93a7ass.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>5a6flpkh64.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>p78axxw29g.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>v72qych5uu.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>ludvb6z3bs.skadnetwork</string>
    </dict>
    <dict>
        <key>SKAdNetworkIdentifier</key>
        <string>cp8zw746q7.skadnetwork</string>
    </dict>
</array>
SKAdNetworkItemsの全リストとApp IDの発行についてはAdropにお問い合わせください。

初期化

アプリ起動時にSDKを初期化します。通常はApp.tsxまたはindex.jsで呼び出します。
App.tsx
import { Adrop } from 'adrop-ads-react-native';

// アプリ起動時に初期化
Adrop.initialize(false); // false: テストモード、true: プロダクションモード

初期化オプション

Adrop.initialize(
  production,        // boolean: プロダクションモードかどうか
  targetCountries,   // string[]?: ターゲット国コード配列 (オプション)
  useInAppBrowser    // boolean?: iOSアプリ内ブラウザ使用有無 (オプション)
);
パラメータ
パラメータタイプ必須説明
productionbooleanYtrue: プロダクションモード、false: テストモード
targetCountriesstring[]N広告を表示する国コード (例: ['KR', 'US'])
useInAppBrowserbooleanNiOSでアプリ内ブラウザを使用するかどうか (デフォルト: false)
// 基本初期化 (テストモード)
Adrop.initialize(false);

// プロダクションモード + 特定国ターゲティング
Adrop.initialize(true, ['KR', 'JP', 'US']);

// プロダクションモード + iOSアプリ内ブラウザ使用
Adrop.initialize(true, undefined, true);

テーマ設定

広告UIテーマを設定します。
import { Adrop, AdropTheme } from 'adrop-ads-react-native';

// テーマ設定
Adrop.setTheme(AdropTheme.auto);  // システム設定に従う
Adrop.setTheme(AdropTheme.light); // ライトモード
Adrop.setTheme(AdropTheme.dark);  // ダークモード
テーマ説明
AdropTheme.autoシステム設定に応じて自動切り替え
AdropTheme.lightライトモード
AdropTheme.darkダークモード

ユーザー識別子設定

ターゲティング広告のためにユーザー識別子(UID)を設定します。
import { Adrop } from 'adrop-ads-react-native';

Adrop.setUID('user_123');
UIDはSHA-256でハッシュ化されて送信されます。メールアドレス、電話番号などの個人情報を直接渡さないでください。

テストユニットID

開発とテスト時には以下のテストユニットIDを使用してください。
フォーマットテストユニットID
バナー (320x50)PUBLIC_TEST_UNIT_ID_320_50
バナー (320x100)PUBLIC_TEST_UNIT_ID_320_100
ネイティブPUBLIC_TEST_UNIT_ID_NATIVE
インタースティシャル広告PUBLIC_TEST_UNIT_ID_INTERSTITIAL
リワード広告PUBLIC_TEST_UNIT_ID_REWARDED
ポップアップ広告PUBLIC_TEST_UNIT_ID_POPUP
import { Adrop } from 'adrop-ads-react-native';

// バナー広告テスト
const testBannerUnitId = Adrop.PUBLIC_TEST_UNIT_ID_320_50;
プロダクション配布前に必ず実際のユニットIDに置き換えてください。

エラーコード

SDKで発生する可能性のあるエラーコードです。
エラーコード説明
ERROR_CODE_NETWORKネットワークエラー
ERROR_CODE_INTERNAL内部エラー
ERROR_CODE_INITIALIZESDK初期化エラー
ERROR_CODE_INVALID_UNIT無効なユニットID
ERROR_CODE_NOT_TARGET_COUNTRYターゲット国ではない
ERROR_CODE_AD_INACTIVE非アクティブ広告
ERROR_CODE_AD_NO_FILL表示できる広告なし
ERROR_CODE_AD_LOAD_DUPLICATED重複ロードリクエスト
ERROR_CODE_AD_LOADINGロード進行中
ERROR_CODE_AD_EMPTY空の広告
ERROR_CODE_AD_SHOWNすでに表示された広告
ERROR_CODE_AD_HIDE_FOR_TODAY今日は非表示に設定された広告
ERROR_CODE_LANDSCAPE_UNSUPPORTED横向きモード非対応
import { AdropErrorCode } from 'adrop-ads-react-native';

// エラー処理例
if (errorCode === AdropErrorCode.adNoFill) {
  console.log('表示できる広告がありません。');
}

トラブルシューティング

iOSビルドエラー

Swiftバージョン互換性の問題が発生した場合、ios/Podfilepost_installブロックに以下を追加してください。
ios/Podfile
post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
    end
  end
end

Androidビルドエラー

Kotlinバージョンが合わない場合、android/build.gradleでKotlinバージョンを確認してください。
android/build.gradle
buildscript {
    ext {
        kotlinVersion = '2.1.0'
    }
}

次のステップ