How to Insert AdMob Ads to an App Inventor 2 (AI2) App

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;

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:
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:

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”.


Kudos to Thunkable’s team by the way!

Modern Tribe’s Events Calendar and loop-grid modification

Modern Tribe offers an interesting plugin called Events Calendar (WordPress).

Although it is mainly hassle-free, some problems may occur when integrating the plugin to a multilingual website (or in conjunction with the Polylang or qTranslate plugins).

Hence, working on a website creation project for a French-language kindergarten, I realized that when the calendar page was consulted for the first time, the days appeared in English at the top of the calendar grid, even though the WordPress site was in French and Polylang was activated as French by default. When the user consulted the previous or next month, everything would then appear in French, as required.

So, here’s one way to avoid such a bug: by removing the day row from the grid loop.

You need to edit this file: wp-content/plugins/the-events-calendar/views/month/loop-grid.php (through FTP or in your cPanel)…

Then, replace this line:

<th id=”tribe-events-<?php echo strtolower( $day ) ?>” title=”<?php echo $day ?>” data-day-abbr=”<?php echo $wp_locale->get_weekday_abbrev( $day ); ?>”><?php echo $day ?></th>

by the following line:

<th id=”tribe-events-<?php echo strtolower( $day ) ?>” title=”<?php echo substr($day, 0, 0); ?>” data-day-abbr=”<?php echo $wp_locale->get_weekday_abbrev( $day ); ?>”><?php echo $day ?></th>

If you would prefer to abbreviate the days in the grid (i.e.: Wed instead of Wednesday), you can do so by replacing $day, 0, 0 by $day, 0, 3. 

The last digit, 3, means three letters; if you would prefer a single letter for the day, then you would modify it to $day, 0,1.

Best regards.