Yerel biçim

Koleksiyonlar ile düzeninizi koruyun İçeriği tercihlerinize göre kaydedin ve kategorilere ayırın.

Yerel reklamlar, platforma özgü kullanıcı arayüzü bileşenleri aracılığıyla kullanıcılara sunulan reklam öğeleridir. Bu reklamlar, düzenlerinizi oluştururken kullandığınız görünüm türleriyle aynı şekilde gösterilir ve içinde yaşadıkları kullanıcı deneyiminin görsel tasarımına uyacak şekilde biçimlendirilmiş olabilir. Kodlama açısından bu, yerel reklam yüklendiğinde uygulamanızın öğelerini içeren bir NativeAd nesnesi aldığı ve uygulamanın (Google Mobile Ads SDK'sı yerine) bunları göstermekten sorumlu olduğu anlamına gelir.

Genel olarak belirtmek gerekirse yerel reklamları başarıyla uygulamanın iki aşaması vardır: SDK aracılığıyla bir reklam yüklemek ve uygulamanızda reklam içeriğini görüntülemek. Bu kılavuz, yerel reklamları yüklemek için SDK'yı kullanmayla ilgilidir.

Platform kurulumu

Yerel reklamlar, kullanıcılara platformda yerel olan kullanıcı arayüzü bileşenleri (örneğin, Android'de View veya iOS'te UIView) aracılığıyla sunulur.

Yerel reklamlar bir platforma özgü kullanıcı arayüzü bileşenleri gerektirdiğinden bu özellik, Android ve iOS için ek kurulum gerektirir:

Android

Google Mobile Ads eklentisinin Android uygulaması, NativeAdFactory sınıfının uygulandığı bir sınıf gerektirir. Android projenizden bu API'ye referans vermek için settings.gradle cihazınıza aşağıdaki satırları ekleyin:

def flutterProjectRoot = rootProject.projectDir.parentFile.toPath()
def plugins = new Properties()
def pluginsFile = new File(flutterProjectRoot.toFile(), '.flutter-plugins')
if (pluginsFile.exists()) {
    pluginsFile.withInputStream { stream -> plugins.load(stream) }
}

plugins.each { name, path ->
    def pluginDirectory = flutterProjectRoot.resolve(path).resolve('android').toFile()
    include ":$name"
    project(":$name").projectDir = pluginDirectory
}

NativeAdFactory, NativeAd ve özel seçenekleri alıp NativeAdView döndüren bir yöntem içerir. Uygulamanızda görüntülenen NativeAdView

Bunu MainActivity.java içine uygulayabilir veya MainActivity.java ile aynı dizinde ayrı bir sınıf oluşturabilirsiniz:

package my.app.path;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

Her NativeAdFactory bir factoryId benzersiz String tanımlayıcısıyla kaydedilmelidir. MainActivity.configureFlutterEngine(FlutterEngine) uygulamasında bir NativeAdFactory uygulanabilir ve uygulamanız tarafından kullanılan her benzersiz yerel reklam düzeni için kaydedilebilir veya tek bir tüm düzenler tarafından işlenebilir.

Ayrıca NativeAdFactory uygulamaya ekleme ile derleme yaparken NativeAdFactory kaydının da iptal edilmesi gerekir.

MainActivity.java aşağıdakine benzer bir görünümde olacaktır:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
   super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

Dart'ta NativeAd oluşturulurken factoryId, fabrika ayarlarına eklemek için kullanılan GoogleMobileAdsPlugin ile eşleşmelidir. Yukarıdaki kod snippet'inde adFactoryExample, factoryId öğesinin adıdır. NativeAdFactory örneğini aşağıda görebilirsiniz:

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

/**
 * my_native_ad.xml can be found at
 * //github.com/googleads/googleads-mobile-flutter/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
    final TextView headlineView = adView.findViewById(R.id.ad_headline);
    final TextView bodyView = adView.findViewById(R.id.ad_body);

    headlineView.setText(nativeAd.getHeadline());
    bodyView.setText(nativeAd.getBody());

    adView.setBackgroundColor(Color.YELLOW);

    adView.setNativeAd(nativeAd);
    adView.setBodyView(bodyView);
    adView.setHeadlineView(headlineView);
    return adView;
  }
}

iOS

Google Mobile Ads eklentisinin iOS uygulaması, FLTNativeAdFactory özelliğini uygulayan bir sınıf gerektirir. FLTNativeAdFactory, GADNativeAd ve özel seçenekleri alıp GADNativeAdView değeri döndüren bir yöntem içerir. Uygulamanızda görünen GADNativeAdView.

FLTNativeAdFactory protokolü AppDelegate tarafından uygulanabilir veya ayrı bir sınıf oluşturulabilir:

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

Her FLTNativeAdFactory, registerNativeAdFactory:factoryId:nativeAdFactory: için bir factoryId (benzersiz String tanımlayıcısı) ile kaydedilmelidir.

Uygulamanız tarafından kullanılan her benzersiz yerel reklam düzeni için bir FLTNativeAdFactory uygulanabilir ve kaydedilebilir. Tüm düzenler tek bir düzenler tarafından işlenebilir. Bu işlem, FLTGoogleMobileAdsPlugin.h içe aktarıldıktan ve bir FlutterPluginRegistry (fabrika için benzersiz bir tanımlayıcı) ile fabrikanın kendisinin registerNativeAdFactory:factoryId:nativeAdFactory: ile çağrılmasıyla gerçekleştirilir. Fabrika, GeneratedPluginRegistrant registerWithRegistry:self]; çağrıldıktan sonra da eklenmelidir.

AppDelegate.m içinde yapılmışsa, kod şu şekilde görünmelidir:

#import "FLTGoogleMobileAdsPlugin.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Dart'ta NativeAd oluşturulurken factoryID, fabrika ayarlarına eklemek için kullanılan FLTGoogleMobileAdsPlugin ile eşleşmelidir. Yukarıdaki kod snippet'inde adFactoryExample, factoryID öğesinin adıdır. FLTNativeAdFactory örneğini aşağıda görebilirsiniz:

/**
 * The example NativeAdView.xib can be found at
 * //github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create and place ad in view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  adView.nativeAd = nativeAd;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;

  return adView;
}
@end

Her zaman test reklamlarıyla test yapın

Uygulamalarınızı oluştururken ve test ederken yayında, üretim amaçlı reklamlar yerine test reklamları kullandığınızdan emin olun. Aksi takdirde, hesabınız askıya alınabilir.

Test reklamlarını yüklemenin en kolay yolu, yerel reklamlar için özel test reklam birimi kimliğimizi kullanmaktır:

Test reklam birimleri, her istek için test reklamları döndürecek şekilde yapılandırıldı. Bu birimleri kodlama, test etme ve hata ayıklama sırasında kendi uygulamalarınızda kullanabilirsiniz. Uygulamanızı yayınlamadan önce bunları kendi reklam birimi kimliklerinizle değiştirdiğinizden emin olun.

Reklamı örnekle

NativeAd için adUnitId, factoryId, AdRequest ve NativeAdListener gereklidir.Aşağıdaki örnek, yerel reklamı somutlaştırır:

final NativeAd myNative = NativeAd(
  adUnitId: '<ad unit id>',
  factoryId: 'adFactoryExample',
  request: AdRequest(),
  listener: NativeAdListener(),
);

Fabrika Kimliği

factoryId, fabrika ayarlarına Android ve GoogleMobileAdsPlugin üzerinde ekleme yapmak için kullanılanla ve iOS'teki FLTGoogleMobileAdsPlugin ile eşleşmelidir. Aynı factoryId, her iki platformda da kullanılabilir veya her birinin kendi platformu olabilir.

Yerel reklam etkinlikleri

NativeAdListener kullanarak, örneğin bir reklamın yüklenmesi gibi yaşam döngüsü olaylarını dinleyebilirsiniz. Aşağıdaki örnekte her yöntem uygulanır ve konsola bir mesaj kaydedilir:

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

Reklamı yükle

NativeAd örneklendirildikten sonra ekranda gösterilebilmesi için load() çağrılmalıdır.

myNative.load();

Görüntülü reklam

Widget olarak bir NativeAd göstermek için, load() çağrısından sonra, desteklenen bir reklamla bir AdWidget örneği oluşturmanız gerekir. Widget'ı, load() işlevini çağırmadan oluşturabilirsiniz, ancak load() widget'a eklenmeden önce çağrılmalıdır.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget, Flutter's Widget sınıfından devralınır ve diğer tüm widget'lar gibi kullanılabilir. iOS'ta, widget'ı belirtilen genişlik ve yüksekliğe sahip bir kapsayıcıya yerleştirdiğinizden emin olun. Aksi takdirde, reklamınız gösterilmeyebilir.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

Bir reklam load() tarafından çağrıldıktan sonra, reklama artık ihtiyaç duyulmadığında dispose() numaralı telefonu aramalıdır. dispose() işlevinin ne zaman çağrılacağıyla ilgili en iyi uygulama, AdWidget widget ağacından kaldırıldıktan veya AdListener.onAdFailedToLoad geri çağırmasından sonra yapılır.

İşte oldu. Uygulamanız artık yerel reklam göstermeye hazır.

Sonraki adımlar