Banner adattivi incorporati

I banner adattivi sono la nuova generazione di annunci adattabili, in quanto massimizzano il rendimento ottimizzando le dimensioni dell'annuncio per ciascun dispositivo. Migliorare per quanto riguarda i banner a dimensioni fisse, che supportavano solo altezze fisse, mentre i banner adattivi consentono agli sviluppatori di specificare la larghezza dell'annuncio e di utilizzarla per determinare la dimensione ottimale dell'annuncio.

Per scegliere le dimensioni migliori per gli annunci, i banner adattivi in linea utilizzano l'altezza massima anziché l'altezza fissa. Questo si traduce in opportunità di miglioramento del rendimento.

Quando utilizzare i banner adattivi in linea

I banner adattivi in linea sono banner più grandi e più alti rispetto ai banner adattivi ancorati. Hanno un'altezza variabile e possono raggiungere l'altezza dello schermo del dispositivo.

Sono pensati per essere inseriti in contenuti scorrevoli, ad esempio:

Prerequisiti

Prima di iniziare

Quando implementi i banner adattivi nella tua app, tieni presente i seguenti aspetti:

  • Assicurati di utilizzare la versione più recente dell'SDK Google Mobile Ads e, se usi la mediazione, le versioni più recenti degli adattatori di mediazione.

  • Le dimensioni dei banner adattivi in linea sono progettate per funzionare al meglio quando si utilizza l'intera larghezza disponibile. Nella maggior parte dei casi, si tratterà dell'intera larghezza dello schermo del dispositivo in uso. Assicurati di prendere in considerazione le aree di sicurezza applicabili.

  • I metodi per ottenere le dimensioni dell'annuncio sono

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

  • Quando utilizzi le API dei banner adattivi incorporati, l'SDK Google Mobile Ads restituisce un AdSize con la larghezza specificata e un flag in linea. L'altezza è zero o maxHeight, a seconda dell'API in uso. L'altezza effettiva dell'annuncio diventa disponibile al momento della restituzione.

  • Un banner adattivo in linea è progettato per essere inserito in contenuti scorrevoli. Il banner può avere l'altezza dello schermo del dispositivo o essere limitato da un'altezza massima, a seconda dell'API.

Implementazione

Per implementare un semplice banner adattivo in linea, procedi nel seguente modo.

  1. Ottieni una dimensione dell'annuncio banner adattivo incorporato. Le dimensioni ottenute verranno utilizzate per richiedere il banner adattivo. Per ottenere le dimensioni dell'annuncio adattivo, assicurati di:
    1. Specifica la larghezza del dispositivo in uso in pixel indipendenti dalla densità oppure impostane una personalizzata se non vuoi utilizzare l'intera larghezza dello schermo. Puoi usare MediaQuery.of(context) per ottenere la larghezza dello schermo.
    2. Utilizza i metodi statici appropriati nella classe delle dimensioni dell'annuncio, ad esempio AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) per ottenere un oggetto AdSize adattivo incorporato per l'orientamento corrente.
    3. Per limitare l'altezza del banner, puoi utilizzare il metodo statico AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
  2. Crea un oggetto BannerAd con il tuo ID unità pubblicitaria, le dimensioni dell'annuncio adattivo e un oggetto richiesta di annuncio.
  3. Carica l'annuncio.
  4. Nel callback onAdLoaded, utilizza BannerAd.getPlatformAdSize() per ottenere le dimensioni aggiornate dell'annuncio della piattaforma e aggiornare l'altezza del contenitore AdWidget.

Esempio di codice

Ecco un widget di esempio che carica un banner adattivo in linea per adattarsi alla larghezza dello schermo, tenendo conto degli insiemi:

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;
  BannerAd? _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 = BannerAd(
      // TODO: replace this test ad unit with your own ad unit.
      adUnitId: 'ca-app-pub-3940256099942544/9214589741',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        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.
          BannerAd bannerAd = (ad as BannerAd);
          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();
  }
}