Modelli nativi in Dart

I modelli nativi sono visualizzazioni con completamento di codice per i tuoi annunci nativi, progettate per implementazione e facilità di modifica. Con i modelli nativi, il plug-in fornisce layout Android e iOS predefiniti e puoi personalizzare lo stile degli asset nativi con un'API Dart.

Questa guida illustra come utilizzare l'API Dart per stilizzare gli elementi sottostanti visualizzazioni della piattaforma e eseguire il rendering dell'annuncio.

Prerequisiti

  • Flutter 2.4.0 o versioni successive.

Effettua sempre test con annunci di prova

Durante la creazione e il test delle tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione attivi. Il modo più semplice per caricare gli annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova per gli annunci nativi:

Android

ca-app-pub-3940256099942544/2247696110

iOS

ca-app-pub-3940256099942544/3986624511

Le unità pubblicitarie di prova sono configurate in modo da restituire annunci di prova per ogni richiesta, puoi utilizzarle nelle tue app durante la programmazione, i test il debug: assicurati di sostituirli con i tuoi ID unità pubblicitaria prima e pubblicare l'app.

Carica annuncio

L'esempio seguente carica un annuncio nativo utilizzando il formato nativo delle dimensioni medium modello:

class NativeExampleState extends State<NativeExample> {
  NativeAd? nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            debugPrint('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            debugPrint('$NativeAd failed to load: $error');
            ad.dispose();
          },
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Consulta: NativeTemplateStyle e NativeTemplateTextStyle per visualizzare le opzioni di stile disponibili.

Personalizza annuncio

Quando personalizzi un annuncio nativo utilizzando modelli nativi, la configurazione dell'interfaccia utente saranno inclusi nel corso NativeTemplateStyle, consentendoti di applicare uno stile all'intero un annuncio nativo nel codice Dart.

Dimensioni del modello

I modelli di annunci nativi Flutter sono di due tipi: TemplateType.small e TemplateType.medium. Il modello piccolo è ideale per TableView o GridView, per gli annunci in-feed o ovunque sia necessaria una visualizzazione dell'annuncio rettangolare sottile. La di pagina media deve essere una visualizzazione di pagina da metà a tre quarti, ovvero ideale per le pagine di destinazione o iniziali.

Piccolo

Android
iOS
Medio

Android
iOS

Eventi di annunci nativi

Per ricevere notifiche su eventi correlati alle interazioni con gli annunci nativi, utilizza il listener proprietà dell'annuncio. Poi implementa NativeAdListener per ricevere i callback eventi di annuncio.

class NativeExampleState extends State<NativeExample> {
  NativeAd? _nativeAd;
  bool _nativeAdIsLoaded = false;

 // TODO: replace this test ad unit with your own ad unit.
 final String _adUnitId = Platform.isAndroid
      ? 'ca-app-pub-3940256099942544/2247696110'
      : 'ca-app-pub-3940256099942544/3986624511';

  /// Loads a native ad.
  void loadAd() {
    _nativeAd = NativeAd(
        adUnitId: _adUnitId,
        listener: NativeAdListener(
          onAdLoaded: (ad) {
            print('$NativeAd loaded.');
            setState(() {
              _nativeAdIsLoaded = true;
            });
          },
          onAdFailedToLoad: (ad, error) {
            // Dispose the ad here to free resources.
            print('$NativeAd failedToLoad: $error');
            ad.dispose();
          },
          // Called when a click is recorded for a NativeAd.
          onAdClicked: (ad) {},
          // Called when an impression occurs on the ad.
          onAdImpression: (ad) {},
          // Called when an ad removes an overlay that covers the screen.
          onAdClosed: (ad) {},
          // Called when an ad opens an overlay that covers the screen.
          onAdOpened: (ad) {},
          // For iOS only. Called before dismissing a full screen view
          onAdWillDismissScreen: (ad) {},
          // Called when an ad receives revenue value.
          onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
        ),
        request: const AdRequest(),
        // Styling
        nativeTemplateStyle: NativeTemplateStyle(
            // Required: Choose a template.
            templateType: TemplateType.medium,
            // Optional: Customize the ad's style.
            mainBackgroundColor: Colors.purple,
            cornerRadius: 10.0,
            callToActionTextStyle: NativeTemplateTextStyle(
                textColor: Colors.cyan,
                backgroundColor: Colors.red,
                style: NativeTemplateFontStyle.monospace,
                size: 16.0),
            primaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.red,
                backgroundColor: Colors.cyan,
                style: NativeTemplateFontStyle.italic,
                size: 16.0),
            secondaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.green,
                backgroundColor: Colors.black,
                style: NativeTemplateFontStyle.bold,
                size: 16.0),
            tertiaryTextStyle: NativeTemplateTextStyle(
                textColor: Colors.brown,
                backgroundColor: Colors.amber,
                style: NativeTemplateFontStyle.normal,
                size: 16.0)))
      ..load();
  }
}

Annuncio display

Per visualizzare NativeAd come widget, devi creare un'istanza di un AdWidget con un annuncio supportato dopo aver chiamato load(). Puoi creare il widget prima chiamata load(), ma è necessario chiamare load() prima di aggiungerlo al widget albero di Natale.

AdWidget eredita dalla classe Widget di Flutter e può essere utilizzato come qualsiasi altro widget. Su iOS, assicurati di posizionare il widget in un contenitore con un indirizzo e larghezza e altezza. In caso contrario, l'annuncio potrebbe non essere pubblicato.

// Small template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 90, // minimum recommended height
    maxWidth: 400,
    maxHeight: 200,
  ),
  child: AdWidget(ad: _nativeAd!),
);

// Medium template
final adContainer = ConstrainedBox(
  constraints: const BoxConstraints(
    minWidth: 320, // minimum recommended width
    minHeight: 320, // minimum recommended height
    maxWidth: 400,
    maxHeight: 400,
  ),
  child: AdWidget(ad: _nativeAd!),
);

Elimina annuncio

R NativeAd quando non è più necessario accedervi. La best practice per quando chiamare dispose() è dopo il valore AdWidget associato all'annuncio nativo viene rimossa dalla struttura dei widget e nella sezione AdListener.onAdFailedToLoad() di Google.

Passaggi successivi

Esempio completo su GitHub

Modelli nativi