Adrop React Native SDKを使用すると、React Nativeアプリでさまざまな広告フォーマットを簡単に連携できます。
対応広告フォーマット
フォーマット 説明 バナー広告 画面の一部に表示される長方形の広告 ネイティブ広告 アプリコンテンツと自然に調和する広告 インタースティシャル広告 全画面を覆う広告 リワード広告 報酬を提供する全画面広告 ポップアップ広告 ポップアップ形式で表示される広告
必要要件
React Native
Android
APIレベル 23 (Android 6.0) 以上
compileSdkVersion 34
Kotlin 2.1.0 以上
Gradle 8.7 以上
iOS
インストール
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プラグインとバックフィル依存関係を追加します。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を修正します。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以降で広告コンバージョントラッキングに必要
< 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にお問い合わせください。
2. Config Pluginの作成 プロジェクトルートにplugins/withAdropService.jsファイルを作成します。このExpo config pluginはnpx expo prebuild実行時にネイティブプロジェクトにadrop_service.jsonを自動生成します。
Android: android/app/src/main/assets/adrop_service.json
iOS: ios/{projectName}/adrop_service.json
plugins/withAdropService.js
const { withDangerousMod } = require ( '@expo/config-plugins' )
const fs = require ( 'fs' )
const path = require ( 'path' )
function withAdropServiceAndroid ( config , props ) {
return withDangerousMod ( config , [
'android' ,
async ( config ) => {
const projectRoot = config . modRequest . projectRoot
const androidAssetsPath = path . join ( projectRoot , 'android' , 'app' , 'src' , 'main' , 'assets' )
if ( ! fs . existsSync ( androidAssetsPath )) fs . mkdirSync ( androidAssetsPath , { recursive: true })
const serviceConfig = { app_key: props . android ?. appKey || props . appKey || '' }
fs . writeFileSync ( path . join ( androidAssetsPath , 'adrop_service.json' ), JSON . stringify ( serviceConfig , null , 2 ))
return config
},
])
}
function withAdropServiceIOS ( config , props ) {
return withDangerousMod ( config , [
'ios' ,
async ( config ) => {
const projectRoot = config . modRequest . projectRoot
const projectName = config . modRequest . projectName
const iosPath = path . join ( projectRoot , 'ios' , projectName )
if ( ! fs . existsSync ( iosPath )) fs . mkdirSync ( iosPath , { recursive: true })
const serviceConfig = { app_key: props . ios ?. appKey || props . appKey || '' }
fs . writeFileSync ( path . join ( iosPath , 'adrop_service.json' ), JSON . stringify ( serviceConfig , null , 2 ))
return config
},
])
}
module . exports = function withAdropService ( config , props = {}) {
config = withAdropServiceAndroid ( config , props )
config = withAdropServiceIOS ( config , props )
return config
}
3. app.jsonの設定 app.jsonのpluginsに以下の2つのプラグインを登録します。{
"expo" : {
"plugins" : [
[
"expo-build-properties" ,
{
"android" : { "compileSdkVersion" : 35 , "targetSdkVersion" : 35 , "minSdkVersion" : 24 },
"ios" : { "deploymentTarget" : "15.1" }
}
],
[
"./plugins/withAdropService" ,
{
"android" : { "appKey" : "<YOUR_ANDROID_APP_KEY>" },
"ios" : { "appKey" : "<YOUR_IOS_APP_KEY>" }
}
]
]
}
}
expo-build-properties : Android minSdkVersion 24以上、iOS deploymentTarget 15.1以上が必要
withAdropService : Adropコンソールで発行されたappKeyをプラットフォームごとに渡す
初期化
アプリ起動時にSDKを初期化します。通常はApp.tsxまたはindex.jsで呼び出します。
import { Adrop } from 'adrop-ads-react-native' ;
// アプリ起動時に初期化
Adrop . initialize ( false ); // false: テストモード、true: プロダクションモード
初期化オプション
Adrop . initialize (
production , // boolean: プロダクションモードかどうか
targetCountries , // string[]?: ターゲット国コード配列 (オプション)
useInAppBrowser // boolean?: iOSアプリ内ブラウザ使用有無 (オプション)
);
パラメータ
パラメータ タイプ 必須 説明 productionbooleanY true: プロダクションモード、false: テストモードtargetCountriesstring[]N 広告を表示する国コード (例: ['KR', 'US']) useInAppBrowserbooleanN iOSでアプリ内ブラウザを使用するかどうか (デフォルト: 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/Podfileのpost_installブロックに以下を追加してください。
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バージョンを確認してください。
buildscript {
ext {
kotlinVersion = '2.1.0'
}
}
次のステップ