Memuat satu iklan di layar pembuka aplikasi

Iklan di layar pembuka aplikasi muncul saat pengguna membuka atau kembali ke aplikasi Anda. Pengguna dapat menutup iklan di layar pembuka aplikasi kapan saja. Untuk memonetisasi layar pemuatan aplikasi, gunakan iklan di layar pembuka aplikasi. Untuk mengetahui detailnya, lihat

Panduan dan praktik terbaik iklan di layar pembuka aplikasi.

Panduan ini menjelaskan cara mengintegrasikan iklan di layar pembuka aplikasi ke dalam aplikasi React Native.

Prasyarat

Sebelum melanjutkan, lakukan hal berikut:

Android 

ca-app-pub-3940256099942544/9257395921

iOS 

ca-app-pub-3940256099942544/5575463023

Memuat iklan

Untuk memuat iklan di layar pembuka aplikasi, panggil metode load.

Contoh berikut memuat iklan di layar pembuka aplikasi jika berhasil dan mencatat error ke dalam log jika gagal:

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

Memproses peristiwa iklan

Sebelum menampilkan iklan, tetapkan pemroses adEventCallback pada instance AppOpenAd yang dimuat. Pemroses ini menerima callback peristiwa siklus proses iklan, seperti iklan yang ditampilkan di layar atau pengguna yang mengetuk iklan. Untuk callback yang tersedia, lihat AdEventCallback.

Contoh berikut menetapkan callback untuk memproses peristiwa iklan:

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

Contoh ini juga menggunakan metode destroy saat pengguna menutup iklan atau saat iklan gagal ditampilkan. Proses ini akan merilis resource yang digunakan iklan.

Menampilkan iklan

Untuk menampilkan iklan di layar pembuka aplikasi, panggil metode show:

export function showAppOpenAd(ad: AppOpenAd) {
  ad.show();
}

Mengelola iklan dengan pengelola tingkat aplikasi

Sebaiknya kelola iklan di layar pembuka aplikasi di pengelola level aplikasi di luar hierarki komponen React. Karena iklan di layar pembuka aplikasi muncul secara global saat pengguna membuka atau kembali ke aplikasi Anda, pengelola tingkat aplikasi akan memisahkan iklan dari antarmuka pengguna.

Contoh berikut membuat instance SingleLoadAppOpenAdManager yang memuat iklan, memproses peristiwa iklan, dan memeriksa ketersediaan iklan:

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

Pengelola tingkat aplikasi membantu Anda melakukan hal berikut:

  • Jaga agar status iklan tidak bergantung pada navigasi layar dan siklus proses komponen.
  • Lacak status presentasi iklan di seluruh peristiwa thread native.
  • Tangani transisi latar depan aplikasi untuk menghindari penayangan iklan berulang.
  • Pramuat iklan di latar belakang agar iklan tersedia saat aplikasi Anda dibuka.
  • Periksa batas masa berlaku iklan empat jam untuk menghindari penayangan iklan yang sudah tidak berlaku.
  • Gabungkan pemuatan, penayangan, dan pembersihan resource iklan.

Memproses peristiwa latar depan aplikasi

Untuk menampilkan iklan saat aplikasi Anda kembali ke latar depan, gunakan modul AppState untuk memproses perubahan status aplikasi di root aplikasi Anda, misalnya, di file App.tsx. Lakukan hal berikut:

  1. Daftarkan pemroses AppState untuk peristiwa 'change'.
  2. Saat status bertransisi ke status 'active', panggil metode showAdIfAvailable pada instance pengelola iklan.

Contoh berikut memproses peristiwa latar depan aplikasi dan menampilkan iklan jika tersedia:

export function setupAppOpenAdForegroundListener(adManager: {
  showAdIfAvailable: () => void;
}): NativeEventSubscription {
  return AppState.addEventListener('change', (nextAppState: AppStateStatus) => {
    if (nextAppState === 'active') {
      adManager.showAdIfAvailable();
    }
  });
}

Mempelajari cold start dan layar pemuatan

Cold start terjadi saat aplikasi Anda diluncurkan dari awal, misalnya, saat pengguna membuka aplikasi Anda untuk pertama kalinya atau setelah perangkat menutup aplikasi untuk mengosongkan memori. Selama cold start, Anda tidak memiliki iklan di layar pembuka aplikasi yang dimuat sebelumnya untuk ditampilkan berikutnya.

Karena penundaan panggilan iklan, pengguna Anda mungkin berinteraksi dengan aplikasi Anda sebelum iklan muncul. Untuk menghindari pengalaman pengguna yang buruk, tampilkan iklan di layar pembuka aplikasi saat cold start hanya dari layar pemuatan saat aset aplikasi dimuat. Jika aset selesai dimuat dan pengguna mencapai konten utama sebelum iklan dimuat, jangan tampilkan iklan.

Menyiapkan layar pengujian

Untuk menguji iklan secara interaktif atau menampilkan iklan di layar tertentu, kelola instance iklan dalam status komponen.

Contoh berikut mengintegrasikan iklan di layar pembuka aplikasi ke dalam komponen React Native dengan hook pembersihan useEffect. Jika komponen dilepas sebelum iklan ditampilkan, hook ini akan merilis resource native.

export function AppOpenSingleLoadScreen() {
  const [ad, setAd] = useState<AppOpenAd | null>(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [status, setStatus] = useState<string>('Idle');

  useEffect(() => {
    return () => {
      ad?.destroy();
    };
  }, [ad]);

  const handleLoad = async () => {
    setStatus('Loading App Open ad...');
    const loadedAd = await loadAppOpenAd(APP_OPEN_AD_UNIT_ID);
    if (loadedAd) {
      registerAdEvents(loadedAd);
      const onDismiss =
        loadedAd.adEventCallback?.onAdDismissedFullScreenContent;
      loadedAd.adEventCallback = {
        ...loadedAd.adEventCallback,
        onAdDismissedFullScreenContent: () => {
          onDismiss?.();
          setStatus('Ad dismissed.');
        },
      };
      setAd((prevAd) => {
        prevAd?.destroy();
        return loadedAd;
      });
      setIsLoaded(true);
      setStatus('App Open ad loaded!');
    } else {
      setStatus('Failed to load App Open ad.');
    }
  };

  const handleShow = () => {
    if (ad) {
      showAppOpenAd(ad);
      setIsLoaded(false);
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>App Open Ad</Text>
      <Text style={styles.status}>Status: {status}</Text>
      <View style={styles.buttonGroup}>
        <Button title="Load Ad" onPress={handleLoad} />
        <View style={styles.spacerSmall} />
        <Button title="Show Ad" onPress={handleShow} disabled={!isLoaded} />
      </View>
    </View>
  );
}

Langkah berikutnya

Setelah Anda mengintegrasikan iklan di layar pembuka aplikasi, pelajari topik berikut: