Yerel gelişmiş

Yerel Reklam Görüntüle

Yerel bir reklam yüklendiğinde, Google Mobile Ads SDK'sı, ilgili reklam biçimi için dinleyiciyi çağırır. Uygulamanız, reklamın görüntülenmesinden sorumludur, ancak bunu hemen yapması gerekmez. Sistem tanımlı reklam biçimlerinin görüntülenmesini kolaylaştırmak için SDK, aşağıda açıklandığı gibi bazı yararlı kaynaklar sunar.

NativeAdView sınıfı

NativeAd biçimi için karşılık gelen NativeAdView sınıfı vardır. Bu sınıf, yayıncıların ViewGroup için kök olarak kullanması gereken bir NativeAd . Tek bir NativeAdView , tek bir yerel reklama karşılık gelir. Söz konusu reklamın varlıklarını (örneğin, ekran görüntüsü varlığını görüntüleyen ImageView ) görüntülemek için kullanılan her görünüm, NativeAdView nesnesinin bir alt öğesi olmalıdır.

Varlık görünümlerini görüntülemek için LinearLayout kullanan yerel bir reklamın görünüm hiyerarşisi şöyle görünebilir:

<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical"
    ... >
        <LinearLayout
        android:orientation="horizontal"
        ... >
          <ImageView
           android:id="@+id/ad_app_icon"
           ... />
          <TextView
            android:id="@+id/ad_headline"
            ... />
         </LinearLayout>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

İşte bir NativeAdView oluşturan ve onu bir NativeAdView ile dolduran bir NativeAd :

AdLoader.Builder builder = new AdLoader.Builder(this, "<your ad unit ID>")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with id fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

val builder = AdLoader.Builder(this, "<your ad unit ID>")
    .forNativeAd { nativeAd ->
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

Reklam görünümü sınıfları ayrıca her bir bağımsız varlık için kullanılan görünümü kaydetmek için kullanılan yöntemler ve NativeAd nesnesinin kendisini kaydetmek için kullanılan yöntemler sağlar. Görünümlerin bu şekilde kaydedilmesi, SDK'nın aşağıdakiler gibi görevleri otomatik olarak işlemesine olanak tanır:

• Tıklamaları kaydetme
• Gösterimleri kaydetme (ilk piksel ekranda göründüğünde)
• Yerel dolgu reklam öğeleri için AdChoices yer paylaşımı

Reklam Seçenekleri yer paylaşımı

SDK tarafından her reklam görünümüne bir Reklam Seçenekleri yer paylaşımı eklenir. Otomatik olarak eklenen Reklam Seçenekleri logosu için yerel reklam görünümünüzün tercih ettiğiniz köşesinde boşluk bırakın. Ayrıca, Reklam Seçenekleri katmanının kolayca görülebilmesi önemlidir, bu nedenle arka plan renklerini ve resimlerini uygun şekilde seçin. Yer paylaşımının görünümü ve işlevi hakkında daha fazla bilgi için Yerel reklamların gelişmiş alan açıklamalarına bakın.

reklam ilişkilendirme

Görünümün bir reklam olduğunu belirtmek için bir reklam özelliği göstermelisiniz. Politika yönergelerimizde daha fazla bilgi edinin.

Kod örneği

Yerel reklam görüntüleme adımları şunlardır:

1. NativeAdView sınıfının bir örneğini oluşturun.
2. Görüntülenecek her bir reklam öğesi için:
   1. Öğe görünümünü, reklam nesnesindeki öğeyle doldurun.
   2. Varlık görünümünü ViewGroup sınıfıyla kaydedin.
3. Yerel reklam düzeniniz büyük bir medya varlığı içeriyorsa MediaView kaydedin.
4. Reklam nesnesini ViewGroup sınıfına kaydedin.

NativeAd görüntüleyen örnek bir işlev:

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeAdView adView = (NativeAdView) inflater
            .inflate(R.layout.my_ad_layout, parent);

    // Locate the view that will hold the headline, set its text, and call the
    // NativeAdView's setHeadlineView method to register it.
    TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
    headlineView.setText(ad.getHeadline());
    adView.setHeadlineView(headlineView);

    ...
    // Repeat the above process for the other assets in the NativeAd
    // using additional view objects (Buttons, ImageViews, etc).
    ...

    // If the app is using a MediaView, it should be
    // instantiated and passed to setMediaView. This view is a little different
    // in that the asset is populated automatically, so there's one less step.
    MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad);

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews();

    // Place the AdView into the parent.
    parent.addView(adView);
}

