googleads / googleads-mobile-flutter

A Flutter plugin for the Google Mobile Ads SDK
Apache License 2.0
343 stars 285 forks source link

banner responds to every click, even overlaid showModalBottomSheet #629

Closed desmeit closed 1 year ago

desmeit commented 2 years ago

I use a banner. In certain cases, a bottom sheet opens and overlays the banner. In the Bottom Sheet there is a button at the bottom, which is at the same position as the banner. When I click on the button, the link of the banner opens safari instead of the button responding.

How can I stop this behavior? I tried useRootNavigator: true, within showModalBottomSheet but it is not working.

 Future<void> future = showModalBottomSheet(
        //clipBehavior: Clip.none,
        isScrollControlled: true,
        context: context,
        backgroundColor: Colors.transparent,
        builder: (BuildContext context) {
          return StatefulBuilder(
              builder: (BuildContext context, StateSetter mystate) {
            return Material(
              child: Container(
...

ElevatedButton(
                        onPressed: () async {

google_mobile_ads: 1.2.0

huycozy commented 2 years ago

Hi @desmeit, please provide a completed and minimal reproducible code sample so that we may verify this. Also, please provide the output of flutter doctor -v as well. Thank you!

desmeit commented 2 years ago
import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class AdaptiveBannerAd extends StatefulWidget {
  const AdaptiveBannerAd({Key key}) : super(key: key);

  @override
  State<AdaptiveBannerAd> createState() => _AdaptiveBannerAdState();
}

class _AdaptiveBannerAdState extends State<AdaptiveBannerAd> {
  String get bannerAdUnitId {
    /// Always test with test ads

    if (kDebugMode) {
      //return MobileAds.bannerAdTestUnitId;
      return 'ca-app-pub-3940256099942544/6300978111';
    } else {
      if (Platform.isIOS) {
        return 'XXX';
      } else if (Platform.isAndroid) {
        return 'XXX';
      }
    }
  }

  BannerAd _bannerAd;
  bool _isBannerLoaded = false;
  AnchoredAdaptiveBannerAdSize size;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _initBannerAd();
  }

  Future<AnchoredAdaptiveBannerAdSize> anchoredAdaptiveBannerAdSize(
      BuildContext context) async {
    // Used to set size of adaptive banner ad according to device width and orientation.
    return await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
        MediaQuery.of(context).size.width.toInt());
  }

  _initBannerAd() async {
    size = await anchoredAdaptiveBannerAdSize(context);
    print("anchoredAdaptiveBannerAdSize size: " + size.toString());

    _bannerAd = BannerAd(
      size: size,
      adUnitId: bannerAdUnitId,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          setState(() {
            _isBannerLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, error) {},
      ),
      request: AdRequest(),
    );
    _bannerAd.load();
  }

  @override
  Widget build(BuildContext context) {
    return _isBannerLoaded
        ? Container(
            height: size.height.toDouble(),
            width: size.width.toDouble(),
            child: AdWidget(ad: _bannerAd))
        : SizedBox();
  }
}

flutter doctor -v

[✓] Flutter (Channel stable, 2.10.5, on macOS 11.6.5 20G527 darwin-x64, locale de-DE)
    • Flutter version 2.10.5 at /Users/XXX/development/tools/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 5464c5bac7 (4 months ago), 2022-04-18 09:55:37 -0700
    • Engine revision 57d3bac3dd
    • Dart version 2.16.2
    • DevTools version 2.9.2

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/XXX/Library/Android/sdk
    • Platform android-31, build-tools 31.0.0
    • ANDROID_HOME = /Users/XXX/Library/Android/sdk
    • ANDROID_SDK_ROOT = /Users/XXX/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • CocoaPods version 1.11.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.69.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.46.0
huycozy commented 2 years ago

Hi @desmeit For the issue to be workable, it needs to be reproducible with a completed and minimal reproducible code sample. Please provide such a sample. Thank you!

desmeit commented 2 years ago

I have created a minimal app. Please change GADApplicationIdentifier to show the ads.

When I open the bottom sheet and click on the ElevatedButton on the bottom, it should actually output "enter value". It does but it additionally triggers the ad and opens the Safari browser. this should only happen if I click directly on the ad, not on the button of the overlaid bottom sheet. I tested only IOS so far. Some ads show the problem, some don't. Unfortunately, the test ad cannot reproduce it:

I used the test ad ca-app-pub-3940256099942544/6300978111 in the example. Here the issue does not occur. The issue occurs only in Production Mode, when an animated ad comes. An example was an ad from Consors Bank with the link "https://aktionen.consorsbank.de/ev/tagesgeld/?partnerId=DI5adl&aid=di000085&cid=DIS-234".

Does this answer your questions? If there are further questions, please ask.

Here you find the app: https://we.tl/t-Nl3d9VrdLb

Thanks for your help!

huycozy commented 2 years ago

Hi @desmeit, thanks for providing the sample code. But I can not reproduce the issue on the latest stable and master channels with test ad IDs (same as you). I also tried with the latest ads version: google_mobile_ads: ^2.0.1 but the result is still the same. When clicking on the button, the banner ad does not respond.

Demo https://user-images.githubusercontent.com/104349824/185626960-28122f45-78bd-44d8-8cce-2b2c24aef73e.mp4
flutter doctor -v ```bash [✓] Flutter (Channel stable, 3.0.5, on macOS 12.2.1 21D62 darwin-x64, locale en-VN) • Flutter version 3.0.5 at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision f1875d570e (9 hours ago), 2022-07-13 11:24:16 -0700 • Engine revision e85ea0e79c • Dart version 2.17.6 • DevTools version 2.12.2 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.3) • Xcode at /Applications/Xcode.app/Contents/Developer • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2020.3.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] IntelliJ IDEA Community Edition (version 2022.1.1) • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] VS Code (version 1.69.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.44.0 [✓] Connected device (3 available) • SM T225 (mobile) • R9JT3004VRJ • android-arm64 • Android 11 (API 30) • macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 103.0.5060.114 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ``` ```bash [✓] Flutter (Channel master, 3.1.0-0.0.pre.2362, on macOS 12.5 21G72 darwin-x64, locale en-EE) • Flutter version 3.1.0-0.0.pre.2362 on channel master at /Users/huynq/Documents/GitHub/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision 75ee440329 (9 hours ago), 2022-08-19 05:59:26 +0200 • Engine revision 5c30ead197 • Dart version 2.19.0 (build 2.19.0-112.0.dev) • DevTools version 2.16.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13E113 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) [✓] IntelliJ IDEA Community Edition (version 2020.3.3) • IntelliJ at /Applications/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] IntelliJ IDEA Community Edition (version 2022.1.1) • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart [✓] VS Code (version 1.70.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.46.0 [✓] Connected device (3 available) • iPhone 13 (mobile) • 2526BC1A-435D-4B08-B99C-44B928F2517B • ios • com.apple.CoreSimulator.SimRuntime.iOS-15-4 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 12.5 21G72 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 104.0.5112.101 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

As I can see from the sample code, you're using the old plugin version: google_mobile_ads: ^1.2.0. Could you please try upgrading to the latest version (2.0.1) and try reproducing the issue again in Production Mode?

desmeit commented 2 years ago

Hi @huycozy I cannot switch to 2.0.1 because I'm using 2.10.5 flutter version. As I said the issue occurs only with some specific ads, for example the consorsbank ad.

please see the screencast in addition. here you can see whats happen if I click on my button on the bottom: https://we.tl/t-IzivvIS9Wg it triggers the ad.

huycozy commented 2 years ago

@desmeit thank you so much for providing the demo video in production mode. Labeling this issue for further investigation from the team!

blokberg commented 2 years ago

I'm having the same issue. The banner ad behind the bottomsheet, responds the click action. This issue does not comply with admob policies and is very bad in terms of user experience. The issue occurs in ios production mode. I am using the latest version: google_mobile_ads: ^2.2.0

DavideM12 commented 1 year ago

For me the bug appeared only with version 2.3.0 of the package. Version 2.2.0 was fine. Now if I click on the bottom nav bar and there is a banner behind it, it clicks on the banner and not the bottom nav bar. Just on iOS. I'm on Flutter 3.3.8

Thank you.

tecbot commented 1 year ago

We see the same issue within our App for certain ads within a medium rectangle banner. Users are thinking we open magical some weird web pages. Any news?

flutter: 3.3.10 google_mobile_ads: 2.4.0

@DavideM12 @desmeit could you solve this issue on your own?

timothyhoang-google commented 1 year ago

@huycozy - do we have a reproducible sample or just a video for this issue?

huycozy commented 1 year ago

@timothyhoang-google:

@desmeit and I also couldn't reproduce this issue with test ads. Per https://github.com/googleads/googleads-mobile-flutter/issues/629#issuecomment-1216810081 and https://github.com/googleads/googleads-mobile-flutter/issues/629#issuecomment-1220728294, the bug only occurs with production and specific ad content.

@desmeit Your demo video in link above is expired, can you please share it here again? (attaching raw video to GitHub comment, to make sure it will not be expired)

qchau97 commented 1 year ago

Can anyone please have a look on this issue? I'm having it with my app when displaying production ads. Cannot provide reproducible code sample as the code for ads config is strictly confidential. But here's a recording, the ad is opened even when I tapped on pink area (which is a modal bottom sheet)https://github.com/googleads/googleads-mobile-flutter/assets/66512171/0c9f08c2-67d9-429e-b4a1-677f7f03fd62

tecbot commented 1 year ago

Some example ads we have blocked which caused this (maybe this helps you internal)

github-actions[bot] commented 1 year ago

Without additional information, we are unfortunately not sure how to resolve this issue. We are therefore reluctantly going to close this bug for now. If you find this problem please file a new issue with the same description, what happens, logs and the output of 'flutter doctor -v'. All system setups can be slightly different so it's always better to open new issues and reference the related ones. Thanks for your contribution.

MuhammedOzdogan commented 7 months ago

Isn't showing an overlay like (bottom sheet navigator) over an ad content against Google Ads / Admob policies?

namnh-0652 commented 4 months ago

@desmeit Did you resolve this issue? Please guide us!