Dart'taki yerel şablonlar

Yerel şablonlar, yerel reklamlarınız için kod tamamlamalı görünümlerdir ve hızlı sonuçlar vermek için tasarlanmıştır. ve kolay değişiklik yapabilirsiniz. Eklenti, yerel şablonlar sayesinde sizin için önceden oluşturulmuş Android ve iOS düzenlerini kullanabilir ve yerel öğeler için Dart API'si kullanmanıza olanak tanır.

Bu kılavuzda, temel bilgileri şekillendirmek için Dart API'nin nasıl kullanılacağı ve reklamı görüntülemek için de kullanılabilir.

Ön koşullar

  • Flutter 2.4.0 veya sonraki sürümler.

Her zaman test reklamlarıyla test etme

Uygulamalarınızı oluştururken ve test ederken, uygulamalarınızın yanı sıra üretim reklamlarıdır. Test reklamlarını yüklemenin en kolay yolu, doğal reklamlar için test reklam birimi kimliği:

  • /6499/example/native

Test reklam birimleri her istek için test reklamları döndürecek şekilde yapılandırılır. Bu yüzden, kod yazma, test ve tamamlama aşamalarında bunları kendi uygulamalarınızda hata ayıklamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden en iyi uygulamaları paylaşacağız.

Reklam yükle

Aşağıdaki örnekte, medium boyutunda yerel reklam kullanılarak bir yerel reklam yükleniyor şablon:

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

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/6499/example/native';

  /// 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 AdManagerAdRequest(),
        // 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();
  }
}

Görüntüleyin NativeTemplateStyle ve NativeTemplateTextStyle seçeneğini tıklayın.

Reklamı özelleştir

Yerel şablonları kullanarak yerel reklamları özelleştirirken reklamınızın kullanıcı arayüzü yapılandırması NativeTemplateStyle sınıfında yayınlanacak, böylece tüm yerel reklam hakkında daha fazla bilgi edinin.

Şablon boyutları

Flutter doğal reklam şablonları iki türde sunulur: TemplateType.small ve TemplateType.medium. Küçük şablon, TableView veya GridView, feed içi reklamlar için veya ince bir dikdörtgen reklam görünümüne ihtiyaç duyduğunuz her yerde. İlgili içeriği oluşturmak için kullanılan orta boy şablonun, sayfa görüntülemenin yarım veya üç çeyreklik bir dilimde olması amaçlanmıştır. açılış veya başlangıç sayfaları için idealdir.

Küçük

Android
iOS
Aracı

Android
iOS

Yerel reklam etkinlikleri

Doğal reklam etkileşimleriyle ilgili etkinlikler hakkında bildirim almak için şunu kullanın: listener özelliğini kullanın. Daha sonra NativeAdListener almak için bu seçeneği belirleyin.

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

 // TODO: replace this test ad unit with your own ad unit.
 final _adUnitId = '/6499/example/native';

  /// 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 AdManagerAdRequest(),
        // 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();
  }
}

Görüntülü reklam

NativeAd öğesini widget olarak görüntülemek için bir örnek göstermeniz gerekir AdWidget load() çağırdıktan sonra desteklenen bir reklamla. Widget'ı, oluşturma işleminden önce load() aranıyor, ancak widget'a eklenmeden önce load() çağrılmalıdır ağacı.

AdWidget, Flutter'ın Widget sınıfından devralır ve başkaları gibi kullanılabilir widget'ını tıklayın. iOS'te, widget'ı belirtilen bir kapsayıcıya yerleştirdiğinizden emin olun. ve yüksekliği belirtmelisiniz. Aksi takdirde, reklamınız gösterilmeyebilir.

// 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!),
);

Reklamı iptal et

CEVAP NativeAd artık erişim gerekli olmadığında imha edilmelidir. En iyi uygulama, dispose(), yerel reklamla ilişkilendirilmiş AdWidget öğesinden sonra ne zaman çağrılır? öğesi, widget ağacından ve AdListener.onAdFailedToLoad() bölümünden kaldırılır geri arama.