ネイティブ広告には、広告の統合をカスタマイズできる次の高度な機能が用意されています。
- 動画再生コントロール: 動画再生の動作をカスタマイズし、動画のライフサイクル イベントをリッスンします。
- AdChoices アイコンの配置: AdChoices アイコンの配置をカスタマイズします。
- カスタム クリック操作: スワイプ操作をクリック操作として設定します。
このガイドでは、Google Mobile Ads SDK for React Native でネイティブ広告の高度な機能を使用する方法について説明します。
前提条件
先に進む前に、次のことを実施してください。
動画の再生とイベントを管理する
動画アセットを含むネイティブ広告をリクエストする際に、動画再生の起動オプションをカスタマイズし、動画のライフサイクル イベントをリッスンして、動画再生を制御します。
動画リクエスト オプションを構成する
動画の初期動作をカスタマイズするには、VideoOptions オブジェクトを使用して、NativeAdRequest オブジェクトの videoOptions プロパティを設定します。
次の例では、再生開始時に動画をミュートするように設定しています。
export async function loadNativeVideoAd(
adUnitId: string,
): Promise<NativeAd | null> {
try {
const ad = await NativeAd.load({
adUnitId,
videoOptions: {
// Autoplay video with sound muted.
startMuted: true,
},
});
// Inspect video metadata if the ad contains video content.
if (ad.mediaContent.hasVideoContent) {
console.log('Video duration in seconds:', ad.mediaContent.duration);
console.log('Video aspect ratio:', ad.mediaContent.aspectRatio);
}
return ad;
} catch (error) {
const loadError = error as LoadAdError;
console.error('Failed to load native video ad:', loadError.message);
return null;
}
}
この例では、広告の読み込み後、広告に動画アセットが含まれているかどうかも確認し、動画のメタデータをログに記録して、読み込まれた広告を返します。失敗すると、この例ではエラー メッセージがログに記録されます。
アスペクト比、現在の時刻、再生時間などの動画メタデータ プロパティの詳細については、MediaContent をご覧ください。
動画イベントをリッスンする
動画の開始や終了などの動画ライフサイクル イベントをリッスンするには、VideoControllerEventProps インターフェースから NativeAdMediaView コンポーネントにイベント コールバックを渡します。
次の例では、動画のライフサイクル イベントをログに記録するコールバックを渡し、動画の再生を制御するカスタムボタンをレンダリングしています。
export function NativeAdWithVideoControls({ad}: {ad: NativeAd}) {
const mediaViewRef = useRef<NativeAdMediaViewMethods>(null);
return (
<NativeAdView ad={ad}>
{/* Video lifecycle callbacks */}
<NativeAdMediaView
ref={mediaViewRef}
// Called when video playback starts.
onVideoStart={() => {
console.log('Video playback started.');
}}
// Called when video playback resumes or plays.
onVideoPlay={() => {
console.log('Video is playing.');
}}
// Called when video playback pauses.
onVideoPause={() => {
console.log('Video playback paused.');
}}
// Called when video playback completes.
onVideoEnd={() => {
console.log('Video playback finished.');
}}
// Called when the video mute state changes.
onVideoMute={(isMuted: boolean) => {
console.log(`Video mute state changed: ${isMuted}`);
}}
/>
{/* Custom playback controls (Ad Manager customControlsRequested only) */}
<View>
{/* Plays or resumes the video. */}
<Button
title="Play"
onPress={() => mediaViewRef.current?.playVideo()}
/>
{/* Pauses video playback. */}
<Button
title="Pause"
onPress={() => mediaViewRef.current?.pauseVideo()}
/>
{/* Stops video playback and resets the playback position to the beginning. */}
<Button
title="Stop"
onPress={() => mediaViewRef.current?.stopVideo()}
/>
{/* Mutes or unmutes audio. */}
<Button
title="Mute"
onPress={() => mediaViewRef.current?.setVideoMuted(true)}
/>
<Button
title="Unmute"
onPress={() => mediaViewRef.current?.setVideoMuted(false)}
/>
</View>
</NativeAdView>
);
}
カスタム コントロールを有効にする場合は、NativeAdMediaViewMethods タイプの ref プロパティを NativeAdMediaView コンポーネントにアタッチして、動画の再生を制御します。NativeAdMediaViewMethods 型は VideoControllerMethods インターフェースのエイリアスです。このインターフェースは、ref オブジェクトの playVideo、pauseVideo、stopVideo、setVideoMuted メソッドを公開します。
AdChoices の配置を設定する
AdChoices アイコンの配置をカスタマイズするには、AdChoicesPlacement オブジェクトを使用して、NativeAdRequest オブジェクトの adChoicesPlacement プロパティを指定します。
次の例では、広告リクエストで AdChoices アイコンを左上に配置するように設定しています。
export async function loadNativeAdWithAdChoicesPlacement(
adUnitId: string,
): Promise<NativeAd | null> {
try {
const ad = await NativeAd.load({
adUnitId,
// Render the AdChoices icon in the top-left corner.
adChoicesPlacement: AdChoicesPlacement.TOP_LEFT,
});
return ad;
} catch (error) {
const loadError = error as LoadAdError;
console.error('Failed to load native ad:', loadError.message);
return null;
}
}
この例では、成功した場合は読み込まれた広告が返され、失敗した場合はエラー メッセージがログに記録されます。
カスタム クリック操作を構成する
NativeAdRequest オブジェクトの customClickGestureDirection プロパティと customClickGestureAllowTaps プロパティを使用して、ネイティブ広告のクリック操作としてスワイプ操作を設定します。
次の例では、ジェスチャーの方向を右スワイプとして構成し、広告の読み込み時にタップを許可しています。
export async function loadNativeAdWithCustomClick(
adUnitId: string,
): Promise<NativeAd | null> {
try {
const ad = await NativeAd.load({
adUnitId,
// Require a right swipe gesture for clicks while allowing standard taps.
customClickGestureDirection: SwipeGestureDirection.RIGHT,
customClickGestureAllowTaps: true,
});
if (ad.isCustomClickGestureEnabled) {
console.log('Custom click gestures are enabled for this ad.');
}
return ad;
} catch (error) {
const loadError = error as LoadAdError;
console.error('Failed to load native ad:', loadError.message);
return null;
}
}
この例では、カスタムクリック ジェスチャーが有効になっているかどうかも確認し、成功した場合は読み込まれた広告を返し、失敗した場合はエラーをログに記録します。
広告を読み込んだら、ad.isCustomClickGestureEnabled プロパティをチェックして、その広告でカスタム クリック操作が有効になっているかどうかを確認します。
次のステップ
ネイティブ アドバンス広告の機能を設定したら、次のトピックをご覧ください。