🎯Admob

Bravo uses Google Admob service to integrate advertising for iOS & Android apps.

Include advertising in your app with Admob and start monetizing from your Bravo apps. This feature is a perfect option to push users to purchase your app subscription plans.

This feature is available in the Advanced App addon.

Requirements

• A Bravo Advanced App addon

• An AdMob account

🔖 The tags

The following tags are available:

//Ad Banner component
[component:admob]

//Interstitial Ad type (require link or an action to trigger)
[admob:interstitial]

//Android ad platform
[admob:ad:android:<ad_unit_id>]

//iOS ad platform
[admob:ad:ios:<ad_unit_id>]

Ads Type

There are 2 types of Ads supported currently in Bravo: Banner and Interstitial.

Banner

[component:admob]

Use it for the Banner Admob type

Interstitial

[admob:interstitial]

Use this tag to open an interstitial before a link or action, and when the interstitial is closed the link or action will be executed. For example, to open a new page of the app.

Ads per device (Android and iOS)

Using these tags are necessary in case you want to display the ad only on iOS, only on Android, or on both. It is necessary because we need the Ad unit ID per each platform separated. The ad-unit-id can be obtained when creating the ad units on the Admob page.

Android Version

[admob:ad:android:<AD-UNIT-ID>]

In this data you will need to add the Ad Id If you use this tag alone, the ad component will be only visible on Android.

💡 Use both Android & iOS tags in the same Figma element to show on both platforms

iOS Version

[admob:ad:ios:<AD-UNIT-ID>]

If you use this tag alone, the ad component will be only visible on iOS.

💡 Use both Android & iOS tags in the same Figma element to show on both platforms

⚙️ Setup Bravo + Admob

In order to set up Admobs, there are some steps that need to be followed, both in Admob and in Bravo Studio.

Figma file

1. Add the component that will be your ad banner or that will trigger the interstitial ad when the user taps on it.

2. If you are looking to have a Banner Ad type of ad you should add the following tags all in the same component in Figma:

   1. [component:admob] For the Banner ads

   2. [admob:ad:android:<ad-unit-ID>] to show on Android

   3. [admob:ad:ios:<ad-unit-ID>] to show on iOS

3. If you are looking to have an Interstitial Ad type of ad you should add the following tags all in the same component in Figma:

   1. [admob:interstitial] for the Interstitial ads

   2. [admob:ad:android:<ad-unit-ID>] to show in Android

   3. [admob:ad:ios:<ad-unit-ID>] to show in iOS

Here is an example (you can copy and paste it into the Figma frame):

Ad container [layer][component:admob][admob:ad:android:][admob:ad:ios:]

Note: Add the Layer tag to make it fix. You can also add it to the topbar or in any container supported in Bravo.

🎨 Sample design file

You can use the file below to see how to set up these tags.

Bravo Sample: AdmobFigma

Bravo Studio integration

1. The first step to use the Admob feature you will need to make sure to ✨ upgrade your app to the Business app plan.

1. Then go to the integrations section on your app and enable Admob’s integration toggle

2. Add your App ID from the Admob configuration

3. Save it and done!

🎯 Admob configuration

Pre-requirements:

• Get yourself comfortable

• Grab your favourite drink

• Be patient.

To Setup Admob

1. Create an Google Admob account athttps://www.admob.com

2. Create an app for iOS or Android or both. Follow all the steps for your app

1. When you create the app then add an AD UNIT

1. Select the type of banner you want to create, we only support banner or interstitial at the moment.

1. Add a name to identify the ad unit and continue

1. Copy the app_id into the Bravo settings and the ad_unit_id in Figma using the AdMob tag.

1. Ready to Go! Start getting richer 🤑

👉 Go Back to Bravo Studio