fun displayNativeAd(parent: ViewGroup, ad: NativeAd) {

    // Inflate a layout and add it to the parent ViewGroup.
    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

    // Locate the view that will hold the headline, set its text, and use the
    // NativeAdView's headlineView property to register it.
    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView

    ...
    // Repeat the above process for the other assets in the NativeAd using
    // additional view objects (Buttons, ImageViews, etc).
    ...

    val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    adView.mediaView = mediaView

    // Call the NativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad)

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews()

    // Place the AdView into the parent.
    parent.addView(adView)
}

Bireysel görevlere bir göz atalım:

Düzeni şişir

LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.my_ad_layout, parent);

val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

Bu örnekte, yerel bir reklamı görüntülemek için görünümler içeren bir XML düzenini şişiriyoruz ve ardından NativeAdView bir referans buluyoruz. Parçanızda veya etkinliğinizde varsa, mevcut bir NativeAdView yeniden kullanabileceğinizi ve hatta bir düzen dosyası kullanmadan dinamik olarak bir örnek oluşturabileceğinizi unutmayın.

Varlık görünümlerini doldurun ve kaydedin

Bu örnek kod, başlığı görüntülemek için kullanılan görünümü bulur, reklam nesnesi tarafından sağlanan dize varlığını kullanarak metnini ayarlar ve onu NativeAdView nesnesine kaydeder:

TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);

val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView

Görünümü bulma, değerini ayarlama ve onu reklam görüntüleme sınıfına kaydetme işlemi, uygulamanın göstereceği yerel reklam nesnesi tarafından sağlanan varlıkların her biri için tekrarlanmalıdır.

Tıklama işleme

Reklam görüntüleme varlıklarına yapılan tıklamalar, önceki bölümde tartışıldığı gibi varlık görünümlerini doğru bir şekilde doldurup kaydettiğiniz sürece SDK tarafından işlenir.

Tıklama olaylarını gözlemlemek için bir reklam dinleyicisinin kullanıldığı bir örnek:

AdLoader adLoader = new AdLoader.Builder(context, "ca-app-pub-3940256099942544/2247696110")
    ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

MediaView'ı kaydedin

MediaView , video veya resim gibi ana medya varlığını görüntülemek için tasarlanmış özel bir View .

MediaView , bir XML düzeninde tanımlanabilir veya dinamik olarak oluşturulabilir. Tıpkı diğer varlık görünümlerinde olduğu gibi NativeAdView görünüm hiyerarşisi içine yerleştirilmelidir. MediaView kullanan uygulamalar bunu NativeAdView şu şekilde kaydetmelidir:

MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)

Tüm varlık görünümlerinde olduğu gibi, medya görünümünün içeriğinin doldurulması gerekir. Bu, bir MediaView öğesine aktarılabilen medya içeriğini almak için getMediaContent() yöntemi kullanılarak yapılır. İşte medya görünümü için medya içeriğini ayarlayan bir kod parçacığı:

mediaView.setMediaContent(nativeAd.getMediaContent());

mediaView.mediaContent = nativeAd.mediaContent

ImageScaleType'ı Ayarlama

MediaView sınıfı, görüntüleri görüntülerken bir ImageScaleType özelliğine sahiptir. MediaView bir görüntünün nasıl ölçeklendirileceğini değiştirmek istiyorsanız, MediaView öğesinin setImageScaleType() yöntemini kullanarak karşılık gelen ImageView.ScaleType ayarlayın.

Örneğin, bir resim görüntülendiğinde (reklamda video yokken) MediaView doldurmak için:

mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

GitHub Örneği

GitHub depomuz, hem Java hem de Kotlin'de yazılmışYerel Gelişmiş reklamlar için eksiksiz uygulamalara sahiptir.

Medya içeriği

MediaContent sınıfı, MediaView sınıfı kullanılarak görüntülenen yerel reklamın medya içeriğiyle ilgili verileri tutar. MediaView mediaContent özelliği bir MediaContent örneğiyle ayarlandığında:

• Bir video varlığı varsa, arabelleğe alınır ve MediaView içinde oynatılmaya başlar. hasVideoContent() kontrol ederek bir video varlığının mevcut olup olmadığını anlayabilirsiniz.
• Reklam bir video öğesi içermiyorsa, mainImage öğesi indirilir ve bunun yerine MediaView içine yerleştirilir.

Yerel reklam nesnesini kaydedin

Bu son adım, yerel reklam nesnesini, onu görüntülemekten sorumlu olan görünüme kaydeder:

adView.setNativeAd(ad);

adView.setNativeAd(ad)

Reklamı yok et

Yerel reklamınızı göstermeyi bitirdiğinizde, reklamın uygun şekilde çöp toplanması için onu yok etmelisiniz.

nativeAd.destroy();

nativeAd.destroy()