React ネイティブ向けネイティブ広告インテグレーション
ネイティブ広告を React ネイティブ アプリケーションに統合し、事前定義済みまたはカスタムテンプレートを使用してカスタマイズ可能な広告体験を提供します。
読み終わるまでの所要時間 16 分最終更新 6日前
ネイティブ広告は、アプリケーション内の他のコンテンツに溶け込むようにカスタマイズできる広告の形式です。これにより、広告がよりオーガニックに表示され、ユーザー エクスペリエンスとリテンションの向上につながります。
前提条件
LevelPlay React ネイティブプラグイン 8.4.0 以降がアプリケーションに正しく統合されていることを確認します。インテグレーションの概要はこちらです。
LevelPlay ネイティブ広告の統合
React ネイティブプラグインを使用して LevelPlay ネイティブ広告を統合する方法は 2 つあります。
- **ネイティブテンプレート:**プラグインが提供する定義済みのテンプレート (XML と XIB ファイル)
- **カスタムテンプレート:**開発者によってスタイル設定および設計されたカスタムテンプレート。
ネイティブ
ネイティブは、ネイティブ広告ロジックを実装する定義済みビューです。この設定は、広告がロードされた後にビューの数を処理し、広告が破棄された後にビューをクリアします。
2 つのテンプレートオプションがあります。
- 小:メディアビューを含まないテンプレート。
- 中:メディアビューを特徴とするテンプレート。
スタイリングは一般的に似ていますが、好みに応じてカスタマイズすることもできます。
ネイティブを統合するには、以下のステップに従います。
ステップ 1. Create LevelPlayNativeAd Object
LevelPlayNativeAdView コンテナへの広告のロードを担当する LevelPlayNativeAd オブジェクトを作成します。このオブジェクトはロード、破棄などの広告メソッドをハンドルし、広告の配置とイベントコールバックのリスナーを定義します。
import { LevelPlayNativeAd, type LevelPlayNativeAdListener, type LevelPlayAdInfo, type LevelPlayAdError,} 'unity-levelplay-mediation' からnativeAd = LevelPlayNativeAd.builder() .withPlacement('YOUR_PLACEMENT') .withListener(listener) .build();
ステップ 2. リスナーの実装
LevelPlayNativeAdListener をコードに実装します。LevelPlay SDK は、ネイティブ広告アクティビティを通知するためにいくつかのコールバックを起動します。SDK は、以下のすべてのイベントをリスナーに通知します。
const listener:LevelPlayNativeAdListener = { /** ネイティブ広告がクリックされた後に呼び出されます。*/ onAdClicked: (nativeAd:LevelPlayNativeAd, adInfo:LevelPlayAdInfo) => {}, /** ネイティブアドインプレッションが記録された後に呼び出されます。*/ onAdImpression: (nativeAd:LevelPlayNativeAd, adInfo:LevelPlayAdInfo) => {}, /** ネイティブ広告のロードが試行されて失敗した後に呼び出されます。*/ onAdLoadFailed: (nativeAd:LevelPlayNativeAd、エラー:LevelPlayAdError) => {}, /** ネイティブ広告が正常にロードされた後に呼び出されます。*/ onAdLoaded: (nativeAd:LevelPlayNativeAd, adInfo:LevelPlayAdInfo) => {},};
ステップ 3. Create LevelPlayNativeAdView
LevelPlayNativeAdView コンポーネントを作成し、ロードされたネイティブ広告をホストするコンテナを定義します。このオブジェクトは、幅と高ささを決定するか、コンテナのボックス制約を設定することで、ネイティブの広告境界を定義します。また、タイトル、ボディ、広告主、アクション呼び出しボタンなどのネイティブ広告要素のスタイル設定もハンドルできます。
注
ネイティブの場合、デフォルトのタイプは SMALL で、ウィジェット作成時にテンプレートタイプを定義することで変更できます。
<LevelPlayNativeAdView style={{ width:300// 中サイズのタイプに推奨される幅 高さ:350 // Medium タイプに推奨される高ささ }} nativeAd={nativeAd} templateType={LevelPlayTemplateType.Medium} templateStyle={[[LevelPlayNativeAdTemplateStyle] optional]} /><LevelPlayNativeAdView style={{ width:300、// Small Type に推奨される幅 高さ:175 // Small Type に推奨される高ささ }} nativeAd={nativeAd} templateType={LevelPlayTemplateType.Small} templateStyle={[[LevelPlayNativeAdTemplateStyle] optional]} />
ステップ 3. 広告のロード
loadAd メソッドを呼び出してネイティブ広告をロードします。useEffect フック、フックしたとき、または開発者が決めた別のタイミングで呼び出すことができます。
nativeAd?.loadAd();
ステップ 4. ネイティブ広告の破棄
ネイティブ広告を破棄するには、以下のメソッドを呼び出します。
nativeAd?.destroyAd();
破棄されたネイティブ広告はロードできません。再度提供する場合は、広告コンテナコンポーネントを再作成する必要があります。
カスタムテンプレート設定
カスタムテンプレートを使用すると、特定のニーズに合わせて独自のスタイルと機能を設計できます。レイアウトと機能を柔軟にカスタマイズできるため、一意のユーザー体験が実現します。
これらのテンプレートは、主に広告デザインをより高いレベルでコントロールする必要がある場合に使用されます。Android と iOS の両方のプラットフォームに実装でき、追加コード実装が必要です。
カスタムテンプレートを作成するには、ネイティブコードを記述し、独自のカスタムレイアウトを開発する必要があります。インテグレーションのステップは以下の通りです。
ステップ 1. NativeAdViewManager の作成
LevelPlayNativeAdViewManager を拡張し、カスタマイズされたレイアウトでロードされた広告をディスプレイするクラスの Android または iOS 実装。
Android
// Android Implementationimport android.widget.Buttonimport android.widget.ImageViewimport android.widget.TextViewimport com.facebook.react.bridge.ReactApplicationContextimport com.ironsource.mediationsdk.ads.nativead.LevelPlayMediaViewimport com.ironsource.mediationsdk.ads.nativead.LevelPlayNativeAdimport com.ironsource.mediationsdk.ads.nativead.NativeAdLayoutimport com.ironsource.react_native_mediation.Rimport com.ironsource.react_native_mediation.RCTLevelPlayNativeAdViewManagerclass NativeAdViewManagerExample( reactApplicationContext:ReactApplicationContext, layoutId:Int):RCTLevelPlayNativeAdViewManager(reactApplicationContext, layoutId) { override fun bindNativeAdToView(nativeAd:LevelPlayNativeAd?, nativeAdLayout:NativeAdLayout) { // Extract views val titleView = nativeAdLayout.findViewById<TextView>(R.id.adTitle) val bodyView = nativeAdLayout.findViewById<TextView>(R.id.adBody) val advertiserView = nativeAdLayout.findViewById<TextView>(R.id.adAdvertiser) val callToActionView = nativeAdLayout.findViewById<Button>(R.id.adCallToAction) val iconView = nativeAdLayout.findViewById<ImageView>(R.id.adAppIcon) val mediaView：LevelPlayMediaView? = nativeAdLayout.findViewById(R.id.adMedia) // Bind native ad to view if (nativeAd != null) { if (nativeAd.title != null) { titleView.text = nativeAd.title nativeAdLayout.setTitleView(titleView) } if (nativeAd.body != null) { bodyView.text = nativeAd.body nativeAdLayout.setBodyView(bodyView) } if (nativeAd.advertiser != null) { advertiserView.text = nativeAd.advertiser nativeAdLayout.setAdvertiserView(advertiserView) } if (nativeAd.callToAction != null) { callToActionView.text = nativeAd.callToAction nativeAdLayout.setCallToActionView(callToActionView) } if (nativeAd.icon != null) { iconView!!.setImageDrawable(nativeAd.icon!!.drawable) nativeAdLayout.setIconView(iconView) } if (mediaView != null) { nativeAdLayout.setMediaView(mediaView) } nativeAdLayout.registerNativeAdViews(nativeAd) } } override fun getName():文字列 { return "ExampleViewType" }}
iOS
// iOS Implementation /// h file#import <Foundation/Foundation.h>#import <LevelPlay/LevelPlay.h>#import "RCTLevelPlayNativeAdViewManager.h"@interface NativeAdViewManagerExample :RCTLevelPlayNativeAdViewManager <RCTLevelPlayNativeAdViewManagerDelegate>@end/// m file#import "NativeAdViewManagerExample.h"@implementation NativeAdViewManagerExampleRCT＿エクスポート＿MODULE（ExampleViewType） // ビュー タイプ定義- (instancetype)init{ self = [super initWithDelegate:self layoutName:@"MyCustomNativeAdViewTemplate"]; return self;}- (void)bindNativeAdToView:(LevelPlayNativeAd *)nativeAd isNativeAdView:(ISNativeAdView *)isNativeAdView { // Extract views UILabel *titleView = isNativeAdView.adTitleView; UILabel *bodyView = isNativeAdView.adBodyView; UILabel *advertiserView = isNativeAdView.adBodyView; UIButton *callToActionView = isNativeAdView.adCallToActionView; UIImageView *iconView = isNativeAdView.adAppIcon; LevelPlayMediaView *mediaView = isNativeAdView.adMediaView; // Bind native ad to view if (nativeAd != nil) { if (nativeAd.title != nil) { titleView.text = nativeAd.title; [isNativeAdView setAdTitleView:titleView]; } if (nativeAd.body != nil) { bodyView.text = nativeAd.body; [isNativeAdView setAdBodyView:bodyView]; } if (nativeAd.advertiser != nil) { advertiserView.text = nativeAd.advertiser; [isNativeAdView setAdAdvertiserView:advertiserView]; } if (nativeAd.callToAction != nil) { [callToActionView setTitle:nativeAd.callToAction forState:UIControlStateNormal]; [isNativeAdView setAdCallToActionView:callToActionView]; } if (nativeAd.icon != nil) { iconView.image = nativeAd.icon.image; [isNativeAdView setAdAppIcon:iconView]; } if (mediaView != nil) { [isNativeAdView setAdMediaView:mediaView]; } // Register native ad views with the provided native ad [isNativeAdView registerNativeAdViews:nativeAd]; }}@end
カスタムビュータイプの文字列は、React ネイティブ側の LevelPlayNativeAdView コンポーネントで指定された viewType と一致する必要があります。
- Android の場合、オーバーライドされた getName メソッドでビューの文字文字列を返します。オーバーライドされたメソッド getName でビューの文字文字列を返します。
- iOS の場合、ビュー タイプの文字列は RCT_エクスポート_モジュール** で指定する必要があります。
ステップ 2. Android 用の NativeAdViewManager の登録
LevelPlayNativeAdViewManager クラスを拡張するカスタムネイティブ広告クラスを作成したら、MainApplication で Android クラスを登録します。
注
カスタムビュータイプの文字列は、React ネイティブ側の LevelPlayNativeAdView コンポーネントで設定された viewType と一致する必要があります。iOS の場合、モジュールエクスポートは登録として機能するため、追加設定は必要ありません。
// Android Implementationパッケージ com.Ironsource.reactnativetesterimport android.app.Applicationimport com.facebook.react.PackageListimport com.facebook.react.ReactApplicationimport com.facebook.react.ReactHostimport com.facebook.react.ReactNativeHostimport com.facebook.react.ReactPackageimport com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.loadimport com.facebook.react.defaults.DefaultReactHost.getDefaultReactHostimport com.facebook.react.defaults.DefaultReactNativeHostimport com.facebook.soloader.SoLoaderimport com.unity3d.reactnative.LevelPlayMediationPackageクラス MainApplication ：アプリケーション(), ReactApplication { オーバーライド val reactNativeHost：ReactNativeHost = オブジェクト ：DefaultReactNativeHost(this) { override fun getPackages():リスト<ReactPackage> ＝ PackageList(this).packages.apply { // Packages that cannot be autolinked yet can be added manually here, for example: add(CustomPackage()) } override fun getJSMainModuleName():String = "index" override fun getUseDeveloperSupport():Boolean = BuildConfig.DEBUG オーバーライド val isNewArchEnabled：Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED オーバーライド val isHermesEnabled：Boolean = BuildConfig.IS_HERMES_ENABLED } オーバーライド val reactHost：ReactHost get() = getDefaultReactHost(applicationContext, reactNativeHost) override fun onCreate() { super.onCreate() SoLoader.init(this, false) if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) { // If you opted-in for the New Architecture, we load the native entry point for this app. load() } // Register custom view managers LevelPlayMediationPackage.registerViewManager("ExampleViewType") { reactContext -> NativeAdViewManagerExample(reactContext, R.layout.my_custom_native_ad_view) } }}
- Android での NativeAdView レイアウトの設定例については、my＿custom＿ネイティブ＿ad＿ビュー＿テンプレート.xml を参照してください。
- iOS での NativeAdView レイアウトの設定例は、GitHub を参照してください。
ステップ 3. Create LevelPlayNativeAdView
LevelPlayNativeAdView コンポーネントを作成し、ロードされたネイティブ広告をホストするコンテナを定義します。このオブジェクトは、幅と高ささを決定するか、コンテナのボックス制約を設定することで、ネイティブの広告境界を定義します。また、タイトル、ボディ、広告主、アクション呼び出しボタンなどのネイティブ広告要素のスタイル設定もハンドルできます。
注
カスタムテンプレートを作成する場合は、viewType がネイティブの Android または iOS セクションで指定されている一意ののビューと一致することを確認してください。
<LevelPlayNativeAdView style={{ width:300， // ネイティブ広告コンテナに推奨される幅 高さ:350, // 推奨例: 中スタイルレイアウト) }} nativeAd={nativeAd} viewType="ExampleViewType" templateStyle={templateStyle} // optional:LevelPlayNativeAdTemplateStyle />
ステップ 4. 広告のロード
loadAd メソッドを呼び出してネイティブ広告をロードします。useEffect 時、または開発者が決めた別のタイミングで呼び出すことができます。
nativeAd?.loadAd();
ステップ 5.ネイティブ広告の破棄
ネイティブ広告を破棄するには、ネイティブ広告オブジェクトの destroyAd メソッドを実行します。
nativeAd?.destroyAd();
破棄されたネイティブ広告はロードできません。再度提供する場合は、広告コンテナコンポーネントを再作成する必要があります。