iOS: Inline Adaptive Ads in a list view invoking a click event

[nickJLm]

Plugin Version

google_mobile_ads: ^3.0.0

Steps to Reproduce

inline_adaptive_example.dart

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

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  String placeholderText =
      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod'
      ' tempor incididunt ut labore et dolore magna aliqua. Faucibus purus in'
      ' massa tempor. Quis enim lobortis scelerisque fermentum dui faucibus'
      ' in. Nibh praesent tristique magna sit amet purus gravida quis.'
      ' Magna sit amet purus gravida quis blandit turpis cursus in. Sed'
      ' adipiscing diam donec adipiscing tristique. Urna porttitor rhoncus'
      ' dolor purus non enim praesent. Pellentesque habitant morbi tristique'
      ' senectus et netus. Risus ultricies tristique nulla aliquet enim tortor'
      ' at.';

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 1000,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index != 0 && index % 6 == 0) {
                return BannerWidget();
              }
              return Text(
                placeholderText,
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

}

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

  @override
  State<BannerWidget> createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  static const _insets = 16.0;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void dispose() {
    super.dispose();
    _inlineAdaptiveAd?.dispose();
  }

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = AdManagerBannerAd(
      adUnitId: 'ca-app-pub-3940256099942544/9214589741', //example id provided
      sizes: [size],
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
                width: _adWidth,
                height: _adSize!.height.toDouble(),
                child: AdWidget(
                  ad: _inlineAdaptiveAd!,
                ),
              ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }
}

1. Run code above in release.
2. Scroll through the list so ads are loaded as you are scrolling certain ads will open randomly.

Expected results: As users scroll through the list with inline adaptive ads they should opened from a on click.

Actual results: As you scroll through the list, certain ads will open even though the user has not clicked on the ad. Many users have contacted us expressing frustration that ads are opening randomly in the app. The video below shows that the Walmart ad opens as you scroll up and down in a list.

Example Video

https://github.com/googleads/googleads-mobile-flutter/assets/32340586/bd8c3542-eccd-4f58-a757-c5151f1b17f8

This occurs for not all ads but from our users we have been told Amazon ads, Walmart and Rogers.

This only happens on iOS version of the app. We have recreated it on iOS version 16 and above.

Logs

``` [✓] Flutter (Channel stable, 3.10.5, on macOS 13.4 22F66 darwin-x64, locale en-CA) [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1) [✓] Xcode - develop for iOS and macOS (Xcode 14.3.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.1) [✓] VS Code (version 1.79.2) [✓] Connected device (3 available) [✓] Network resources ```

[darshankawar]

Thanks for the report @nickJLm I think a similar behavior is reported https://github.com/googleads/googleads-mobile-flutter/issues/629. This for example seems to be similar to the one you are seeing https://github.com/googleads/googleads-mobile-flutter/issues/629#issuecomment-1582145007

Can you check the same and see if it resembles your use case too or not ?

[nickJLm]

Yes, this is a similar issue, but the difference we are seeing (as seen in the video provided), the ad will open when you try and scroll the list when certain ads appear.

Our app had the exact issue a while ago, where you can click the bottom navigation bar, and the ad would open if it were directly behind the navigation bar. We were able to fix this, but with further testing, we were able to recreate that issue on the latest version of the package.

[darshankawar]

Thanks for the update. I am able to replicate the reported behavior.

stable, master flutter doctor -v

``` [!] Flutter (Channel stable, 3.10.5, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.10.5 on channel stable at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 796c8ef792 (2 days ago), 2023-06-13 15:51:02 -0700 • Engine revision 45f6e00911 • Dart version 3.0.5 • DevTools version 2.23.1 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. [!] Flutter (Channel master, 3.12.0-12.0.pre.48, on macOS 12.2.1 21D62 darwin-x64, locale en-GB) • Flutter version 3.12.0-12.0.pre.48 on channel master at /Users/dhs/documents/fluttersdk/flutter ! Warning: `flutter` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/dhs/Documents/Fluttersdk/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/dhs/documents/fluttersdk/flutter. Consider adding /Users/dhs/documents/fluttersdk/flutter/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision 7b47ba1ef9 (14 minutes ago), 2023-06-29 00:37:55 -0400 • Engine revision 4e49b9deb7 • Dart version 3.1.0 (build 3.1.0-257.0.dev) • DevTools version 2.24.0 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [!] Android toolchain - develop for Android devices (Android SDK version 30.0.3) • Android SDK at /Users/dhs/Library/Android/sdk ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 13.2.1) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13C100 • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] IntelliJ IDEA Ultimate Edition (version 2021.3.2) • IntelliJ at /Applications/IntelliJ IDEA.app • Flutter plugin version 65.1.4 • Dart plugin version 213.7228 [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.29.0 [✓] Connected device (3 available) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 15.3.1 19D52 • macOS (desktop) • macos • darwin-x64 • macOS 12.2.1 21D62 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 109.0.5414.119 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. [!] Xcode - develop for iOS and macOS (Xcode 12.3) • Xcode at /Applications/Xcode.app/Contents/Developer ! Flutter recommends a minimum Xcode version of 13. Download the latest version or update via the Mac App Store. • CocoaPods version 1.11.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] VS Code (version 1.62.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.21.0 [✓] Connected device (5 available) • SM G975F (mobile) • RZ8M802WY0X • android-arm64 • Android 11 (API 30) • Darshan's iphone (mobile) • 21150b119064aecc249dfcfe05e259197461ce23 • ios • iOS 14.4.1 18D61 • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator) • macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.4 19E2269 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 98.0.4758.80 [✓] HTTP Host Availability • All required HTTP hosts are available ! Doctor found issues in 1 category. ```

[nickJLm]

We have gotten many users contact us about this issue is there a temporary fix or and version we can downgrade to until a proper fix is pushed?

[kirby-eng]

Our users are seeing the same issue. This is a very important issue because it affects the usability of the app for our users. Some have reported that it is so bad they simply uninstalled the app. As there been any progress on this issue?

[bparrishMines]

This could be related to https://github.com/flutter/flutter/issues/30143

[andreasAasheim]

Any news on this? We display a ad inside a list, and the ad is opening randomly when touching the ad while scrolling.

This is on Flutter 3.16.8 and google_mobile_ads 4.0.0.

[malandr2]

Hi @andreasAasheim, thank you for flagging this. Does this only happen on iOS for you as well? Are you able to consistently reproduce?

If so, can you create a new thread on the AdMob Developer forum that includes your App ID, ad unit ID of the ad that is opening randomly and at best a minimal reproducible sample. It's possible the issue is not a Flutter plugin issue but rather an iOS and/or ad issue.

I'll keep this issue open. Thanks!

[malandr2]

We also have a native iOS sample of banner ads in a UITableView. See our BannerTableViewExample - replacing the ad units with your values are you able to reproduce the issue there as well?