diff --git a/docs/ff-integrations/ads/admob.md b/docs/ff-integrations/ads/admob.md index 6eebf10a..18d3fb28 100644 --- a/docs/ff-integrations/ads/admob.md +++ b/docs/ff-integrations/ads/admob.md @@ -10,31 +10,20 @@ import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; # AdMob -Integrating AdMob in your FlutterFlow app allows you to effortlessly include various types of advertisements, such as banner ads and interstitial ads. Here's a quick guide on how to add an AdMob banner widget and display interstitial ads in your app. +Adding ads to your FlutterFlow project can be a powerful way to monetize your app. FlutterFlow supports the integration of popular advertising platforms like [Google AdMob](https://admob.google.com/home/), making it easy for you to add [Banner](https://developers.google.com/admob/android/banner) and [Interstitial](https://developers.google.com/admob/android/interstitial) ads to your projects. This guide provides a step-by-step walkthrough for integrating ads within your FlutterFlow project. -## Getting API Keys +## Setup AdMob -Acquiring the API keys comprises the following steps: - -1. [Creating AdMob app](#1-creating-admob-app) -2. [Adding keys to FlutterFlow](#2-adding-keys-to-flutterflow) +Setting up an AdMob involves creating AdMob apps for both Android and iOS, obtaining the app keys, and configuring some optional settings. ### 1. Creating AdMob app -To create an AdMob app: - -1. Visit the AdMob homepage and [signup using your Google account](https://admob.google.com/home/). -2. Go to the Dashboard, and click **Apps** on the left side menu. -3. Now, click **Add App**. -4. Select the Platform as **Android**. -5. For the **Is the app listed on a supported app store?,** select **Yes** if your app is published on Playstore or Appstore. Select **No** if your app is still under development. -6. Click on **Continue**. -7. Enter the **App Name** and click **ADD APP**. -8. Click **Done**. -9. Similarly, create another AdMob App for iOS app. +Visit the AdMob homepage and [sign up](https://admob.google.com/home/) using your Google account. Once logged in, create an Android and iOS app with the necessary details, such as platform and app name. :::info -You should be creating two AdMob Apps to display advertisements in both Android and iOS apps. + +You should create two AdMob apps to display ads in both Android and iOS versions. + :::
-
-

+To display an **AdBanner** from AdMob, follow these steps: -### 2. Assigning Ad Unit ID +### Adding AdBanner widget -The Ad Unit ID is the unique identifier given to every ad on Admob. You can get this by creating a new ad unit from your Admob account. +First, add the **AdBanner** widget from the **Base Elements**. Next, create a new Banner Ad unit in AdMob, then copy and paste its **unit ID** into FlutterFlow. The Ad unit ID is a unique identifier assigned to each ad created in AdMob. -To assign the ad unit Id: -1. Go to the Admob account dashboard, click **Apps** on the left side menu and select your app. -2. Select **Ad units** and then click on the **Add add unit**. -3. Select the **Banner** Ad. -4. Enter the **Ad unit name**. -5. Click **Create ad unit**. -6. Copy the ad unit ID (the second one) and then click **Done**. -7. Paste it into the **Android Ad Unit ID** input box. -8. Similarly, create, copy and paste Ad unit for the iOS app as well. -
- -
-

- -### 3. Enabling test ads - -To prevent the risk of your AdMob account ban, it is best to enable the test ads while you are still developing the app. - -To enable the test ads: - -1. Select the **AdBanner** Widget from the widget tree or from the canvas area. -2. Move to property editor and scroll down to the **Ad properties** section. -3. Checkmark the **Show Test Ads**. Uncheck it only when you are about to publish the app. +:::info +By default, ad banners are set to a dimension of 100 (width) x 50 (height). +:::
-
-

- -# **Load/Show Interstitial Ad** +## Interstitial Ad -Using this action, you can display the [interstitial ad](https://developers.google.com/admob/android/interstitial#:~:text=Interstitial%20ads%20are%20full%2Dscreen,between%20levels%20in%20a%20game.). This type of ad is a full-screen ad (shows an image or video inside) and is typically displayed during natural pauses in your app/game, such as moving to the next page/level. - -
- -
-

+An **Interstitial Ad** is a type of full-screen ad that appears at natural transitions or pauses in an app, such as when switching between pages. Unlike banner ads, which stay on-screen while users interact with the app, interstitial ads are shown at key moments and are designed to be closed before the user can continue. They typically support multiple formats, including: -## Displaying Interstitial Ad +- **Image ads** +- **Video ads** +- **Rich media (interactive ads)** -To display an interstitial ad, you need to use both **Load Interstitial Ad** and **Show Interstitial Ad** actions. Here is how it works: +To display an interstitial ad in FlutterFlow, you need to use the **Load Interstitial Ad** and **Show Interstitial Ad** actions together. Here's how it works: -![Load and show an interstitial ad](imgs/load-show-inerstatial.avif) +![interstitial_ad_flow](imgs/interstitial_ad_flow.png) -First, you must load the ad using the **Load Interstitial Ad** action and display it using the **Show Interstitial Ad** action. When the ad is visible, users can choose to either open or dismiss it. When the ad is dismissed, you can't show the same ad again. Hence, it would be best if you loaded the ad again. The newly loaded ad will be displayed next time you trigger the **Show Interstitial Ad** action. +First, load the ad using the **Load Interstitial Ad** action, then display it with the **Show Interstitial Ad** action. Once the ad is shown, users can choose to either interact with it or dismiss it. After the ad is dismissed, it cannot be displayed again, so you'll need to load a new ad. The newly loaded ad will then be ready for display the next time you trigger the **Show Interstitial Ad** action. :::warning -**Allow sufficient time after calling *Load Interstitial Ad* before you call *Show Interstitial Ad.*** It might take some time to load the ad. Hence, it's advisable to load the ad well in advance before showing it. Otherwise, the ad won't display. For example, if you want to display an ad with the tap of a widget, you must load the ad as soon as the page is loaded. -::: -:::info -Learn the best practices to add the interstitial ad [**here**](https://support.google.com/admob/answer/6066980?hl=en&ref_topic=2936214). +***Allow sufficient time between calling Load Interstitial Ad and Show Interstitial Ad to ensure the ad has fully loaded.*** Since loading may take some time, it's recommended to load the ad well in advance to avoid display issues. For example, if you want to show an ad when a widget is tapped, you should load the ad as soon as the page loads. If the ad isn’t loaded in time, it won’t be displayed. + ::: -Let's apply this basic fundamental and build an example that shows the interstitial ad when you navigate to the next page. Here's how it looks: +Let's see an example displaying the interstitial ad when you navigate to the next page: -![Showing interstitial ad when navigating to next page](imgs/showing-intersitial-when-navigating.avif) +![interstitial-ad-flow-2](imgs/interstitial-ad-flow-2.avif) -On the first page, trigger the **Load Interstitial Ad** action when the page is loaded. On tap of a widget, add the **Show Interstitial Ad** action. This action gives the result of whether the ad is dismissed or not inside the `interstitialAdSuccess` variable. If this is true, you can load the ad again and then navigate to the next page. +On the first page, trigger the **Load Interstitial Ad** action as soon as the page loads. Then, on a widget tap, add the **Show Interstitial Ad** action. The result of whether the ad is dismissed will be stored in the `interstitialAdSuccess` variable. If this value is true (the ad was dismissed), you can load a new ad and proceed to navigate to the next page. Here are the step-by-step instructions: -1. [Getting Ad Unit ID](#1-getting-ad-unit-id) -2. [Adding pages](#2-adding-pages) -3. [Loading ad on page load](#3-loading-ad-on-page-load) -4. [Display ad](#4-display-ad) - -### 1. Getting Ad Unit ID - -The Ad Unit ID is the unique identifier given to every ad on Admob. You can get this by creating a new Interstitial ad unit from your Admob account. - -:::info -This will be needed when you load the ad. -::: +### Getting Ad Unit ID -To get the ad unit Id: +The Ad Unit ID is the unique identifier given to every ad on Admob. You can get this by creating a new Interstitial ad unit from your Admob account. You’ll need this ID when loading the ad. -1. Go to the Admob account dashboard, click **Apps** on the left side menu and select your app. -2. Select **Ad units** and then click on the **Add add unit**. -3. Select the **Interstitial** Ad. -4. Enter the **Ad unit name**. -5. Click **Create ad unit**. -6. Copy the ad unit ID (the second one) and then click **Done**. -7. Similarly, create and copy Ad unit for the iOS app as well. +To get the ad unit ID, go to the AdMob dashboard, select your app under **Apps**, and create an **Interstitial** ad unit by following the steps under **Ad units**. Once created, copy the ad unit ID, and repeat the process for the iOS version if needed.

