Implement AdMob in Ionic React Capacitor Apps
Tags: Ionic, React, Capacitor, AdMob
Published: 2020-04-19 19:07:04

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_91" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="94bc" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="bc7a" class="graf graf--blockquote graf-after--figure">This post is done on a special request from one of our thousands readers. If you have more requests, let me know in the comments</blockquote><p name="64d4" class="graf graf--p graf-after--blockquote">In this post, you will learn how to implement <strong class="markup--strong markup--p-strong">AdMob functionality, </strong>i.e. Google advertisements, in Ionic React Capacitor apps. We will implement this in a simple Ionic App and test on iOS simulator and Android device.</p><h3 name="a0f9" class="graf graf--h3 graf-after--p">What is&nbsp;Admob?</h3><p name="e799" class="graf graf--p graf-after--h3">As we all know, advertisements are the major source of income for all tech giants like Google, Facebook, Twitter etc. Google ads are one of the most popular ads out there, and the mobile version of Google ads is what they call AdMob.</p><figure tabindex="0" contenteditable="false" name="5414" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 342px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.9%;"></div><img class="graf-image" data-image-id="1*aD95WfvKex9OdEP0B6GWqg.jpeg" data-width="1024" data-height="501" alt="An example of Google AdMob ad. The ad is prompting user to install certain app" src="https://cdn-images-1.medium.com/max/800/1*aD95WfvKex9OdEP0B6GWqg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">An example of Google AdMob ad. The ad is prompting user to install certain&nbsp;app</figcaption></figure><h4 name="6b38" class="graf graf--h4 graf-after--figure">Type of AdMob&nbsp;ads</h4><p name="97fe" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Banner</strong>: A basic ad format that appears at the top &amp; bottom of the device screen.</p><p name="a0fe" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Interstitial</strong>: Full-page ads appear at natural breaks &amp; transitions, such as level completion. Supports video content.</p><p name="e668" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Rewarded</strong>: Full page Ads reward users for watching short videos and interacting with playable ads and surveys. Good for monetizing free-to-play users. Supports video content.</p><p name="35ce" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Native</strong>: Customizable ad format that matches the look &amp; feel of your app. Ads appear inline with app content. Supports video content. For now, Native ads are only possible in Native apps, not in hybrid apps like the ones based on Ionic or React Native.</p><p name="f894" class="graf graf--p graf-after--p">Let us look at the underlying frameworks for this post. <strong class="markup--strong markup--p-strong">If you are conversant with Ionic and Capacitor, skip these sections and go to the code segment of the post.</strong></p><h3 name="b6ca" class="graf graf--h3 graf-after--p">Disclaimer</h3><p name="282b" class="graf graf--p graf-after--h3">Since this post is a mix of three frameworks, it is possible you landed here by mistake. If you are looking for AdMob login in</p><ul class="postList"><li name="16a5" class="graf graf--li graf-after--p">React Native&#8202;—&#8202;Please check <a href="https://enappd.com/blog/implement-admob-in-react-native-with-firebase/133"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">this post</a></li><li name="c8f3" class="graf graf--li graf-after--li">Ionic React (Capacitor) apps&#8202;—&#8202;Continue reading 😎</li></ul><p name="74f0" class="graf graf--p graf-after--li">As you can see from above, there are more than one options available for Hybrid app development these days, and it is easy to get confused between them. This post is focussed on <strong class="markup--strong markup--p-strong">Ionic framework</strong> with <strong class="markup--strong markup--p-strong">React</strong> as the front-end framework, and <a href="https://capacitor.ionicframework.com/docs/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Capacitor</strong></a> as runtime and build environment.</p><blockquote name="51e3" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Code for this tutorial is available on Github repo </em></strong><a href="https://github.com/enappd/ionic-react-admob"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">ionic-react-capacitor-admob</em></strong></a></blockquote><p name="ce6b" class="graf graf--p graf-after--blockquote">Let’s see a brief intro to each of the included frameworks:</p><ol class="postList"><li name="dc9d" class="graf graf--li graf-after--p">Ionic</li><li name="e0cc" class="graf graf--li graf-after--li">Capacitor</li></ol><h3 name="a0c2" class="graf graf--h3 graf-after--li">What is Ionic&nbsp;?</h3><p name="fc2e" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a hybrid mobile app development SDK. It provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. In other words&#8202;—&#8202;If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><p name="36e5" class="graf graf--p graf-after--p">It is important to note the contribution of Cordova/Capacitor in this. Ionic is only a UI wrapper made up of HTML, CSS and JS. So, by default, Ionic cannot run as an app in an iOS or Android device. Cordova/Capacitor is the build environment that containerizes (sort of) this Ionic web app and converts it into a device installable app, along with providing this app access to native APIs like Camera etc.</p><h3 name="60f5" class="graf graf--h3 graf-after--p">Capacitor&#8202;—&#8202;How is it different from Cordova&nbsp;?</h3><p name="062b" class="graf graf--p graf-after--h3">This section is relevant to only those who have been working with Ionic / Cordova for some time. Cordova has been the only choice available for Ionic app developers for quite some time. Cordova helps build Ionic web app into a device installable app.</p><blockquote name="b35c" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Capacitor is very similar to Cordova, but with some key differences in the app workflow</em></strong></blockquote><p name="385b" class="graf graf--p graf-after--blockquote">Here are the differences between Cordova and Capacitor (You’ll appreciate these only if you have been using Cordova earlier, otherwise you can just skip)</p><ol class="postList"><li name="4eb9" class="graf graf--li graf-after--p">Capacitor considers each platform project a <em class="markup--em markup--li-em">source asset</em> instead of a <em class="markup--em markup--li-em">build time asset</em>. That means, Capacitor wants you to keep the platform source code in the repository, unlike Cordova which always assumes that you will generate the platform code on build time</li><li name="94db" class="graf graf--li graf-after--li">Because of the above, Capacitor does not use <code class="markup--code markup--li-code">config.xml</code> or a similar custom configuration for platform settings. Instead, configuration changes are made by editing <code class="markup--code markup--li-code">AndroidManifest.xml</code> for Android and <code class="markup--code markup--li-code">Info.plist</code> for Xcode</li><li name="6184" class="graf graf--li graf-after--li">Capacitor does not “run on device” or emulate through the command line. Instead, such operations occur through the platform-specific IDE. So you cannot run an Ionic-capacitor app using a command like <code class="markup--code markup--li-code">ionic run ios</code>&nbsp;. You will have to run iOS apps using Xcode, and Android apps using Android studio</li><li name="a77c" class="graf graf--li graf-after--li">Since platform code is not a <em class="markup--em markup--li-em">source asset, </em>you can directly change the native code using Xcode or Android Studio. This give more flexibility to developers</li></ol><p name="51f6" class="graf graf--p graf-after--li">In essence, Capacitor is like a fresh, more flexible version of Cordova.</p><h3 name="4530" class="graf graf--h3 graf-after--p">Plugins</h3><p name="7f2c" class="graf graf--p graf-after--h3">Cordova and <a href="https://ionicframework.com/docs/native"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Ionic Native</a> plugins can be used in Capacitor environment. However, there are certain Cordova plugins which are known to be <a href="https://capacitor.ionicframework.com/docs/cordova/known-incompatible-plugins/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener"    target="_blank">incompatible with Capacitor.</a> For Admob functionality, we’ll use the <a href="https://github.com/rahadur/capacitor-admob"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Admob plugin</a></p><h3 name="a3b0" class="graf graf--h3 graf-after--p">Post structure</h3><p name="3480" class="graf graf--p graf-after--h3">We will go in a step-by-step manner to explore the AdMob feature implementation. This is my break-down of the blog</p><p name="1a45" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">STEPS</strong></p><ol class="postList"><li name="6b47" class="graf graf--li graf-after--p">Create a basic Ionic Capacitor app with React</li><li name="c394" class="graf graf--li graf-after--li">Build the app in Android with Capacitor</li><li name="d628" class="graf graf--li graf-after--li">Setup your AdMob account</li><li name="e24a" class="graf graf--li graf-after--li">Setup AdMob plugin</li><li name="ab56" class="graf graf--li graf-after--li">Implement different types of Ads in your App</li><li name="0cca" class="graf graf--li graf-after--li">Build the app on iOS simulator and test</li><li name="364f" class="graf graf--li graf-after--li">Build the app on Android device and test</li></ol><p name="08cb" class="graf graf--p graf-after--li">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="8ea5" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 640px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 182.9%;"></div><img class="graf-image" data-image-id="1*ERffcqfeSC19qC5l50L94w.gif" data-width="350" data-height="640" src="https://cdn-images-1.medium.com/max/800/1*ERffcqfeSC19qC5l50L94w.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">I made you laugh&nbsp;… didn’t I&nbsp;?&nbsp;😆</figcaption></figure><h3 name="5996" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create a basic Ionic Capacitor app with&nbsp;React</h3><p name="5f83" class="graf graf--p graf-after--h3">Create a basic app from Ionic starters itself.</p><pre name="b6c0" class="graf graf--pre graf-after--p">$ ionic start ionic-react-admob tabs --type=react</pre><p name="4f66" class="graf graf--p graf-after--pre">This will create a basic Ionic app in React. I have chosen <code class="markup--code markup--p-code">tabs</code> starter so I can use different tabs for different Ad types.</p><p name="7bb3" class="graf graf--p graf-after--p">We’ll create a simple UI with few buttons that will trigger Ads. For interstitial ads, these triggers are generally completion of a level in a game app etc. Banner ads are generally triggered on page load itself. Reward ads are shown where user can earn a reward by watching the ads.</p><p name="c5ae" class="graf graf--p graf-after--p">My basic UI for the ad pages looks like this</p><figure tabindex="0" contenteditable="false" name="7725" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 414px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 59.099999999999994%;"></div><img class="graf-image" data-image-id="1*eiMj9wkMmso_r_pfT8QEMw.png" data-width="1200" data-height="709" src="https://cdn-images-1.medium.com/max/800/1*eiMj9wkMmso_r_pfT8QEMw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Basic UI for AdMob implementation in Ionic React Capacitor Apps&#8202;—&#8202;iOS</figcaption></figure><h3 name="b55b" class="graf graf--h3 graf-after--figure">Step 2&#8202;—&#8202;Build the app in Android with Capacitor</h3><p name="8418" class="graf graf--p graf-after--h3">To build the apps for device / emulator, we need to attach capacitor to the app. Run</p><pre name="b09d" class="graf graf--pre graf-after--p">$ ionic integrations enable capacitor</pre><blockquote name="2734" class="graf graf--blockquote graf-after--pre"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">At the time of this post, I have node 12.14.0 and I have opted for Capacitor 1.x, although Capacitor 2.0 is also released. The reason is to avoid updating Xcode to read apps made by Capacitor 2.0. Although I have tested the functionality in Capacitor 2.0 with Android and it works</em></strong></blockquote><p name="3da7" class="graf graf--p graf-after--blockquote">By default if you run the above command, it will install Capacitor 2.0. Apps built with Capacitor 2.0 will require latest Android Studio and latest Xcode. If you have these, perfect&nbsp;! But if you don’t, stick to Capacitor 1.x for the tutorial and you can update later. I have used <code class="markup--code markup--p-code">“@capacitor/core”: “1.2.0”,</code> and <code class="markup--code markup--p-code">“@capacitor/cli”: “1.2.0”</code> for this post.</p><p name="7015" class="graf graf--p graf-after--p">Add platforms and build the app in device as a test</p><pre name="5318" class="graf graf--pre graf-after--p">// Add android platform<br>$ <strong class="markup--strong markup--pre-strong">npx cap add android<br></strong>// Add iOS platform<br>$ <strong class="markup--strong markup--pre-strong">npx cap add ios<br></strong>// Build web assets to copy to platforms<br>$ <strong class="markup--strong markup--pre-strong">ionic build<br></strong>// copy the build assets to platforms<br>$ <strong class="markup--strong markup--pre-strong">npx cap copy<br></strong>// open android studio to build app<br>$ <strong class="markup--strong markup--pre-strong">npx cap open android<br></strong>// open xcode to build app<br>$ <strong class="markup--strong markup--pre-strong">npx cap open ios</strong></pre><p name="019d" class="graf graf--p graf-after--pre">At this point, you can run the app in either iOS / Android device or simulator using Xcode / Android Studio&nbsp;. You’ll see the UI running fine in the device.</p><h3 name="5dbf" class="graf graf--h3 graf-after--p">Step 3&#8202;—&#8202;Setup your Admob&nbsp;account</h3><p name="acc9" class="graf graf--p graf-after--h3">This step is common for any app. Since Admob is a Google service, independent of app platform, you can have one account and use it in every type of app. I use the same AdMob app in every AdMob example post.</p><p name="17be" class="graf graf--p graf-after--p">Follow these steps to create your Admob account and Admob app</p><ul class="postList"><li name="2f65" class="graf graf--li graf-after--p">Signup then Sign in to your AdMob account at <a href="https://apps.admob.com/?utm_source=internal%26utm_medium=et%26utm_campaign=helpcentrecontextualopt%26utm_term=http://goo.gl/6Xkfcf%26subid=ww-ww-et-amhelpv4"  class="markup--anchor markup--li-anchor" rel="noopener noreferrer noopener noopener noopener"    target="_blank">https://apps.admob.com</a>.</li><li name="3f16" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Apps</strong> in the sidebar.</li><li name="63c6" class="graf graf--li graf-after--li">Click <strong class="markup--strong markup--li-strong">Add app</strong> to add a new app or click <strong class="markup--strong markup--li-strong">View all apps</strong> to search a list of all of the apps you’ve added to AdMob.</li><li name="f52c" class="graf graf--li graf-after--li">In the <strong class="markup--strong markup--li-strong">App Settings </strong>options, you can see your <strong class="markup--strong markup--li-strong">App ID</strong>. This is the ID you will need to connect your app to Google AdMob in your app.</li></ul><figure tabindex="0" contenteditable="false" name="9df2" class="graf graf--figure graf-after--li"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 341px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.8%;"></div><img class="graf-image" data-image-id="1*JoDnyDkki68npDr77EitSw.png" data-width="1103" data-height="538" alt="Note down your App ID from App Setting in Google AdMob" src="https://cdn-images-1.medium.com/max/800/1*JoDnyDkki68npDr77EitSw.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Note down your App ID from App Setting in Google&nbsp;AdMob</figcaption></figure><ul class="postList"><li name="4bc8" class="graf graf--li graf-after--figure">In the <strong class="markup--strong markup--li-strong">Ad Units </strong>section, you can add multiple types of Ad units. For more details on adding Ad Units, check out the following detailed step-by-step instructions for</li></ul><p name="2c44" class="graf graf--p graf-after--li">— <a href="https://support.google.com/admob/answer/7311346?hl=en"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Banner Ads</a></p><p name="a79f" class="graf graf--p graf-after--p"><a href="https://support.google.com/admob/answer/7311435?hl=en%26ref_topic=7382891"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">— Interstitial Ads</a></p><p name="aded" class="graf graf--p graf-after--p">— <a href="https://support.google.com/admob/answer/7311747?hl=en%26ref_topic=7382891"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Reward Ads</a></p><p name="2327" class="graf graf--p graf-after--p is-selected">AdMob has a ton of other settings for how, when and where your ads should show up, but all that for later. In this post, we’ll limit the discussion to <strong class="markup--strong markup--p-strong">“How to display basic ad units in a Ionic React Capacitor app”</strong></p><h3 name="7b1a" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Setup AdMob&nbsp;plugin</h3><p name="e185" class="graf graf--p graf-after--h3">For this post, as I explained earlier, we are using <a href="https://github.com/rahadur/capacitor-admob"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Admob plugin</a>. Also, since capacitor does not inject necessary platform specific variables while building the app, we’ll have to make small changes when we build apps</p><h4 name="7a8e" class="graf graf--h4 graf-after--p">4.1 Install Capacitor AdMob&nbsp;plugin</h4><p name="2697" class="graf graf--p graf-after--h4">In your existing app, add the plugin using</p><pre name="a657" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">$ npm install --save capacitor-admob</strong></pre><h4 name="fe49" class="graf graf--h4 graf-after--pre">4.2 Build in&nbsp;Android</h4><p name="3f34" class="graf graf--p graf-after--h4">Since we have only added a plugin, just sync the dependencies using</p><pre name="f301" class="graf graf--pre graf-after--p">// copy the build assets to platforms<br>$ <strong class="markup--strong markup--pre-strong">npx cap sync</strong></pre><p name="06eb" class="graf graf--p graf-after--pre">In Android Studio, open your <code class="markup--code markup--p-code">AndroidManifest.xml</code> file and add this <code class="markup--code markup--p-code">meta-data</code> line and replace the value by the actual <strong class="markup--strong markup--p-strong">App ID</strong> of your app</p><pre name="8427" class="graf graf--pre graf-after--p">&lt;application&gt;<br>  &lt;!-- this line needs to be added (replace the value!) --&gt;<br>  <strong class="markup--strong markup--pre-strong">&lt;meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-3940256099942544~3347511713" /&gt;</strong><br>  &lt;activity&gt;.....&lt;/activity&gt;<br>&lt;/application&gt;</pre><p name="babd" class="graf graf--p graf-after--pre">Open your Ionic Capacitor App in Android Studio, Now open <code class="markup--code markup--p-code">MainActivity.java</code> of your app and Register AdMob Capacitor Plugin.</p><pre name="1242" class="graf graf--pre graf-after--p">// Other imports...<br><strong class="markup--strong markup--pre-strong">import app.xplatform.capacitor.plugins.AdMob;<br></strong>public class MainActivity extends BridgeActivity {<br>  @Override<br>  public void onCreate(Bundle savedInstanceState) {<br>    super.onCreate(savedInstanceState);<br>this.init(savedInstanceState, new ArrayList&lt;Class&lt;? extends Plugin&gt;&gt;() `{{<br>      <strong class="markup--strong markup--pre-strong">add(AdMob.class);</strong>  // Add AdMob as a Capacitor Plugin<br>    }}`);<br>  }<br>}</pre><p name="f802" class="graf graf--p graf-after--pre">Build the app once on device. If there is no error, your Android app is ready to show ads</p><h4 name="677f" class="graf graf--h4 graf-after--p">4.3 Build in&nbsp;iOS</h4><p name="65b1" class="graf graf--p graf-after--h4">Once again, just sync the dependencies using</p><pre name="db6d" class="graf graf--pre graf-after--p">// copy the build assets to platforms<br>$ <strong class="markup--strong markup--pre-strong">npx cap sync</strong></pre><p name="52a6" class="graf graf--p graf-after--pre">Open your <code class="markup--code markup--p-code">App/App/Info.plist</code> file and add this <code class="markup--code markup--p-code">plist value</code> line and replace the value by the actual App ID of your app</p><pre name="2c34" class="graf graf--pre graf-after--p"><strong class="markup--strong markup--pre-strong">&lt;key&gt;GADIsAdManagerApp&lt;/key&gt;<br>&lt;true/&gt;<br>&lt;key&gt;GADApplicationIdentifier&lt;/key&gt;<br></strong>&lt;!-- replace this value with your App ID key--&gt;<br><strong class="markup--strong markup--pre-strong">&lt;string&gt;ca-app-pub-6564742920318187~7217030993&lt;/string&gt;</strong></pre><p name="ca90" class="graf graf--p graf-after--pre">Build the app once on device/simulator. If there is no error, your iOS app is ready to show ads.</p><h3 name="de7b" class="graf graf--h3 graf-after--p">Step 5&#8202;—&#8202;Implement different types of Ads in the&nbsp;app</h3><p name="5f19" class="graf graf--p graf-after--h3">Once everything is setup, let us implement different types of Ads in the app. For all types of Ads, you’ll need to import the plugin and initialize.</p><pre name="bf27" class="graf graf--pre graf-after--p">import { AdOptions, AdSize, AdPosition } from 'capacitor-admob';<br>const { AdMob, Toast } = Plugins;</pre><p name="426b" class="graf graf--p graf-after--pre">In the constructor, initialize AdMob using</p><pre name="9053" class="graf graf--pre graf-after--p">// replace with your own App ID<br>AdMob.initialize('ca-app-pub-3940256099942544~3347511713');</pre><h4 name="02d0" class="graf graf--h4 graf-after--pre">Banner Ad</h4><p name="2870" class="graf graf--p graf-after--h4">Banner ads are implemented in Tab1. You’ll also need an <code class="markup--code markup--p-code">Ad Unit ID</code> for the banner ad from your AdMob account.</p><p name="5875" class="graf graf--p graf-after--p">Once you have the UI in <code class="markup--code markup--p-code">Tab1.tsx</code> file, we’ll implement four methods</p><ul class="postList"><li name="0d2b" class="graf graf--li graf-after--p">showBanner</li><li name="1e1e" class="graf graf--li graf-after--li">pauseBanner</li><li name="3065" class="graf graf--li graf-after--li">resumeBanner</li><li name="d77d" class="graf graf--li graf-after--li">removeBanner</li></ul><p name="5342" class="graf graf--p graf-after--li">The names of the methods are self-explanatory. The code for the full page will look like this</p><figure tabindex="0" contenteditable="false" name="08cc" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/e7d5b1a65a083564b25504cc4b811078.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Banner ad implementation in Ionic React Capacitor app</figcaption></figure><blockquote name="0368" class="graf graf--blockquote graf-after--figure"><strong class="markup--strong markup--blockquote-strong">You can get test ad IDs from Google for testing as well. DO NOT use a test ID in your production app, and DO NOT use your production Ad Unit ID while developing the app</strong></blockquote><h4 name="ab11" class="graf graf--h4 graf-after--blockquote">Interstitial Ad</h4><p name="67f8" class="graf graf--p graf-after--h4">Interstitial Ads work on a trigger. Because these are full page ads, they are not always visible as Banner Ads.</p><p name="a374" class="graf graf--p graf-after--p">To implement interstitial ads, import the plugin, initialize and follow the code below</p><figure tabindex="0" contenteditable="false" name="5b39" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/e69d878f994c4b37fdbce54fc799174d.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Interstitial ad implementation in Ionic React Capacitor app</figcaption></figure><p name="5504" class="graf graf--p graf-after--figure">Interstitial ads need to <code class="markup--code markup--p-code">load</code> before they can be shown. In you productions apps, it would be a good practice to load these ads on page load itself, and then show whenever required.</p><h4 name="33b7" class="graf graf--h4 graf-after--p">Reward Ad</h4><p name="146c" class="graf graf--p graf-after--h4">Again, reward Ads are similar to interstitial ads in the trigger mechanism. To implement, import the required dependency and follow the code below</p><figure tabindex="0" contenteditable="false" name="f8bf" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/f9e9170d45224929e6fdfad99290b58f.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Reward ad implementation in Ionic React Capacitor app</figcaption></figure><p name="e470" class="graf graf--p graf-after--figure">Again, <code class="markup--code markup--p-code">TestIds.REWARDED</code> is a test ID. Replace it with production Ad ID when releasing the app.</p><p name="9255" class="graf graf--p graf-after--p"><code class="markup--code markup--p-code">.prepareRewardVideoAd()</code> method loads the ad. This ad takes some time in loading. That is why&nbsp;<code class="markup--code markup--p-code">.showRewardVideoAd()</code> should be called after a delay, or on success of loading.</p><h3 name="e6db" class="graf graf--h3 graf-after--p">Step 6: Testing the app on an iOS simulator</h3><p name="2047" class="graf graf--p graf-after--h3">To build the code on iOS, just run these</p><pre name="96da" class="graf graf--pre graf-after--p">$ ionic build<br>$ npx cap copy</pre><p name="4169" class="graf graf--p graf-after--pre">Once done, build your app from Xcode, and run the app. Let’s see how the ads will look in iOS.</p><h4 name="6691" class="graf graf--h4 graf-after--p">Banner Ad</h4><p name="c40b" class="graf graf--p graf-after--h4">The resulting ad looks like this on iOS</p><figure tabindex="0" contenteditable="false" name="1a63" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 279px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 215.09999999999997%;"></div><img class="graf-image" data-image-id="1*p3J6eokJ00Qq5xAgV6uX5Q.gif" data-width="279" data-height="600" alt="AdMob Banner ads in iOS&#8202;—&#8202;Ionic React Capacitor app" src="https://cdn-images-1.medium.com/max/800/1*p3J6eokJ00Qq5xAgV6uX5Q.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">AdMob Banner ads in iOS&#8202;—&#8202;Ionic React Capacitor app</figcaption></figure><h4 name="e135" class="graf graf--h4 graf-after--figure">Interstitial Ad</h4><p name="93a9" class="graf graf--p graf-after--h4">The ad on full screen looks like following on iOS</p><figure tabindex="0" contenteditable="false" name="3e7e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 279px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 215.09999999999997%;"></div><img class="graf-image" data-image-id="1*NHIfY-6xNNUL8VCdvsr43g.gif" data-width="279" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*NHIfY-6xNNUL8VCdvsr43g.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">AdMob Interstitial ads in iOS&#8202;—&#8202;Ionic React Capacitor app</figcaption></figure><h4 name="dd81" class="graf graf--h4 graf-after--figure">Reward Ad</h4><p name="409f" class="graf graf--p graf-after--h4">The reward ad will look like this on iOS</p><figure tabindex="0" contenteditable="false" name="cdf6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 279px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 215.09999999999997%;"></div><img class="graf-image" data-image-id="1*tTq2GKkpODRvgR83nyc2Hw.gif" data-width="279" data-height="600" src="https://cdn-images-1.medium.com/max/800/1*tTq2GKkpODRvgR83nyc2Hw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">AdMob Reward ads in iOS&#8202;—&#8202;Ionic React Capacitor app</figcaption></figure><h3 name="1f83" class="graf graf--h3 graf-after--figure">Step 7: Testing the app on an Android&nbsp;device</h3><p name="838b" class="graf graf--p graf-after--h3">Just like iOS, the same code will show ads in Android as well. This video link <a href="https://youtu.be/XHzwraE4hYc"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">here</a> will show how the ads will show up on android device (just for the sake of completion of the post)</p><p name="4c18" class="graf graf--p graf-after--p">Tada&nbsp;! You have learnt how to implement AdMob ads in your Ionic React Capacitor app. 🎉</p><h3 name="7a48" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="7b07" class="graf graf--p graf-after--h3">In this blog, we learned how to implement Google AdMob functionality in Ionic React Capacitor app. AdMob functionality is a must for an app where user wants to earn some revenue from ad clicks. This comes in handy when your app has a large number of users, and you do not charge users for anything in the app. So ads become your direct revenue source. You can also combine the interstitial ads and rewards ads with in-app rewards like a level up in a game, extra lives etc.</p><blockquote name="d788" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">Code for this tutorial is available on Github repo </em></strong><a href="https://github.com/enappd/ionic-react-admob"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong"><em class="markup--em markup--blockquote-em">ionic-react-capacitor-admob</em></strong></a></blockquote><h3 name="84b4" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="aae2" class="graf graf--p graf-after--h3">Now that you have learnt about setting up AdMob in Ionic React Capacitor apps, here are some other topics you can look into</p><h4 name="57fd" class="graf graf--h4 graf-after--p">Ionic React Capacitor</h4><ul class="postList"><li name="93d7" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/facebook-login-in-ionic-react-capacitor-apps/118"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook Login in Ionic React Capacitor apps</a></li><li name="0f16" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-react-capacitor-app/121"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter Login in Ionic React Capacitor apps</a></li><li name="a9e7" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/google-login-in-ionic-react-capacitor-apps/122"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Login in Ionic React Capacitor apps</a></li><li name="8885" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-make-ionic-apps-in-react-using-capacitor/26"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">How to make basic apps in ionic-react-capacitor</a></li><li name="6594" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/camera-and-gallery-in-ionic-react-app-using-capacitor/110"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Camera and Image gallery in Ionic-React-Capacitor</a></li><li name="4f4f" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/firebase-push-notification-in-ionic-react-capacitor/111"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Push notification in Ionic-React-Capacitor apps</a></li><li name="c5a7" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/icon-splash-in-ionic-react-capacitor-apps/114"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Adding Icon and Splash in Ionic React Capacitor apps</a></li></ul><p name="d39b" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 4 React app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic React Full App</a></p><figure tabindex="0" contenteditable="false" name="074b" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 600px; max-height: 600px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 100%;"></div><img class="graf-image" data-image-id="0*AxzmDBUVguZ1kw_i.jpeg" data-width="600" data-height="600" src="https://cdn-images-1.medium.com/max/800/0*AxzmDBUVguZ1kw_i.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 4 React Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="39b9" class="graf graf--h4 graf-after--figure">Ionic Angular Capacitor</h4><ul class="postList"><li name="c59a" class="graf graf--li graf-after--h4"><a href="https://enappd.com/blog/play-music-in-ionic-capacitor-apps/112"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Music Player</a></li><li name="ddc2" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/html5-games-in-ionic-capacitor-using-phaser/115"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Create HTML5 games in Ionic Capacitor apps using Phaser</a></li><li name="22e8" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/qr-code-and-barcode-scanning-with-ionic-capacitor/127"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Barcode and QR code scanning in Ionic Capacitor apps</a></li></ul><p name="18ee" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="7553" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="1*9eKBtNJaAYPMzyZvyifWIQ.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/1*9eKBtNJaAYPMzyZvyifWIQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h4 name="35e7" class="graf graf--h4 graf-after--figure">Ionic Angular&nbsp;Cordova</h4><ul class="postList"><li name="85a8" class="graf graf--li graf-after--h4">Ionic Payment Gateways&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RazorPay</a></li><li name="5acf" class="graf graf--li graf-after--li">Ionic Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Chart.js</a></li><li name="dfc7" class="graf graf--li graf-after--li">Ionic Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter</a></li><li name="6667" class="graf graf--li graf-after--li">Ionic Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Anonymous</a></li><li name="91ad" class="graf graf--li graf-after--li">Ionic Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Pedometer</a></li><li name="a628" class="graf graf--li graf-after--li">Media in Ionic&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Image Cropper</a></li><li name="779c" class="graf graf--li graf-after--li">Ionic Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">RTL</a></li><li name="38ee" class="graf graf--li graf-after--li">Ionic messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Reading SMS</a></li><li name="0711" class="graf graf--li graf-after--li">Ionic with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Cloud functions</a></li></ul><p name="12ae" class="graf graf--p graf-after--li">If you need a base to start your next <strong class="markup--strong markup--p-strong">Ionic 5 Angular app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="001a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 560px; max-height: 353px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="0*lqQcM0JyxN7nFQdL.jpeg" data-width="560" data-height="353" src="https://cdn-images-1.medium.com/max/800/0*lqQcM0JyxN7nFQdL.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 Full App with huge number of layouts and&nbsp;features</figcaption></figure><p name="403b" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>