How to Implement AdMob in Thunkable: A Step-by-Step Guide

Monetizing your mobile applications is a crucial step for developers looking to generate revenue from their creations. For apps built on no-code platforms like Thunkable, integrating advertising is a straightforward and effective strategy. AdMob, Google’s mobile advertising platform, offers an easy way to display ads within your Thunkable applications. This guide will walk you through the process of implementing AdMob in your Thunkable projects, enabling you to earn revenue from your app.

Before you begin, ensure you have the following prerequisites in place:

• An AdMob Account: If you don’t already have one, you’ll need to sign up for an AdMob account. This will allow you to manage your ads and earnings.
• A Thunkable Project: You should have an existing Thunkable project where you want to integrate AdMob advertisements.

Let’s dive into the steps to get AdMob working in your Thunkable app.

Step 1: Retrieve Ad Unit IDs from AdMob

To display ads in your app, you first need to create ad units within your AdMob account and obtain their unique IDs. Ad Unit IDs are essential for connecting your Thunkable app to your AdMob account. Here’s how to find them:

1. Log in to your AdMob account.
2. Navigate to the “Apps” section and select the app you are working with (or add a new app if you haven’t already).
3. Click on “Ad units” in the sidebar.
4. Click the “Add ad unit” button.
5. Choose the ad format you want to use. For beginners, Banner and Interstitial ads are common choices.
   • Banner ads are rectangular ads that appear at the top or bottom of the app screen.
   • Interstitial ads are full-screen ads that appear at natural transition points in the app flow, such as between activities or game levels.
6. Give your ad unit a descriptive name (e.g., “Banner Ad – Home Screen”).
7. Click “Create ad unit.”
8. You will now see the Ad Unit ID for the newly created ad unit. Copy this ID. You’ll need to paste it into your Thunkable project shortly.

Step 2: Implement AdMob Components in Thunkable

Now that you have your Ad Unit IDs, it’s time to integrate the AdMob components into your Thunkable project. Thunkable provides built-in components that make this process simple.

1. Open your Thunkable project.
2. Navigate to the screen where you want to display ads.
3. In the Components panel, under the “Monetization” category, you will find the “AdMob Banner” and “AdMob Interstitial” components.
4. Drag and drop the “AdMob Banner” component onto your screen if you want to display banner ads. You can place it at the top or bottom of the screen as per your design preference.
5. Drag and drop the “AdMob Interstitial” component onto your screen if you plan to use interstitial ads. Note that interstitial ads are typically triggered by user actions or screen transitions and are not constantly visible like banner ads.

6. Select each AdMob component you added to the screen. In the Properties panel for each component, locate the “AdUnitID” property.
7. Paste the Ad Unit ID you copied from your AdMob account into the “AdUnitID” field for the respective ad component (Banner or Interstitial).

Step 3: Configure AdMob Blocks in Thunkable

With the AdMob components added and Ad Unit IDs set, you need to use Thunkable’s block-based programming to control when and how your ads are displayed.

1. Navigate to the Blocks editor for the screen where you added the AdMob components.

2. To display a banner ad when the screen initializes, use the “Screen1.Initialize” event block (or the equivalent for your screen name).

3. Inside the “Screen1.Initialize” block, drag the “LoadAd” block from the AdMob Banner component. This block will load and display the banner ad when the screen is opened.

   For interstitial ads, you typically want to control the timing of their appearance to avoid disrupting the user experience immediately upon opening the app. A common practice is to delay the interstitial ad or show it after a specific action.

4. To delay an interstitial ad, you can use the “Clock” component. If you haven’t already, drag a “Clock” component (from the “Timers” category) onto your screen (it will be non-visible).

5. Set the “TimerInterval” property of the Clock component to the desired delay in milliseconds (e.g., 5000 for 5 seconds). Disable “TimerAlwaysFires” if you only want it to trigger once.

6. Use the “Clock1.Timer” event block. Inside this block, drag the “LoadAd” block from the AdMob Interstitial component. This will trigger the interstitial ad to load after the specified delay.

7. To start the timer when the screen initializes, place the “Clock1.Enable” block (set to true) inside the “Screen1.Initialize” block.

Here’s an example of blocks code to display a banner ad immediately and an interstitial ad after a 5-second delay when the screen initializes:

Alternative Block Setup:

Some developers have reported better ad loading consistency with a slightly different block configuration, especially for interstitial ads. You can try this alternative setup if you encounter issues:

This alternative approach still uses the “Screen.Initialize” event but might provide more reliable ad loading in some cases.

Step 4: Set Screen Sizing to Responsive

An important step to ensure your ads display correctly across different devices is to set the screen’s sizing property to “Responsive.”

1. In the Designer view, select the screen where you have implemented AdMob.
2. In the Properties panel for the screen, find the “Sizing” property.
3. Change the “Sizing” dropdown from “Fixed” (default) to “Responsive.”

Setting the sizing to “Responsive” ensures that your app layout, including the AdMob ads, adapts appropriately to different screen sizes and resolutions.

Step 5: Test and Build Your App

Now that you have implemented AdMob in your Thunkable project, it’s crucial to test it thoroughly.

1. Thunkable Live Testing: Use the Thunkable Live app on your smartphone to test the ad integration in real-time. Connect your phone to Thunkable Live and open your project. Check if the banner and interstitial ads are loading and displaying as expected.
2. Build and Install: Once you are satisfied with the testing in Thunkable Live, build your app as an APK (for Android) or IPA (for iOS). Install the built app on your test device and run it to ensure the ads are working correctly in the standalone app.

Important Reminder: Just like with AdSense on websites or YouTube, it is against AdMob policies to click on your own ads. Avoid clicking on the ads displayed in your app to prevent policy violations and potential account suspension.

By following these steps, you can successfully implement AdMob into your Thunkable applications and start monetizing your mobile app creations. Remember to always refer to the official AdMob and Thunkable documentation for the most up-to-date information and best practices.