Adaptive Inline-Banner für scrollende Banner verwenden

Plattform auswählen: Android Neu Android iOS Flutter

Adaptive Banner sind die nächste Generation responsiver Anzeigen. Sie maximieren die Leistung, indem die Anzeigengröße für jedes Gerät optimiert wird. Anders als bei Bannern mit fester Größe, die eine feste Höhe haben, können Entwickler bei adaptiven Bannern die Anzeigenbreite festlegen. Auf dieser Grundlage wird dann die optimale Anzeigengröße ermittelt.

Dazu werden bei adaptiven Inline-Bannern anstelle von festen Höhen die maximal zur Verfügung stehenden Höhen verwendet. Das bietet Möglichkeiten für eine bessere Leistung.

Wann sollten adaptive Inline-Banner verwendet werden?

Adaptive Inline-Banner sind größer und höher als adaptive Ankerbanner. Sie haben eine variable Höhe und können so hoch wie der Gerätebildschirm sein.

Sie sind für die Platzierung in scrollbarem Content vorgesehen, z. B.:

Vorbereitung

Hinweis

Beachten Sie bei der Implementierung adaptiver Banner in Ihrer App die folgenden Punkte:

  • Verwenden Sie die aktuelle Version von Google Mobile Ads Flutter Plugin und, falls Sie Mediation verwenden, die aktuellen Versionen Ihrer Mediationsadapter.

  • Die Größen adaptiver Inline-Banner sind so konzipiert, dass sie am besten funktionieren, wenn die gesamte verfügbare Breite genutzt wird. In den meisten Fällen entspricht dies der vollen Breite des Bildschirms des verwendeten Geräts. Berücksichtigen Sie dabei die relevanten sicheren Bereiche.

  • Möglicherweise müssen Sie Werbebuchungen aktualisieren oder neue erstellen, um adaptive Größen zu verwenden. Weitere Informationen.

  • Die Methoden zum Abrufen der Anzeigengröße sind:

    • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
    • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
    • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
    • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)

  • Wenn Sie die APIs für adaptive Inline-Banner verwenden, Google Mobile Ads Flutter Plugin gibt AdSize mit der angegebenen Breite und einem Inline-Flag zurück. Die Höhe ist je nach verwendeter API entweder null oder maxHeight. Die tatsächliche Höhe der Anzeige wird zurückgegeben.

  • Ein adaptives Inline-Banner ist für die Platzierung in scrollbarem Content vorgesehen. Je nach API kann das Banner so hoch wie der Gerätebildschirm sein oder durch eine maximale Höhe begrenzt werden.

Implementierung

Folgen Sie der Anleitung unten, um ein einfaches adaptives Inline-Banner zu implementieren.

  1. Rufen Sie die Anzeigengröße für ein adaptives Inline-Banner ab. Die abgerufene Größe wird verwendet, um das adaptive Banner anzufordern. Beachten Sie dabei Folgendes:
    1. Ermitteln Sie die Breite des verwendeten Geräts in dichteunabhängigen Pixeln oder legen Sie die Breite selbst fest, wenn Sie nicht die gesamte Breite des Bildschirms nutzen möchten. Sie können MediaQuery.of(context) verwenden, um die Bildschirmbreite abzurufen.
    2. Verwenden Sie in Bezug auf die Klasse der Anzeigengröße geeignete statistische Methoden, wie z. B. AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) um ein adaptives AdSize Objekt für die aktuelle Ausrichtung zu erhalten.
    3. Wenn Sie die Höhe des Banners begrenzen möchten, können Sie die statische Methode AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight) verwenden.
  2. Erstellen Sie ein AdManagerBannerAd-Objekt mit Ihrer Anzeigenblock‑ID, der adaptiven Anzeigengröße und einem Anzeigenanfrageobjekt.
  3. Laden Sie die Anzeige.
  4. Rufen Sie im onAdLoaded-Callback mit AdManagerBannerAd.getPlatformAdSize() die aktualisierte Anzeigengröße der Plattform ab und aktualisieren Sie die Höhe des AdWidget-Containers.

Codebeispiel

Hier ein Beispiel für ein Widget, das ein adaptives Inline-Banner lädt, das an die Breite des Bildschirms angepasst wird und dabei die Einzüge berücksichtigt:

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;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

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

  @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(
      // TODO: replace with your own ad unit.
      adUnitId: '/21775744923/example/adaptive-banner',
      size: 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();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    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();
      },
    );
  }

  @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: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

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