Menetapkan fitur native lanjutan

Iklan native menyediakan fitur lanjutan berikut yang memungkinkan Anda menyesuaikan integrasi iklan:

  • Kontrol pemutaran video: Sesuaikan perilaku pemutaran video dan dengarkan peristiwa siklus proses video.
  • Penempatan ikon AdChoices: Sesuaikan penempatan ikon AdChoices.
  • Gestur klik kustom: Konfigurasikan gestur geser sebagai tindakan klik.

Panduan ini menunjukkan cara menggunakan fitur lanjutan iklan native dengan Google Mobile Ads SDK for React Native.

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Mengelola pemutaran dan peristiwa video

Saat meminta iklan native yang berisi aset video, sesuaikan opsi memulai pemutaran video, dengarkan peristiwa siklus proses video, dan kontrol pemutaran video.

Mengonfigurasi opsi permintaan video

Untuk menyesuaikan perilaku video awal, tetapkan properti videoOptions pada objek NativeAdRequest menggunakan objek VideoOptions.

Contoh berikut menyetel video agar dimulai dalam keadaan dibisukan saat pemutaran dimulai:

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;
  }
}

Setelah iklan dimuat, contoh ini juga memeriksa apakah iklan berisi aset video, mencatat metadata video ke dalam log, dan menampilkan iklan yang dimuat. Jika gagal, contoh akan mencatat pesan error ke dalam log.

Untuk mengetahui informasi selengkapnya tentang properti metadata video, seperti rasio aspek, waktu saat ini, dan durasi, lihat MediaContent.

Memproses peristiwa video

Untuk memproses peristiwa siklus proses video, seperti saat video dimulai atau berakhir, teruskan callback peristiwa dari antarmuka VideoControllerEventProps ke komponen NativeAdMediaView.

Contoh berikut meneruskan callback untuk mencatat peristiwa siklus proses video ke dalam log dan merender tombol kustom untuk mengontrol pemutaran video:

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>
  );
}

Saat Anda mengaktifkan kontrol kustom, kontrol pemutaran video dengan melampirkan properti ref dari jenis NativeAdMediaViewMethods ke komponen NativeAdMediaView. Jenis NativeAdMediaViewMethods memberi alias antarmuka VideoControllerMethods, yang mengekspos metode playVideo, pauseVideo, stopVideo, dan setVideoMuted pada objek ref.

Mengonfigurasi penempatan AdChoices

Untuk menyesuaikan penempatan ikon AdChoices, tentukan properti adChoicesPlacement pada objek NativeAdRequest menggunakan objek AdChoicesPlacement.

Contoh berikut mengonfigurasi penempatan ikon AdChoices di pojok kiri atas pada panggilan iklan:

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;
  }
}

Contoh ini juga menampilkan iklan yang dimuat jika berhasil dan mencatat pesan error ke dalam log jika gagal.

Mengonfigurasi gestur klik kustom

Konfigurasikan gestur geser sebagai tindakan klik pada iklan native menggunakan properti customClickGestureDirection dan customClickGestureAllowTaps pada objek NativeAdRequest.

Contoh berikut mengonfigurasi arah gestur sebagai geser ke kanan dan mengizinkan ketukan saat memuat iklan:

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;
  }
}

Contoh ini juga memeriksa apakah gestur klik kustom diaktifkan, menampilkan iklan yang dimuat jika berhasil, dan mencatat error ke dalam log jika gagal.

Setelah memuat iklan, periksa properti ad.isCustomClickGestureEnabled untuk memverifikasi apakah gestur klik kustom aktif untuk iklan tersebut.

Langkah berikutnya

Setelah mengonfigurasi fitur lanjutan iklan native, Anda dapat mempelajari hal berikut: