{"id":3302,"date":"2022-12-01T14:29:56","date_gmt":"2022-12-01T07:29:56","guid":{"rendered":"https:\/\/www.bagi2info.com\/?p=3302"},"modified":"2023-01-04T11:46:44","modified_gmt":"2023-01-04T04:46:44","slug":"cara-menampilkan-iklan-interstitial-admob-setelah-3-kali-klik","status":"publish","type":"post","link":"https:\/\/www.bagi2info.com\/en\/how-to-show-admob-interstitial-ads-after-3-times-clicks\/","title":{"rendered":"How to Show Admob Interstitial Ads After 3 Times Clicks"},"content":{"rendered":"\r\n\r\nIn 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.\r\n\r\n\r\n\r\n\r\n
\"sample<\/a><\/figure>\r\n\r\n\r\n\r\n
import * as React from 'react';\r\nimport { Text, View, StyleSheet, TouchableOpacity } from 'react-native';\r\nimport { AdMobInterstitial } from 'expo-ads-admob';\r\nimport AsyncStorage from '@react-native-async-storage\/async-storage';\r\nimport Constants from 'expo-constants';\r\n\r\nconst TEST_INTERSTITIAL_ID = 'ca-app-pub-3940256099942544\/1033173712';\r\nconst ANDROID_INTERSTITIAL_ID = 'ca-app-pub-3940256099942544\/1033173712'; \/\/ prod id\r\n\r\nexport default function App() {\r\n  const INTERSTITIAL_ID = TEST_INTERSTITIAL_ID;\r\n\r\n  const showInterstitial = async () => {\r\n    var failToLoad = false;\r\n\r\n    AdMobInterstitial.setAdUnitID(INTERSTITIAL_ID);\r\n\r\n    AdMobInterstitial.addEventListener('interstitialDidFailToLoad', () => {\r\n      console.log('interstitialDidFailToLoad');\r\n    });\r\n\r\n    AdMobInterstitial.requestAdAsync({ servePersonalizedAds: true })\r\n      .then(() => {\r\n        AdMobInterstitial.showAdAsync()\r\n          .then(() => {\r\n            AsyncStorage.setItem('play_ads_times', '1');\r\n          })\r\n          .catch((e) => console.log(e));\r\n        return true;\r\n      })\r\n      .catch((error) => {\r\n        failToLoad = true;\r\n        console.log('error requestAdAsync catch ', error);\r\n        AdMobInterstitial.dismissAdAsync().then((e) => {\r\n          console.log(e);\r\n        });\r\n      });\r\n\r\n    if ((await AdMobInterstitial.getIsReadyAsync()) && failToLoad) {\r\n      await AdMobInterstitial.dismissAdAsync().then((e) => {\r\n        console.log('dismissAdAsync', e);\r\n      });\r\n    }\r\n\r\n    return false;\r\n  };\r\n\r\n  const downloadFile = () => {\r\n    console.log('Downloading file');\r\n  };\r\n\r\n  const checkAdsCount = async () => {\r\n    try {\r\n      const value = await AsyncStorage.getItem('play_ads_times');\r\n      console.log('value play_ads_times', value);\r\n      if (value !== null) {\r\n        if (value >= 3) {\r\n          \/\/If three times back to one times and play once\r\n          await showInterstitial();\r\n          AdMobInterstitial.addEventListener('interstitialDidClose', () => {\r\n            console.log('interstitialDidClose');\r\n\r\n            \/\/ add action after ads here\r\n            downloadFile();\r\n          });\r\n\r\n          return;\r\n        } else {\r\n          var temp = parseInt(value) + 1;\r\n          await AsyncStorage.setItem('play_ads_times', temp.toString());\r\n\r\n          \/\/ add action after ads here\r\n          downloadFile();\r\n        }\r\n        \/\/ value previously stored\r\n      } else {\r\n        \/\/first time in\r\n        await AsyncStorage.setItem('play_ads_times', '1'); \/\/Set time 1\r\n\r\n        \/\/ or add ads for first time\r\n        await showInterstitial();\r\n        AdMobInterstitial.addEventListener('interstitialDidClose', () => {\r\n          console.log('interstitialDidClose');\r\n\r\n          \/\/ add action after ads here\r\n          downloadFile();\r\n        });\r\n      }\r\n    } catch (e) {\r\n      \/\/ error reading value\r\n      console.log('error checkAdsCount try catch ', e);\r\n      \/\/ add action after ads here\r\n      downloadFile();\r\n    }\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    \/\/ use clear to test from the start\r\n    \/\/ AsyncStorage.clear();\r\n  }, []);\r\n\r\n  return (\r\n    <View style={styles.container}>\r\n     \r\n      <View style={{ alignItems: 'center' }}>\r\n        <Text\r\n          style={{\r\n            fontSize: 30,\r\n            textAlign: 'center',\r\n            marginTop: 20,\r\n            marginBottom: 30,\r\n          }}>\r\n          React Native Admob Interstitial Ads Example\r\n        <\/Text>\r\n      <\/View>\r\n      <TouchableOpacity\r\n        style={styles.buttonStyle}\r\n        activeOpacity={0.5}\r\n        onPress={checkAdsCount}>\r\n        <Text style={styles.buttonTextStyle}>Show Ads<\/Text>\r\n      <\/TouchableOpacity>\r\n    <\/View>\r\n  );\r\n}\r\n\r\nconst styles = StyleSheet.create({\r\n  container: {\r\n    flex: 1,\r\n    justifyContent: 'center',\r\n    paddingTop: Constants.statusBarHeight,\r\n    backgroundColor: '#ecf0f1',\r\n    padding: 8,\r\n  },\r\n  paragraph: {\r\n    margin: 24,\r\n    fontSize: 18,\r\n    fontWeight: 'bold',\r\n    textAlign: 'center',\r\n  },\r\n  buttonStyle: {\r\n    backgroundColor: '#307ecc',\r\n    borderWidth: 0,\r\n    color: '#FFFFFF',\r\n    borderColor: '#307ecc',\r\n    height: 40,\r\n    alignItems: 'center',\r\n    borderRadius: 30,\r\n    marginLeft: 35,\r\n    marginRight: 35,\r\n    marginTop: 15,\r\n  },\r\n  buttonTextStyle: {\r\n    color: '#FFFFFF',\r\n    paddingVertical: 10,\r\n    fontSize: 16,\r\n  },\r\n});\r\n<\/code><\/pre>\r\n\r\n\r\n\r\n
{\r\n  \"dependencies\": {\r\n    \"@react-native-async-storage\/async-storage\": \"~1.17.3\",\r\n    \"expo-ads-admob\": \"~13.0.0\",\r\n    \"expo-constants\": \"~13.1.1\"\r\n  }\r\n}<\/code><\/pre>\r\n\r\n\r\n\r\n\r\nSample Snack Link:\r\n\r\n\r\n\r\n\r\n
https:\/\/ckk.ai\/interstitial-ads<\/a><\/p>\r\n\r\n\r\n\r\n\r\nNote:\r\n\r\n\r\n\r\n\r\n\r\nThe 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.\r\n\r\n\r\n\r\n\r\n\r\n
Error: \"Ad is already loaded.\"\r\nError: \"Ad is not ready\"<\/code><\/pre>\r\n\r\n\r\n\r\n\r\nReference:\r\n\r\n\r\n\r\n\r\n\r\nhttps:\/\/stackoverflow.com\/questions\/61243005\/how-can-i-show-ad-every-three-times-when-entering-a-screen-in-react-native<\/a>\r\n\r\n","protected":false},"excerpt":{"rendered":"
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...<\/p>\n","protected":false},"author":1,"featured_media":3312,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[173],"tags":[79,65,150,145],"class_list":["post-3302","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react-native","tag-android","tag-aplikasi-mobile","tag-react-native","tag-source-code"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3302","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/comments?post=3302"}],"version-history":[{"count":10,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3302\/revisions"}],"predecessor-version":[{"id":3629,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/posts\/3302\/revisions\/3629"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media\/3312"}],"wp:attachment":[{"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/media?parent=3302"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/categories?post=3302"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bagi2info.com\/en\/wp-json\/wp\/v2\/tags?post=3302"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}