Android inline ad performance

[jjliu15]

There have been a number of complaints about performance of inline banner and native ads on Android:

• 🐛Reported framerate issues with BannerAd on some Android devices #167
• 🐛 Native ad performance on android in listview.builder is painful #75
• 🐛 Low performance when using AdWidget #80
• Severe performance issues (significant drop in FPS) when using the plugin #231
• Ads are missing frames inside a listview builder. #239

As mentioned in #80 (comment), performance is noticeably worse on Android 9 and below. This is related to use of hybrid composition, which is a requirement due to technical constraints.

Currentworkarounds are to constrict inline ads to android 10 and above, or only to only use fixed position banner/native ads.

[svprdga]

Not show inline ads to android < 10 is a disaster from a business perspective, we are talking of thousands of users.

@jjliu15 does this same plugin support the fixed position banners you are talking about (just like the deprecated plugin did)?

[jjliu15]

Fixed position banners are supported, but the implementation is different than before. Now you need to align the flutter widget that displays the banner ad to a fixed position. You can see the example app for a reference

[svprdga]

Thanks @jjliu15

I have tried the solution proposed here and it works perfect. I don't know the implementation details that this user did but, but maybe here we have a possible solution to the problem.

[colbymaloy]

Sadly this doesnt do much for me. Using A stack with InteractiveViewer and a bottom aligned banner ad, my frame time is 1000ms on an IpadPro 12.9inch.

[blasten]

We have added a flag to the Flutter master channel that helps improve the performance.

It's not a perfect fix since the Ad may be a few frames behind the Flutter frame, but depending on the layout you use, it could be useful.

Please try it out, and let us know if the performance is improved.

To use this flag, set PlatformViewsService.synchronizeToNativeViewHierarchy(false). For example:

import 'package:flutter/services.dart';

void main() {
   PlatformViewsService.synchronizeToNativeViewHierarchy(false);
   runApp(MyApp());
}

[sleepingkit]

We have added a flag to the Flutter master channel that helps improve the performance.

It's not a perfect fix since the Ad may be a few frames behind the Flutter frame, but depending on the layout you use, it could be useful.

Please try it out, and let us know if the performance is improved.

To use this flag, set PlatformViewsService.synchronizeToNativeViewHierarchy(false). For example:

import 'package:flutter/services.dart';

void main() {
   PlatformViewsService.synchronizeToNativeViewHierarchy(false);
   runApp(MyApp());
}

I am in master branch but didn't see this method.
The method 'synchronizeToNativeViewHierarchy' isn't defined for the type 'PlatformViewsService'.

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, 2.4.0-5.0.pre.140, on macOS 11.4 20F71 darwin-arm, locale zh-HK)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
✗ 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
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.2)
[✓] VS Code (version 1.57.1)
[✓] Connected device (3 available)

! Doctor found issues in 1 category.

[blasten]

@sleepingkit You may need to run flutter upgrade after changing the channel.

https://github.com/flutter/flutter/blob/e82a69a95e8ea3a4617d6fb3f89b21ee227cb96b/packages/flutter/lib/src/services/platform_views.dart#L192

[svprdga]

Hi @blasten, I have performed some tests:

• Device: Samsung Galaxy A3 (2017)
• The tests consists in open an app with some widgets (and an inline add that renders in a few seconds) and then open and close a PopupMenuButton a few times
• google_mobile_ads: 0.13.2
• Running the app in profile mode

Stable branch

Master branch with synchronizeToNativeViewHierarchy to false

I think that the performance is a little bit worse in the master branch with this flag.

I have also performed the same test with this fork:

The author of this fork says here that he's using AndroidView, is there any reason why this solution is not applied to this plugin?

[blasten]

@svprdga that doesn’t seem right. It can’t possibly be more expensive, since there’s less work.

We also enable thread merging, which is the other thing that reduces performance.

Normally in a Flutter app, there is a raster thread and a platform/Android main UI thread. When we show an Android view, we are unable to continue with this thread configuration due to the dependencies and constraints. For example, you cannot add a view to an Android app from a different thread, doing so is prohibited.

Would you be willing to share your app, and I can profile it further?

[naamapps]

@blasten Why is everyone ignoring this fork #80 (comment)?
It is obviously a good solution to the performance issues.
Please, give a reason to why not merge it to the package and also why every contributor is ignoring it.
Thanks

[svprdga]

@blasten I can't share the app, but I have recreated the issue in this sample project. (*) Remember to set your app ID in AndroidManifest

• Device: Samsung Galaxy A3 (2017)
• Open/close the PopupMenuButton in the top bar
• google_mobile_ads: 0.13.2
• Running the app in profile mode

Stable branch

Master branch

I'd say that has improved a little bit, but far from being efficient. The UI I have created is extremely simple, with a more complex UI the performance is worse.

[blasten]

@naamapps we aren't. We used that approach initially, but hit technical limitations - hybrid composition workarounds those limitations.

Stay tuned for future improvements.

[naamapps]

@blasten It's great to hear that the development is active and you're trying to make the package better.
Another question I had and I opened an issue on it #313.
Is there a reason this package uses native views (which are expensive and have a lot of performance issues) instead of actually using flutter widgets?

[svprdga]

@blasten I am right now using the fork in many apps, around 10k users combined, without any issue. I can't say the same regarding the official package (I had to quickly replace it once I realized how bad the performance was).
Can you elaborate more on which are these technical limitations?
Thank you.

[bdlukaa]

Can you elaborate more on which are these technical limitations?

I think the reason is because AndroidView (virtual display) performs the click programmatically, which isn't allowed by admob.

[svprdga]

Thanks for the clarification @bdlukaa .

If this is the case, then we have to decide between:

• Comply with AdMob policy, use the official package, and provide a bad experience for those users who don't have the luck to have a powerful device; which will eventually lead to bad reviews, a drop in user acquisition, losing this mass of users and basically reduce the revenue income dramatically.
• Don't comply with the policy, use another plugin to provide the expected smooth experience, and then being exposed to sanctions or account suspensions.

Perfect.

[atrope]

Only to add to the discussion,
In our app we restrict some models(via Remote Config) because of degraded performance.

Those days I Was also thinking how to provide a better experience for the user and then those ideas came:

1.- Inject the JS code inside a Webview. This worked, but had the same "problem" as the current implementation because inappwebview uses Android View as well - https://inappwebview.dev/docs/in-app-webview/basic-usage/

2 - Make a Dart solution fetching the ad from Admanager and firing all the needed callbacks (This sound the best solution but comes with caveats that we can't bear like no Viewability Tracking, no Open Bidding, no AdX etc) - https://support.google.com/admanager/answer/2623168?hl=en
Maybe the ads team can help us and we can remake this plugin 100% in dart(at least for banners?)

If anyone thinks on a better solutions we can try to implement so we can check performance-wise if it would be ok :)

[naamapps]

@atrope a 100% dart solution is what we need I think.
Webviews and native views are not performant in flutter, so making actual widgets and having the logic in dart is what will make the package complete.

[bdlukaa]

@atrope recently I've been thinking of creating a startup called "Flutter Ads" or something like that, that provides ads and has a full-dart implementation, but I lost interest on it. I'll leave this idea here in case of someone wants to work on it.

[atrope]

Hey guys I made here something so we can check performance for the loaded banners using somewhat native requests..

DO NOT USE THIS TO REQUEST ADS in your Test/Prod App, it has none of the requirements for it.

Be sure to have House Simple ads so it can fetch something as it does not work for dynamic allocation nor adx.

it uses flutter_html to parse the html returned by dfp and dio for request.
so include it in your project:

  dio: ^4.0.0
  flutter_html:
    git:
      url: https://github.com/Sub6Resources/flutter_html

import 'dart:math';
import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:flutter_html/flutter_html.dart';

class BannerTest extends StatefulWidget {
  const BannerTest({
    Key? key,
    required this.adUnit,
    required this.sizes,
  }) : super(key: key);
  final String adUnit;
  final List<String> sizes;

  @override
  State<BannerTest> createState() => _BannerTestState();
}

class _BannerTestState extends State<BannerTest> {
  String? data;
  @override
  void initState() {
    super.initState();
    final params = {
      'iu': widget.adUnit,
      'sz': widget.sizes.join('%7c'),
      'c': Random().nextInt(429497629),
      'tile': Random().nextInt(429497629)
    }.entries.map((e) => '${e.key}=${e.value}').toList().join('&');

    final url = 'https://securepubads.g.doubleclick.net/gampad/adx?$params';

    final headers = {
      'User-Agent':
          'Mozilla/5.0 (Linux; Android 11) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.115 Mobile Safari/537.36',
    };
    Dio().get(url, options: Options(headers: headers)).then((value) {
      setState(() {
        data = value.data as String;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return data == null ? Container() : Html(data: data!);
  }
}

Call the banner anywhere with

BannerTest(
            adUnit: adUnit,
           sizes: const ['320x50', '320x100'],
         )

Send here the performance results :)

[jangruenwaldt]

Thanks for the clarification @bdlukaa .

If this is the case, then we have to decide between:

• Comply with AdMob policy, use the official package, and provide a bad experience for those users who don't have the luck to have a powerful device; which will eventually lead to bad reviews, a drop in user acquisition, losing this mass of users and basically reduce the revenue income dramatically.
• Don't comply with the policy, use another plugin to provide the expected smooth experience, and then being exposed to sanctions or account suspensions.

Perfect.

Wow, that sums it up so well. Ads are extremely important for devs. Please Flutter Team, put some focus on this!

This is quite a bottleneck for flutter applications. Many many people would really appreciate it. We can not realistically write this ad library ourselves.

[blasten]

Hey everyone,

I've been working on improvement perf of Android native views.

Please try the latest changes, and share any findings:

Steps

1. Switch to Flutter master channel

flutter channel master
flutter upgrade

2. Download the changes required for google_mobile_ads

git clone -b tx --single-branch https://github.com/googleads/googleads-mobile-flutter.git

3. Point the google_mobile_ads package to the location where you cloned the plugin

  google_mobile_ads:
    path: <path>/googleads-mobile-flutter/packages/google_mobile_ads

4. Rebuild the app with any flutter command.

[ilkanimal]

Hi @blasten,
With these last changes, banner placed in the ListView is getting impression before it appears on the screen.
This conflicts with Admob policy. (https://support.google.com/admob/answer/3269069?hl=en)
In the previous version, getting impression only when the first pixel of banner is seen on the screen.

By the way, at first glance I can say that the performance has noticeably improved. I'll be doing other production-level tests, but these improvements seem to live up to expectations.

Also, there is a scrolling issue with the WebView when banner and WebView are in the same screen. WebView's scrolling is not working. (WebView has custom GestureDetector) If you want to hear more, I can share details.

Example code for the impression issue

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: 15,
        itemBuilder: (context, index) {
          if (index != 0 && index % 5 == 0) {
            return const _BannerAd();
          }

          return Container(
            height: 200,
            color: Color((Random().nextDouble() * 0xFFFFFF).toInt())
                .withOpacity(1),
          );
        },
      ),
    );
  }
}

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

  @override
  _BannerAdState createState() => _BannerAdState();
}

class _BannerAdState extends State<_BannerAd>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  late BannerAd myBanner;

  @override
  void initState() {
    super.initState();
    myBanner = BannerAd(
      adUnitId: BannerAd.testAdUnitId,
      size: AdSize.banner,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (ad) => print('Ad loaded.'),
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
          print('Ad failed to load .');
        },
        onAdOpened: (ad) => print('Ad opened.'),
        onAdClosed: (ad) => print('Ad closed.'),
        onAdImpression: (ad) => print('Ad impression.'),
      ),
    )..load();
  }

  @override
  void dispose() {
    myBanner.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    super.build(context);

    return Container(
      width: myBanner.size.width.toDouble(),
      height: myBanner.size.height.toDouble(),
      margin: const EdgeInsets.all(20),
      alignment: Alignment.center,
      child: AdWidget(ad: myBanner),
    );
  }
}

[cmasdf]

Hi @blasten, thank you very much for your renewed efforts to improve the performance - as stated before, performance has already been improved noticeably.

Unfortunately some native ads are not showing up on older Android versions anymore even if they are loaded according to the callback. I am not sure if @ilkanimal is talking about the same problem.
I am receiving the onLoaded callback, but it looks like the texture is not loaded correctly, the widget just stays empty. The widgets are working correctly with the latest stable version of the plugin.
It works perfect on Android 12 emulator, but shows the described behaviour with emulated and native Android 10. Due to the bug described in #158, i could not test it on Android 11. Is there any known solution or a chance that you might be able to have a look into this?

[blasten]

@cmasdf yes. We are aware of some issues. flutter/flutter#98722
One fix is already in progress: flutter/engine#31698

[blasten]

With these last changes, banner placed in the ListView is getting impression before it appears on the screen.
This conflicts with Admob policy. (https://support.google.com/admob/answer/3269069?hl=en)
In the previous version, getting impression only when the first pixel of banner is seen on the screen.

That's good feedback. The current implementation triggers the create event when the ad is in the viewport.

@ilkanimal

[medst]

Fatal Exception: java.lang.LinkageError

Fatal Exception: java.lang.LinkageError: Method java.lang.Object com.google.android.gms.internal.ads.to3.zzb() overrides final method in class Lcom/google/android/gms/internal/ads/lo3; (declaration of 'com.google.android.gms.internal.ads.to3' appears in base.apk)
       at com.google.android.gms.internal.ads.zzcpq.zza(zzcpq.java:44)
       at com.google.android.gms.internal.ads.zzevk.zza(zzevk.java:365)
       at com.google.android.gms.internal.ads.zzeke.zzN(zzeke.java:58)
       at com.google.android.gms.internal.ads.zzeke.zze(zzeke.java:6)
       at com.google.android.gms.internal.ads.zzbhd.zzg(zzbhd.java:203)
       at com.google.android.gms.ads.BaseAdView.loadAd(BaseAdView.java:6)
       at io.flutter.plugins.googlemobileads.FlutterBannerAd.load(FlutterBannerAd.java:60)
       at io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.onMethodCall(GoogleMobileAdsPlugin.java:883)
       at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:17)
       at io.flutter.embedding.engine.dart.DartMessenger.invokeHandler(DartMessenger.java:18)
       at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0(DartMessenger.java:20)
       at io.flutter.embedding.engine.dart.DartMessenger.lambda$dispatchMessageToQueue$0$DartMessenger(DartMessenger.java)
       at io.flutter.embedding.engine.dart.-$$Lambda$DartMessenger$TsixYUB5E6FpKhMtCSQVHKE89gQ.run(-.java:12)
       at android.os.Handler.handleCallback(Handler.java:873)
       at android.os.Handler.dispatchMessage(Handler.java:99)
       at android.os.Looper.loop(Looper.java:193)
       at android.app.ActivityThread.main(ActivityThread.java:6740)
       at java.lang.reflect.Method.invoke(Method.java)
       at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
       at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)

[blasten]

@jjliu15 does the issue above look familiar?

[blasten]

This issue was fixed by flutter/flutter#100091.

Other than #532, no more changes are required in the googleads plugin.

[maheshj01]

Fatal Exception: java.lang.LinkageError

@medst that issue is being tracked here #471

[jeromeDms]

Switching to flutter beta channel largely improved performances in my case.

[nero-angela]

Similar performance issues occur in ios, are there any ongoing issues related to this?

[juliancoronado]

I see this issue is closed. Any estimate on when it will hit flutter stable?

[maheshj01]

@juliancoronado A new stable release occurs every quarter, a fix on master channel would roughly take 5-6 months to land on stable channel Please see https://github.com/flutter/flutter/wiki/Flutter-build-release-channels

[maheshj01]

@nero-angela, Please consider filing that as a separate issue.

[dayron9110]

With Flutter 3.0 the performance on iOS is so bad...

[ramonpaolo]

I have the same issue

Out of nowhere, when I open my app, the ad(banner) starts dropping FPS(from 59-60 to 28-29). The performance improves, when I remove the Banner from the Widget tree (the Banner is pinned to a bottomSheet)

I'm using Flutter verion 2.10.4 * channel stable with google_mobile_ads: 0.13.6

Edit: I'm using now:

google_mobile_ads: 
    git:
      url: https://github.com/SuaMusica/googleads-mobile-flutter.git
      path: packages/google_mobile_ads
      ref: feature/suamusica

and it looks like the performance issue is gone

[iqfareez]

@ramonpaolo Try upgrading to Flutter 3

[euphio]

The obvious solution to this appears to be implementing a native flutter (widget) ad container rather than relying on Platform Views.

Flutter platform views evidently aren’t performant enough at present to support native ads (flutter/flutter#107486 (comment)), particularly in a ListView which is one of the documented usages of displaying Native Advanced ads.