Reklam düzenlerini doğal şablonlarla tasarlama

Platform seçin: iOS Flutter Android (Eski)

Doğal Şablonları İndirme

Doğal reklamları kullanarak reklamlarınızı özelleştirebilir ve daha iyi bir kullanıcı deneyimi sunabilirsiniz. Daha iyi kullanıcı deneyimleri, etkileşimi artırabilir ve genel veriminizi iyileştirebilir.

Doğal reklamlardan en iyi şekilde yararlanmak için reklam düzenlerinizi uygulamanızın doğal bir uzantısı gibi hissettirecek şekilde tasarlamanız önemlidir. Başlamanıza yardımcı olmak için doğal şablonlar oluşturduk.

Doğal şablonlar, doğal reklamlarınız için kod açısından eksiksiz görünümlerdir. Hızlı uygulama ve kolay değişiklik için tasarlanmıştır. Doğal Şablonlar sayesinde ilk doğal reklamınızı yalnızca birkaç dakika içinde uygulayabilir ve çok fazla kod kullanmadan görünüm ve tarzını hızlıca özelleştirebilirsiniz. Bu şablonları, haber feed'inde kullanılan bir geri dönüşüm görünümü, iletişim kutusu veya uygulamanızın başka bir yeri gibi istediğiniz yere yerleştirebilirsiniz.

Doğal şablonlarımız Android Studio modülü olarak sunulduğundan bunları projenize dahil etmek ve dilediğiniz gibi kullanmak kolaydır.

Şablon boyutları

İki şablon vardır: küçük ve orta. Her ikisi de TemplateView sınıfını kullanır ve sabit bir en boy oranına sahiptir. Ebeveyn görünümlerinin genişliğini dolduracak şekilde ölçeklenirler.

Küçük şablon

@layout/gnt_small_template_view

Küçük şablon, geri dönüşüm görünümleri veya uzun dikdörtgen reklam görünümüne ihtiyaç duyduğunuz her an için idealdir. Örneğin, feed içi reklamlar için kullanabilirsiniz.

Orta şablon

@layout/gnt_medium_template_view

Orta şablon, sayfanın yarısı ila dörtte üçü kadar bir görünüm için tasarlanmıştır ancak feed'lerde de kullanılabilir. Açılış sayfaları veya karşılama sayfaları için uygundur.

Yerleşimle ilgili denemeler yapabilirsiniz. Elbette kaynak kodunu ve XML dosyalarını ihtiyaçlarınıza göre de değiştirebilirsiniz.

Doğal reklam şablonlarını yükleme

Doğal reklam şablonlarını yüklemek için zip dosyasını indirmeniz (GitHub'daki Clone or download seçeneğini kullanarak) ve modülü mevcut Android Studio projenize aktarmanız yeterlidir.

  1. File > New > Import Module'ü (Dosya > Yeni > Modülü İçe Aktar) seçin.

  2. nativetemplates klasörünü seçin.

    doğal şablonu içe aktarma

  3. Uygulama düzeyindeki build.gradle dosyanıza aşağıdaki satırı ekleyin:

    dependencies {
        ...
        implementation project(':nativetemplates')
        ...
}

Doğal reklam şablonlarını kullanma

Şablonu, diğer görünüm grupları gibi herhangi bir düzen XML dosyasında kullanabilirsiniz.

düzene şablon ekle

Şablonları kullanmak iki adımlı bir işlemdir:

  1. Öncelikle şablonu düzeninize eklemeniz gerekir.

    <LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity"
   tools:showIn="@layout/activity_main" >

<!--  This is your template view -->
<com.google.android.ads.nativetemplates.TemplateView
   android:id="@+id/my_template"
   <!-- this attribute determines which template is used. The other option is
    @layout/gnt_medium_template_view -->
   app:gnt_template_type="@layout/gnt_small_template_view"
   android:layout_width="match_parent"
   android:layout_height="match_parent" />

...
</LinearLayout>

  2. Ardından, şablonunuza yüklendiğinde doğal reklamınızı vermeniz gerekir:

    MobileAds.initialize(this);
AdLoader adLoader = new AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            NativeTemplateStyle styles = new
              NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();
            TemplateView template = findViewById(R.id.my_template);
            template.setStyles(styles);
            template.setNativeAd(nativeAd);
        }
     })
     .build();

adLoader.loadAd(new AdManagerAdRequest.Builder().build());

Stil sözlüğü anahtarları

Şablonunuzu iki şekilde tasarlayabilirsiniz: geleneksel düzen XML'ini kullanarak ve NativeTemplateStyle.Builder nesnemizi kullanarak. Yukarıdaki kod örneğinde, ana arka plan rengini ayarlamak için NativeTemplateStyle.Builder nesnesinin nasıl kullanılacağı gösterilmektedir ancak başka seçenekler de vardır. Kullanabileceğiniz tüm oluşturucu yöntemlerini burada görebilirsiniz. Oluşturucu, tüm XML düzen stillerini geçersiz kılan bir NativeTemplateStyle nesnesi döndürür. gnt_small_template.xml ve gnt_medium_template.xml XML düzenleri, zaten bildiğiniz Android stil parametrelerini kullanır.

Doğal şablon stili için oluşturucu yöntemleri
withCallToActionTextTypeface Typeface callToActionTextTypeface

Harekete geçirici mesajın yazı karakteri.
withCallToActionTextSize float callToActionTextSize

Harekete geçirici mesaj metninin boyutu.
withCallToActionTypefaceColor int callToActionTypefaceColor

Harekete geçirici mesaj metninin rengi.
withCallToActionBackgroundColor ColorDrawable callToActionBackgroundColor

Harekete geçirici mesajın arka plan rengi.
withPrimaryTextTypeface Typeface primaryTextTypeface

İlk metin satırının yazı karakteri.
withPrimaryTextSize float primaryTextSize

Metnin ilk satırının boyutu.
withPrimaryTextTypefaceColor int primaryTextTypefaceColor

Metnin ilk satırının rengi.
withPrimaryTextBackgroundColor ColorDrawable primaryTextBackgroundColor

Metnin ilk satırının arka plan rengi.
withSecondaryTextTypeface Typeface secondaryTextTypeface

Metnin ikinci satırının yazı karakteri.
withSecondaryTextSize float secondaryTextSize

Metnin ikinci satırının boyutu.
withSecondaryTextTypefaceColor int secondaryTextTypefaceColor

İkinci satırdaki metnin rengi.
withSecondaryTextBackgroundColor ColorDrawable secondaryTextBackgroundColor

İkinci metin satırının arka plan rengi.
withTertiaryTextTypeface Typeface tertiaryTextTypeface

Üçüncü metin satırının yazı tipi.
withTertiaryTextSize float tertiaryTextSize

Üçüncü metin satırının boyutu.
withTertiaryTextTypefaceColor int tertiaryTextTypefaceColor

Üçüncü metin satırının metin rengi.
withTertiaryTextBackgroundColor ColorDrawable tertiaryTextBackgroundColor

Üçüncü metin satırının arka plan rengi.
withMainBackgroundColor ColorDrawable mainBackgroundColor

Ana arka plan rengi.

Katkıda bulun

Doğal reklamları hızlı bir şekilde geliştirmenize yardımcı olmak için doğal şablonlar oluşturduk. Yeni şablonlar veya özellikler eklemek için GitHub depomuza katkıda bulunmanızı çok isteriz. Bize bir pull isteği gönderin, inceleyelim.