# Admob

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.

{% hint style="info" %}
This feature is available in the [**Advanced App addon.** ](https://www.bravostudio.app/add-ons)
{% endhint %}

## Requirements 

* A Bravo [Advanced App addon](https://www.bravostudio.app/add-ons)
* An [AdMob account](https://admob.google.com/home/)

## 🔖 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.

{% tabs %}
{% tab title="Banner" %} <mark style="color:red;">`[component:admob]`</mark>

Use it for the Banner Admob type
{% endtab %}

{% tab title="Interstitial" %} <mark style="color:red;">`[admob:interstitial]`</mark>

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.
{% endtab %}
{% endtabs %}

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

{% tabs %}
{% tab title="Android Version" %} <mark style="color:red;">`[admob:ad:android:<AD-UNIT-ID>]`</mark>

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.&#x20;

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

{% tab title="iOS Version" %} <mark style="color:red;">`[admob:ad:ios:<AD-UNIT-ID>]`</mark>

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

💡   Use both Android & iOS tags in the same Figma element to show on both platforms
{% endtab %}
{% endtabs %}

## ⚙️ 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 &#x20;

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. <mark style="color:red;">`[component:admob]`</mark> For the Banner ads
   2. <mark style="color:red;">`[admob:ad:android:<ad-unit-ID>]`</mark> to show on Android
   3. <mark style="color:red;">`[admob:ad:ios:<ad-unit-ID>]`</mark> to show on iOS
3. If you are looking to have an I**nterstitial Ad type** of ad you should add the following tags all in the same component in Figma:
   1. <mark style="color:red;">`[admob:interstitial]`</mark> for the Interstitial ads
   2. <mark style="color:red;">`[admob:ad:android:<ad-unit-ID>]`</mark> to show in Android
   3. <mark style="color:red;">`[admob:ad:ios:<ad-unit-ID>]`</mark> to show in iOS

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

{% hint style="info" %}
**Ad container** \[layer]\[component:admob]\[admob:ad:android:]\[admob:ad:ios:]
{% endhint %}

{% hint style="info" %}
**Note:** Add the Layer tag to make it fix. You can also add it to the topbar or in any container supported in Bravo.
{% endhint %}

## **🎨 Sample design file**

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

{% embed url="<https://www.figma.com/community/file/1242520653033471331>" %}

## 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**.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FGeucokp23eEW1SCFYh3T%2Fdocs%20img%20-%20Bravo-1.png?alt=media&#x26;token=e8d951b7-2e7c-466d-b80d-ffeb7b6eb389" alt=""><figcaption></figcaption></figure>

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!

## 🎯 Admob configuration

**Pre-requirements:**&#x20;

* Get yourself comfortable
* Grab your favourite drink
* Be patient.

**To Setup Admob**

1. Create an Google Admob account at<https://www.admob.com>
2. Create an app for iOS or Android or both. Follow all the steps for your app

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FbJIJp0xWqUPIXWNI3qbB%2Fdocs%20img%20-%20admob-6.png?alt=media&#x26;token=0dc0ff16-b04c-49df-ae1e-0e5b3c24ba62" alt="" width="563"><figcaption></figcaption></figure>

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FDn7XYr9JngMFxt7GlMF1%2Fdocs%20img%20-%20admob-7.png?alt=media&#x26;token=c1c669f3-ebdb-4e3b-84ce-5c710c8b593c" alt="" width="563"><figcaption></figcaption></figure>

3. When you create the app then add an **AD UNIT**

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FUzYoLC2s31MNRpxChGVm%2Fdocs%20img%20-%20admob-8.png?alt=media&#x26;token=67920238-74c1-4e3d-ade1-605941a589aa" alt="" width="563"><figcaption></figcaption></figure>

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

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F74Vmjwj9ToktLOkKvFnN%2Fdocs%20img%20-%20admob%20(1).png?alt=media&#x26;token=88ac1387-cc9b-44b6-80d4-35a7220fb4d7" alt="" width="563"><figcaption></figcaption></figure>

5. Add a name to identify the <mark style="color:red;">`ad unit`</mark> and **continue**

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FDbw8hThsdh0wcPmQ1Isn%2Fdocs%20img%20-%20admob-2.png?alt=media&#x26;token=7c0ee919-ee5e-45a8-8e38-4892dbb5218d" alt="" width="563"><figcaption></figcaption></figure>

6. Copy the <mark style="color:red;">`app_id`</mark> into the Bravo settings and the <mark style="color:red;">`ad_unit_id`</mark> in Figma using the **AdMob** tag.

<figure><img src="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FC7OjZqYmuMoaJ7mjTeQC%2Fdocs%20img%20-%20admob-3.png?alt=media&#x26;token=43b43c03-71c3-44af-900e-09461d1640b7" alt="" width="563"><figcaption></figcaption></figure>

7. Ready to Go! Start getting richer 🤑

\
👉 Go Back to [Bravo Studio](https://projects.bravostudio.app/login)

##