.png?alt=media&token=b8cfe187-22ef-4e5e-9e9b-93d5ea008390)
Comment on page
🎯
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.
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>]
There are 2 types of Ads supported currently in Bravo: Banner and Interstitial.
Banner
Interstitial
[component:admob]Use it for the Banner Admob type
[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.
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
iOS 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
[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
In order to set up Admobs, there are some steps that need to be followed, both in Admob and in Bravo Studio.
- 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.
You can use the file below to see how to set up these tags.
- 1.The first step to use the Admob feature you will need to make sure to ✨ upgrade your app to the Business app plan.
- 2.Then go to the integrations section on your app and enable Admob’s integration toggle
- 3.Add your App ID from the Admob configuration
- 4.Save it and done!
Pre-requirements:
- Get yourself comfortable
- Grab your favourite drink
- Be patient.
To Setup Admob
- 1.
- 2.Create an app for iOS or Android or both. Follow all the steps for your app
- 3.When you create the app then add an AD UNIT
- 4.Select the type of banner you want to create, we only support banner or interstitial at the moment.
.png?alt=media&token=88ac1387-cc9b-44b6-80d4-35a7220fb4d7)
- 5.Add a name to identify the
ad unitand continue
- 6.Copy the
app_idinto the Bravo settings and thead_unit_idin Figma using the AdMob tag.
- 7.Ready to Go! Start getting richer 🤑