Ever wondered how to integrate Google AdMob ads to your App Inventor 2 app? Until recently, it was impossible to do so free of charge since AI2 does not permit the inclusion of AdMob and the other available possibilities are all paid options through third-party tools.
This has changed – finally – with a website called Thunkable.
Follow these steps to include AdMob ads to your AI2 app:
1) visit the beta version of Thunkable (AdMob is only integrated to their beta version for now) at beta.thunkable.com;
2) Login with your Google account (gmail / the same used for your AI2 account);
3) Import your AI2 app by clicking on Apps -> Upload legacy app project (.aia) from my computer. It is important to use the legacy uploading option to retain AI2’s original package name. If you don’t, the package name will be thunkable’s and when you’ll try to update your published app on Google Play, it will show an error message.
N.B.: If using the legacy uploading method and if
AI2’s original package name includes uppercase letters
(i.e.: appinventor.ai_NYAppMaster.GuitarTabs),
Thunkable’s legacy method will probably transform it to lowercase
letters only (i.e.: appinventor.ai_nyappmaster.guitartabs) and this will
also be a problem when you try to update your app on
Google Play afterward.
So, here’s what to do in such a case:
download Notepad++ (available here: https://notepad-plus-plus.org/).
This free software will allow you to batch edit your apk file once it is
unzipped (if necessary, read another article of mine on how to
unzip and rezip an apk file: https://articles.imperialtometric.com/how-to-overcome-mit-app-inventors-5-meg-limit-for-your-apk-files/).
Open Notepad++, press on ctrl-F and select the “Find in Files” tab.
Fill in the “Find what” (your original AI2’s package name, for example)
and “Replace with” (your lowercase-only package name) fields;
then, select the directory where your unzipped apk file is located and
click on “Replace all Files”. That’s it.
Even if thousands of entries are replaced, it takes only a few seconds.
4) Still in Thunkable’s main menu, click on your uploaded app project; once in, you shall see under the “Experimental” tab on the left side of the screen “AdMob Banner” and “AdMob Interstitial”. Drag and drop your preferred type of ad directly in your app designer section (middle of the screen).
5) Click on the AdMob component you just added and, on the right side of your screen, under “Properties”, you’ll be able to include your Ad Unit ID (you must be registered with AdMob; it’s free) and check the “Visible” option. There’s also a “Test Mode” that can be checked (don’t click on your own app’s ads if the test mode is unchecked!).
6) In the blocks’ section, include a “call AdMob_Banner1.Load Ad” trigger under the “when Screen1.Initialize do” component. Moreover, you’ll need to create this component (three blocks): “when AdMob_Banner1.Ad Loaded do” -> “set AdMob_Banner1.Visible to” -> “true”.
Done!
Kudos to Thunkable’s team by the way!
