Thunkable #2 - How to show Admob Banner and Interestial Ads using Thunkable

Hello friends, welcome to the another tutorial of MIT App Inventor 2 of Electro Tech. MIT App Inventor 2 is a best way for learning android app development if you are a beginner to android in my view. It is a online platform for developing android app easily by applying your logic and some programming knowledge. In this tutorial, you will know the step-by-step instructions to implement admob banner and interestial ads on your app that you had created using MIT App Inventor 2. So, friend let's begin.

Step 1 - Requirements.

> MIT App Inventor 2. - It is a Online Platform for creating Android App for beginners in android Programming.

> An Application where you want to display ads. ( must be created in MIT App Inventor 2 ).

> Thunkable. - It is same as MIT App Inventor 2. It also provides a Online Platform for creating app but it is better than MIT App Inventor 2 because It contains many extra element not present in MIT App Inventor 2 which is very useful for us.

> An Admob Account. - It is a Ad Serving platform from a large company named google.

> A G-mail Account.

Step 2 - Opening MIT App Inventor 2 and Importing .aia

> Open MIT App Inventor 2 and Sign in from your google account.

> If you had already created your app, go to My Projects. A list of App that you had created appears. 

> Now click on the app where you want to show the admob ads.

> Now go to Projects and click on Export selected project (.aia) to my computer. A dialog box appears, select the location where you want to save .aia file and then click save. your app .aia folder will be saved to your desired folder.

Step 3 - Opening Thunkable and Uploading .aia file to server.

> Open Thunkable and Sign in from your google account.

> Click on Apps >> Upload app project (.aia) from my Computer.

> Click on Choose File and select the .aia file in the dialog box that appears and click open.

> your app file now gets imported to Thunkable Server. Now you can add admob ads. but before adding ads, we had to first get the ad unit id from Admob.

Note : Instead of doing above two steps, you can simple make your app directly on Thunkable despite of MIT App Inventor 2.

Step 4 - Opening Admob and getting admob ad unit id.

 > Open Admob and Sign in from your google account.
> If you had not created admob account sign up for a new admob account whether if you had already created your admob account, then Sign in from your google account.
> Click on Apps >> Add App ( if you had not generated your ad unit id yet ).
> Now a dialog box appears asking Have you published your app on Google Play Store/ App store. Click No.
> Now Enter the name of your app in a new dialog box that appears and select the platform to android and click add. Now your app has been added.
> Now Click Create Ad unit id. Select Banner and customize your ad if you want otherwise give a unique name to ad unit and then click save. Now your Banner Ad unit id has been generated.
> Click Create another ad unit. Select Interestial and customize your as if you want otherwise name your ad unit and click save and your interestial ad unit id is generated.
> Click Done. 

Step 5 - Adding Banner and Interestial Ads and Showing it.

[ Designer Section ]
> In the Palette Section, Click on Experimental Section and then Drag the Admob Banner ads in the viewer section where you want to place the banner ads on the phone. Also Drag the Interstial ad in viewer section.  ( Interestial ad is a Non-visible Component. )
> Now Uncheck the Test mode in Admob banner ad properties and also in Admob Interestial ad properties.
> Check the Visible box in Admob Banner ad properties.
> Copy the banner ad unit id and paste it in banner ad properties >> Ad unit id. 
> Now Copy the Interestial Ad unit id and paste it in ad properties >> Ad unit id.

[ Blocks Section ]
> Click on AdMob_Banner1 >> "Call Admob_Banner 1 Load ad" and drag it to desired place.
e.g. For Showing Ads on the screen everytime. Click on Screen >> "when Screen1 initialize" and drag the "Call Admob_Banner 1 Load ad" inside it.

Showing Ads in bottom of Screen Everytime

> Click AdMob_Banner1 >> "when AdMob_Bannner1 ad loaded" and drag it into the blocks section.

> Again Click on Admob_Banner1 >> "set AdMob_Banner1 Visible to" and drag it inside the previous block.

> Now Click on Logic >> "true" and drag it to fit in the previous block like below image.

Showing Banner Ads.

> Click on AdMob_Interestial1 >> "call AdMob_Interestial1 Load Ad" and drag it to desired place.

e.g. - If you want to Show the Ads when ad gets loaded from the AdMob Server the Click AdMob_Interestial1 >> "when AdMob_Interestial1 Ad Loaded" and drag it into the blocks section. Again Click on AdMob_Inrestial1 and the click on "call AdMob_Interestial1 Load Ad" and drag it Inside the previous block like below Image.

Showing Interestial Ads.

Showing Admob Interstial Ads.

Step 6 - Exporting and Installing the apk in your Android Phone to testing if ads are showing or not.

> Click on the Export Button >> App (Provide QR COde for .apk) / App (Save .apk to my Computer).

:) App ( Provide QR Code for .apk ) - It provides a QR Code that you had to scan through your Smartphone and download your app from the given link. 

:) App ( Save .apk to my Computer ) - your app will be directly save to your computer desired location set by you after Compiling.

> Now Install the App in your Android Phone and test whether it is working or not.

Step 7- Testing the apk.

Now friends, test your apk if it is displaying ads or not. In my case it is displaying ads as you can see in above video. If you have any problem/question regarding this tutorial, then ask me in comment box.

Full Tutorial Explanation.

Above is the video of the whole steps that you had read previously. If you had got any problem in any step, then watch the video for the solution to that problem and If your question/problem had not get any satisfied Solution/Answer from the above Video, then feel free to ask me in Comment Box.

I hope you like this MIT App Inventor 2 Tutorial. Thanks for Reading this tutorial.