How to Show Admob Interstitial Ads After 3 Times Clicks

In this tutorial, we will discuss how to do an Admob type Interstitial ad / full screen mobile ad that appears after 3 clicks. Displaying too many ads in an application is of course very annoying if we look at it from the user’s side, whereas if you don’t display ads from the developer’s side there is no income from using the application, sometimes the developer wants to display a full screen ad after 3 three actions, for example the download action will shows ads after 3 clicks.

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://ckk.ai/interstitial-ads

Note: The sample project is taken from the reference below and then modified to also handle errors that occur after the first ad appears, so that when you want to display the second ad it can run smoothly.

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

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