Integrating interstitial ads into your MIT App Inventor project with Enhance

App Inventor is a visual app-building tool, allowing you to simply drag and drop function and logic blocks to create a mobile app. In this tutorial, we show how you can use Enhance to integrate interstitial ads into your App Inventor project. Spoiler alert: it’s really easy! The following tutorial is also compatible with related software such as Thunkable and Appybuilder, which are based on App Inventor technology.

Step 1: Sign up to get started
If you don’t already have an Enhance account, start by signing up. It’s completely free!

Step 2: Navigate to the Enhance My App page and select the services you want to integrate. Since this tutorial is about interstitial ads, that’s what we’ll select here, but feel free to include other services you’re interested in at this point.

ai-services.png

Step 3: Select App Inventor from the development platform list, then download our Drag and Drop library. You need this library in order to use interstitial ads, because the library allows your app to give more specific instructions to Enhance, such as when to show your ad.

ai-dnd.png

Step 4: Now let’s head over to your App Inventor project, where you’ll import the Drag and Drop library. Once imported, then simply drag the extension onto your project board so you have access to the functions.

appy-entension.png

Step 5: Build a button to attach the Enhance functions to. If you’re following along, you might be wondering why we’ve attached an interstitial ad call to a button output. This tutorial is simply for demonstration purposes. Obviously you’d want to call an interstitial ad at a more intuitive point in your real world app, rather than on a button press.

Step 6: Drag and drop App Inventor logic blocks into the button object. Start by telling App Inventor that you want something to happen when a user clicks on our button.

ai-adsbutton

Next, add a conditional if/then statement block, located in the Control category. This will tell the ad network to show an ad if one is available.

ai-ifthen

Head down to the EnhanceConnector extension that you added to your project at the beginning of this tutorial, and find the IsInterstitialReady function. This will be your “if” condition.

ai-intersready.png

Using the same method, let’s fill the “then” condition with the ShowInterstitialAd function.

ai-showinters

That’s it! You’ve “coded” everything that’s necessary to make interstitial ad calls in your app. Now that you’ve done this once, you’ll never have to edit the source again, because what you did was create a placeholder ad call. Now you can use Enhance to integrate any number of ad network SDKs into that placeholder!

Step 7: Export your Keystore file so you can sign your app (we’ll talk about this in a minute), and then save your project as a compiled APK from the Build menu in App Inventor.

ai-signing.png

Step 8: Head back to the Enhance website to upload the APK you just produced. If you did everything right in the previous steps, you will be taken to the SDK selector page where you can choose from over 40 ad networks that you want to call into your newly created interstitial ad placeholder. You can choose to integrate an already-established mediation platform, or you can integrate any number of direct ad networks to create your own mediation waterfall. For this tutorial, we’ll just integrate the Admob SDK.

ai-admob

Simply input your Admob Interstitial Ad Unit ID and click continue at the bottom.

Step 9: Input your signing certificate information. Start by uploading the keystore file we exported from App Inventor in step 7, followed by the password for that keystore. For App Inventor, the default keystore/certificate password is simply “android”. When ready, scroll to the bottom of the page and click  “Enhance Now”.

ai-keystore2

You’re done! You’ve Enhanced your app, and Admob is now running in the placeholder we initially setup. If you want to integrate more ad network SDKs to be called when the interstitial ad placement is called, you only have to repeat steps 8 and 9 from our web interface. You won’t have to edit anything in your App Inventor project!

ai-donezo.png

If you want to see the ad placement in action, check out the video that’s associated with this tutorial. If you want to learn more about Enhance, check out more articles from our blog. If you’re ready to integrate SDKs into your app, get started here.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s