Cara Menampilkan Iklan Interstitial Admob Setelah 3 Kali Klik

Tutorial kali ini kita akan membahas bagaimana cara iklan Admob tipe Interstitial / iklan full layar ponsel yang tampil setelah 3 kali klik. Menampilkan terlalu banyak iklan di suatu aplikasi tentu sangat mengganggu apabila kita lihat dari sisi pengguna, sedangkan apabila tidak menampilkan iklan dari sisi developer tidak ada pemasukan dari penggunaan aplikasi, terkadang developer ingin menampilkan iklan full layar setelah terjadi 3 tiga kali aksi, misalkan aksi download akan menampilkan iklan setelah 3 kali klik.

import * as React from 'react';
import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import { AdMobInterstitial } from 'expo-ads-admob';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Constants from 'expo-constants';

const TEST_INTERSTITIAL_ID = 'ca-app-pub-3940256099942544/1033173712';
const ANDROID_INTERSTITIAL_ID = 'ca-app-pub-3940256099942544/1033173712'; // prod id

export default function App() {
  const INTERSTITIAL_ID = TEST_INTERSTITIAL_ID;

  const showInterstitial = async () => {
    var failToLoad = false;

    AdMobInterstitial.setAdUnitID(INTERSTITIAL_ID);

    AdMobInterstitial.addEventListener('interstitialDidFailToLoad', () => {
      console.log('interstitialDidFailToLoad');
    });

    AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true })
      .then(() => {
        AdMobInterstitial.showAdAsync()
          .then(() => {
            AsyncStorage.setItem('play_ads_times', '1');
          })
          .catch((e) => console.log(e));
        return true;
      })
      .catch((error) => {
        failToLoad = true;
        console.log('error requestAdAsync catch ', error);
        AdMobInterstitial.dismissAdAsync().then((e) => {
          console.log(e);
        });
      });

    if ((await AdMobInterstitial.getIsReadyAsync()) && failToLoad) {
      await AdMobInterstitial.dismissAdAsync().then((e) => {
        console.log('dismissAdAsync', e);
      });
    }

    return false;
  };

  const downloadFile = () => {
    console.log('Downloading file');
  };

  const checkAdsCount = async () => {
    try {
      const value = await AsyncStorage.getItem('play_ads_times');
      console.log('value play_ads_times', value);
      if (value !== null) {
        if (value >= 3) {
          //If three times back to one times and play once
          await showInterstitial();
          AdMobInterstitial.addEventListener('interstitialDidClose', () => {
            console.log('interstitialDidClose');

            // add action after ads here
            downloadFile();
          });

          return;
        } else {
          var temp = parseInt(value) + 1;
          await AsyncStorage.setItem('play_ads_times', temp.toString());

          // add action after ads here
          downloadFile();
        }
        // value previously stored
      } else {
        //first time in
        await AsyncStorage.setItem('play_ads_times', '1'); //Set time 1

        // or add ads for first time
        await showInterstitial();
        AdMobInterstitial.addEventListener('interstitialDidClose', () => {
          console.log('interstitialDidClose');

          // add action after ads here
          downloadFile();
        });
      }
    } catch (e) {
      // error reading value
      console.log('error checkAdsCount try catch ', e);
      // add action after ads here
      downloadFile();
    }
  };

  React.useEffect(() => {
    // use clear to test from the start
    // AsyncStorage.clear();
  }, []);

  return (
    <View style={styles.container}>      
      <View style={{ alignItems: 'center' }}>
        <Text
          style={{
            fontSize: 30,
            textAlign: 'center',
            marginTop: 20,
            marginBottom: 30,
          }}>
          React Native Admob Interstitial Ads Example
        </Text>
      </View>
      <TouchableOpacity
        style={styles.buttonStyle}
        activeOpacity={0.5}
        onPress={checkAdsCount}>
        <Text style={styles.buttonTextStyle}>Show Ads</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
  buttonStyle: {
    backgroundColor: '#307ecc',
    borderWidth: 0,
    color: '#FFFFFF',
    borderColor: '#307ecc',
    height: 40,
    alignItems: 'center',
    borderRadius: 30,
    marginLeft: 35,
    marginRight: 35,
    marginTop: 15,
  },
  buttonTextStyle: {
    color: '#FFFFFF',
    paddingVertical: 10,
    fontSize: 16,
  },
});

{
  "dependencies": {
    "@react-native-async-storage/async-storage": "~1.17.3",
    "expo-ads-admob": "~13.0.0",
    "expo-constants": "~13.1.1"
  }
}

Sample Snack Link:

https://snack.expo.dev/@rudiahmad/react-native-expo-interstitial-admob-show-ads-after-3-times-click

Catatan:

Sample projek diambil dari referensi di bawah kemudian dimodifikasi untuk menghandle juga error biasa yang terjadi setelah iklan pertama tampil, di bawah ini contoh errornya, sehingga saat ingin menampilkan iklan kedua dapat berjalan dengan lancar.

Error: "Ad is already loaded."
Error: "Ad is not ready"

Referensi:

https://stackoverflow.com/questions/61243005/how-can-i-show-ad-every-three-times-when-entering-a-screen-in-react-native