- - -![final-action-flow-displaying-interstitial-ad](imgs/final-action-flow-displaying-interstitial-ad.png) - - \ No newline at end of file + +## Best Practices + +To maximize the effectiveness of AdMob ads in your app while maintaining a positive user experience and complying with AdMob policies, follow these overall best practices: + +- **Use Test Ads During Development**: Always enable Test Ads during development to avoid invalid traffic and protect your AdMob account from being flagged or banned. +- **Comply with AdMob Policies**: Adhere strictly to AdMob’s guidelines regarding ad placement, frequency, and user interaction. This includes avoiding accidental clicks and ensuring that ads are not too intrusive. Learn more about [AdMob Policies & Restrictions](https://support.google.com/admob/answer/6128543?hl=en). +- **Respect User Privacy**: Follow data privacy regulations (e.g., GDPR, CCPA) and give users control over their ad preferences by integrating privacy options. Learn more about [AdMob Privacy & Consent](https://support.google.com/admob/answer/7676680?hl=en) + +### AdBanner Best Practices + +- **Strategic Placement**: Position AdBanner widgets in non-intrusive areas of the app, such as at the bottom or top of the screen, so they don’t interfere with the user’s interaction with the app’s core content. Learn more about [Banner Ad Placement Guide](https://support.google.com/admob/answer/6128877?hl=en). +- **Avoid Clickbait**: Make sure the banner ad does not blend too much with the app content. Users should easily differentiate between the ad and the app’s content to avoid accidental clicks. + +### Interstitial Ad Best Practices + +- **Loading Ads in Advance**: Interstitial ads should be loaded before they are needed, typically in the background, to avoid delays when it’s time to display the ad. +- **Displaying at the Right Time**: Ensure ads are shown at natural transition points. Showing ads in the middle of an activity can disrupt the user experience. +- **Monitoring Frequency**: Overuse of interstitial ads can lead to a negative user experience. It's recommended to show them sparingly and at appropriate times. +- **Test Before Production**: Use test ads during development to ensure that your implementation is correct and that you don’t accidentally trigger invalid ad interactions, which could lead to an AdMob account suspension. \ No newline at end of file diff --git a/docs/ff-integrations/ads/imgs/adbanner-widget-with-test-ad.avif b/docs/ff-integrations/ads/imgs/adbanner-widget-with-test-ad.avif new file mode 100644 index 00000000..c996ae51 Binary files /dev/null and b/docs/ff-integrations/ads/imgs/adbanner-widget-with-test-ad.avif differ diff --git a/docs/ff-integrations/ads/imgs/admob-settings.avif b/docs/ff-integrations/ads/imgs/admob-settings.avif new file mode 100644 index 00000000..97bece4c Binary files /dev/null and b/docs/ff-integrations/ads/imgs/admob-settings.avif differ diff --git a/docs/ff-integrations/ads/imgs/enable-test-ads.avif b/docs/ff-integrations/ads/imgs/enable-test-ads.avif new file mode 100644 index 00000000..334a97b9 Binary files /dev/null and b/docs/ff-integrations/ads/imgs/enable-test-ads.avif differ diff --git a/docs/ff-integrations/ads/imgs/interstitial-ad-flow-2.avif b/docs/ff-integrations/ads/imgs/interstitial-ad-flow-2.avif new file mode 100644 index 00000000..f47fa45d Binary files /dev/null and b/docs/ff-integrations/ads/imgs/interstitial-ad-flow-2.avif differ diff --git a/docs/ff-integrations/ads/imgs/interstitial_ad_flow.png b/docs/ff-integrations/ads/imgs/interstitial_ad_flow.png new file mode 100644 index 00000000..7bae3fa7 Binary files /dev/null and b/docs/ff-integrations/ads/imgs/interstitial_ad_flow.png differ