アプリ起動時広告は、ユーザーがアプリを開いたとき、またはアプリに戻ったときに表示されます。ユーザーはいつでもアプリ起動時広告を閉じることができます。アプリの読み込み画面を収益化するには、アプリ起動時広告を使用します。詳しくは、次のページをご覧ください。
アプリ起動時広告に関するガイドラインとベスト プラクティスこのガイドでは、React Native アプリにアプリ起動時広告を組み込む方法について説明します。
前提条件
先に進む前に、次のことを実施してください。
- Google Mobile Ads SDK for React Native を設定します。
- テスト広告を有効にして、次のテスト広告ユニットを使用します。
Android
ca-app-pub-3940256099942544/9257395921
iOS
ca-app-pub-3940256099942544/5575463023
広告を読み込む
アプリ起動時広告を読み込むには、load メソッドを呼び出します。
次の例では、成功した場合はアプリ起動時広告を読み込み、失敗した場合はエラーをログに記録します。
export async function loadAppOpenAd(
adUnitId: string,
): Promise<AppOpenAd | null> {
try {
const ad = await AppOpenAd.load({adUnitId});
return ad;
} catch (error) {
const loadError = error as LoadAdError;
console.error('Failed to load app open ad:', loadError.message);
return null;
}
}
広告イベントをリッスンする
広告を表示する前に、読み込まれた AppOpenAd インスタンスに adEventCallback リスナーを設定します。このリスナーは、広告が画面に表示されたときや、ユーザーが広告をタップしたときなど、広告のライフサイクル イベントのコールバックを受け取ります。使用可能なコールバックについては、AdEventCallback をご覧ください。
次の例では、広告イベントをリッスンするコールバックを設定しています。
export function registerAdEvents(ad: AppOpenAd) {
ad.adEventCallback = {
// Called when the ad is presented on screen.
onAdShowedFullScreenContent: () => {
console.log('App open ad showed full screen content.');
},
// Called when the ad is closed by the user.
onAdDismissedFullScreenContent: () => {
console.log('App open ad dismissed full screen content.');
ad.destroy();
},
// Called when presentation fails.
onAdFailedToShowFullScreenContent: (error) => {
console.error('Failed to show app open ad:', error);
ad.destroy();
},
// Called when an impression is recorded.
onAdImpression: () => {
console.log('App open ad recorded an impression.');
},
// Called when the user taps the ad.
onAdClicked: () => {
console.log('App open ad was clicked.');
},
// Called when the ad is estimated to have earned money.
onAdPaid: (adValue) => {
console.log(
`App open ad paid: ${adValue.amountMicros} ${adValue.currencyCode}`,
);
},
};
}
この例では、ユーザーが広告を閉じたときや、広告の表示に失敗したときにも destroy メソッドを使用しています。このプロセスにより、広告で使用されたリソースが解放されます。
広告を表示する
アプリ起動時広告を表示するには、show メソッドを呼び出します。
export function showAppOpenAd(ad: AppOpenAd) {
ad.show();
}
アプリレベルのマネージャーで広告を管理する
アプリ起動時広告は、React コンポーネント ツリー外のアプリレベルのマネージャーで管理することをおすすめします。アプリ起動時広告は、ユーザーがアプリを開いたとき、またはアプリに戻ったときにグローバルに表示されるため、アプリレベルのマネージャーによって広告がユーザー インターフェースから分離されます。
次の例では、広告を読み込み、広告イベントをリッスンし、広告の可用性を確認する SingleLoadAppOpenAdManager インスタンスを作成します。
export class SingleLoadAppOpenAdManager {
private ad: AppOpenAd | null = null;
private loadTime = 0;
private isShowingAd = false;
async loadAd(adUnitId: string) {
// Avoid re-loading if an ad is already loaded or showing.
if (this.ad) {
return;
}
try {
this.ad = await AppOpenAd.load({adUnitId});
this.loadTime = Date.now();
this.ad.adEventCallback = {
onAdDismissedFullScreenContent: () => {
this.ad?.destroy();
this.ad = null;
this.isShowingAd = false;
// Preload the next ad for future foreground transitions.
this.loadAd(adUnitId);
},
onAdFailedToShowFullScreenContent: () => {
// An ad object that fails to present is consumed and cannot be reused.
// Clean up native resources and preload a new ad for future events.
this.ad?.destroy();
this.ad = null;
this.isShowingAd = false;
this.loadAd(adUnitId);
},
};
} catch (error) {
console.error('Failed to load app open ad:', error);
}
}
showAdIfAvailable() {
if (!this.ad || !this.isAdAvailable()) {
console.warn(
'App open ad cannot be shown: ad is not loaded or has expired.',
);
return;
}
if (this.isShowingAd) {
console.warn('App open ad cannot be shown: an ad is already displaying.');
return;
}
this.ad.show();
this.isShowingAd = true;
}
isAdAvailable(): boolean {
// App Open ads expire after 4 hours per Google Mobile Ads policy.
const FOUR_HOURS_IN_MS = 4 * 60 * 60 * 1000;
return this.ad !== null && Date.now() - this.loadTime < FOUR_HOURS_IN_MS;
}
}
アプリレベルのマネージャーは、次のことを行うのに役立ちます。
- 広告の状態を、画面のナビゲーションやコンポーネントのライフサイクルから独立させます。
- ネイティブ スレッド イベント全体で広告の表示状態を追跡します。
- アプリのフォアグラウンドへの移行を処理して、広告が繰り返し表示されないようにします。
- バックグラウンドで広告をプリロードして、アプリが開いたときに広告を表示できるようにします。
- 期限切れの広告が表示されないように、広告の有効期限（4 時間）を確認します。
- 広告リソースの読み込み、表示、クリーンアップを組み合わせる。
アプリのフォアグラウンド イベントをリッスンする
アプリがフォアグラウンドに戻ったときにディスプレイ広告を表示するには、AppState モジュールを使用して、アプリのルート（App.tsx ファイルなど）でアプリの状態の変化をリッスンします。手順は次のとおりです。
'change'イベントのAppStateリスナーを登録します。- 状態が
'active'状態に移行したら、広告マネージャー インスタンスでshowAdIfAvailableメソッドを呼び出します。
次の例では、アプリのフォアグラウンド イベントをリッスンし、広告が利用可能な場合は表示します。
export function setupAppOpenAdForegroundListener(adManager: {
showAdIfAvailable: () => void;
}): NativeEventSubscription {
return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
if (nextAppState === 'active') {
adManager.showAdIfAvailable();
}
});
}
コールド スタートと読み込み画面について
コールド スタートは、アプリがゼロから起動するときに発生します。たとえば、ユーザーが初めてアプリを開くときや、デバイスがメモリを解放するためにアプリを閉じた後に発生します。コールド スタートでは、次に表示する読み込み済みのアプリ起動時広告がありません。
広告リクエストの遅延により、広告が表示される前にユーザーがアプリを操作する可能性があります。ユーザー エクスペリエンスを損なわないように、コールド スタート時のアプリ起動時広告は、アセットの読み込み中に読み込み画面からのみ表示します。アセットの読み込みが完了し、広告の読み込みが完了する前にユーザーがメイン コンテンツに到達した場合は、広告を表示しないでください。
テスト画面をセットアップする
広告をインタラクティブにテストする場合や、特定の画面に広告を表示する場合は、コンポーネントの状態の広告インスタンスを管理します。
次の例では、useEffect クリーンアップ フックを使用して、アプリ起動時広告を React Native コンポーネントに統合しています。広告が表示される前にコンポーネントがマウント解除されると、このフックはネイティブ リソースを解放します。
次のステップ
アプリ起動時広告を統合したら、次のトピックをご覧ください。