Native ad not populating in scroll view until user scroll

[malandr2]

[REQUIRED] Step 1: Describe your environment

Plugin Version

3.0.0

[REQUIRED] Step 2: Describe the problem

Seeing an issue with a native ad appearing in app only after scrolling (and the ad is loaded correctly).

Steps to Reproduce

Sample application

To reproduce:

1. tap 3 dots button in top right corner
2. tap 'native template'

If issue didn't reproduce then repeat. It doesn't reproduce every time. It takes me 5 minutes to reproduce that issue, but it may take more or less time.

Expected results:

I expected the content of the native ad to appear on screen once it has been loaded successfully.

Actual results:

Native ad was "blank" until I started to scroll

Logs

Analyzing example...                                                    

   info • Unused import: 'constants.dart' •
          lib/native_template_example.dart:19:8 • unused_import

1 issue found. (ran in 1.1s)

[✓] Flutter (Channel stable, 3.7.12, on macOS 13.4.1 22F82 darwin-arm64, locale
    en)
    • Flutter version 3.7.12 on channel stable at
      /Users/jmalandruccolo/Documents/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4d9e56e694 (3 months ago), 2023-04-17 21:47:46 -0400
    • Engine revision 1a65d409c7
    • Dart version 2.19.6
    • DevTools version 2.20.1

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    • Android SDK at /Users/jmalandruccolo/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 14.2)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    • CocoaPods version 1.12.1

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

[!] Android Studio
    • Android Studio at /Applications/Android Studio with Blaze
      Beta.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
    ✗ Unable to find bundled Java version.
    • Try updating or re-installing Android Studio.

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio with Blaze.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
      17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.80.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension can be installed from:
      🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[✓] Connected device (4 available)
    • sdk gphone64 arm64 (mobile) • emulator-5554                        •
      android-arm64  • Android 12 (API 32) (emulator)
    • iPhone 14 Pro (mobile)      • 51E0B954-0AF4-4FCF-A358-2FD3680501DA • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)             • macos                                •
      darwin-arm64   • macOS 13.4.1 22F82 darwin-arm64
    • Chrome (web)                • chrome                               •
      web-javascript • Google Chrome 114.0.5735.198

[✓] HTTP Host Availability
    • All required HTTP hosts are available

[Wes1324]

Possible duplicate of #875?

[mulderpf]

Is this a generic implementation issue or does this work depending on implementation? I need to put native ads into my app, but don't want to get started if it means I cannot actually push it to production.

[Wes1324]

@mulderpf it does work, it's just that the ads take a long time to load and render on screen. This can look janky, especially if the ads are integrated into a scrollable list between widgets. Also, if the ads appear within a scrollable list, sometimes the user has already scrolled past the ad by the time the ad has loaded and rendered.

[malandr2]

@Wes1324 this has been escalated to the engineering team and I will respond here as soon as I have an update. Thanks.

[Quichaco]

I have the same problem . the ad takes 2-3 seconds to display when the user scrolls.

[malandr2]

@Knackynouille do you have the same problem using the sample app and following the steps in the original post?

[Wes1324]

I noticed Filip Hráček talking about this very issue at 17:34 in his video about the Flutter casual games toolkit. It seems like he got around it by preloading the ads.

I'm not doing much on ads at the moment and won't have time to look into this for a while, but it feels like the google_mobile_ads package should handle this preloading if possible.

[malandr2]

@Wes1324 good find but I think there are two issues being described.

The issue that I've noticed: The ad loads successfully but the view is blank until the user starts to scroll.

The issue the video seems to be describing is just latency during ad loading. That being said, preloading ads is a valid strategy.

We are always exploring SDK-driven pre-loaded ads in our iOS/Android SDKs but nothing concrete at this time. For now, you can use ad load calls to build up a cache of preloaded ads before you intend to show them, so that ads can be shown with zero latency when needed. However; since ads expire after an hour, you should clear this cache and reload with new ads every hour.