Banner adaptif anchor

Banner adaptif adalah generasi berikutnya dari iklan responsif, yang memaksimalkan performa dengan mengoptimalkan ukuran iklan untuk setiap perangkat. Demi menyempurnakan banner cerdas, yang hanya mendukung ketinggian tetap, banner adaptif memungkinkan developer menentukan lebar iklan dan menggunakannya untuk menentukan ukuran iklan yang optimal.

Untuk memilih ukuran iklan terbaik, banner adaptif menggunakan rasio lebar tinggi tetap, bukan tinggi tetap. Hal ini menghasilkan iklan banner yang ditampilkan dengan porsi layar yang lebih konsisten di semua perangkat. Dengan begitu, peluang peningkatan performa akan terbuka.

Saat menggunakan banner adaptif, perhatikan bahwa ini akan selalu menampilkan ukuran konstanta untuk perangkat dan lebar tertentu. Setelah menguji tata letak di perangkat tertentu, Anda dapat yakin bahwa ukuran iklan tersebut tidak akan berubah. Namun, ukuran materi iklan banner dapat berubah di berbagai perangkat. Oleh karena itu, sebaiknya pastikan tata letak Anda dapat mengakomodasi varian dalam tinggi iklan. Dalam kasus yang jarang terjadi, ukuran adaptif penuh mungkin tidak diisi dan materi iklan ukuran standar akan dipusatkan di slot ini.

Kapan harus menggunakan banner adaptif

Banner adaptif dirancang untuk menjadi pengganti langsung untuk ukuran banner standar 320x50 industri, serta format banner cerdas yang digantikannya.

Ukuran banner ini biasanya digunakan sebagai banner anchor, yang biasanya dikunci ke bagian atas atau bawah layar. Untuk banner anchor tersebut, rasio lebar tinggi saat menggunakan banner adaptif akan serupa dengan iklan berukuran 320x50 standar, seperti yang dapat dilihat pada screenshot berikut:


Banner 320x50

Banner cerdas

Banner adaptif

Banner adaptif memanfaatkan ukuran layar yang tersedia dengan lebih baik. Selain itu, dibandingkan dengan banner cerdas, banner adaptif adalah pilihan yang lebih baik karena:

  • Fitur ini menggunakan lebar yang disediakan, bukan lebar layar penuh, sehingga Anda dapat memperhitungkan potongan layar .

  • Hal ini memilih tinggi yang optimal untuk perangkat tertentu, bukan memiliki tinggi yang konstan di berbagai perangkat yang berukuran berbeda, yang mengurangi efek fragmentasi perangkat.

Catatan implementasi

Saat menerapkan banner adaptif di aplikasi Anda, perhatikan poin-poin berikut:

  • Anda harus mengetahui lebar tampilan tempat iklan akan ditempatkan, dan ini harus memperhitungkan lebar perangkat dan potongan layar yang berlaku.
  • Pastikan latar belakang tampilan iklan Anda tidak buram agar mematuhi AdMob kebijakan saat ukuran iklan yang lebih kecil ditayangkan, yang tidak mengisi slot iklan.

  • Pastikan Anda menggunakan Google Mobile Ads SDK versi terbaru. Untuk mediasi, gunakan adaptor mediasi versi terbaru.

  • Ukuran banner adaptif dirancang agar dapat berfungsi dengan sangat baik saat menggunakan lebar penuh yang tersedia. Pada umumnya, ini adalah lebar penuh layar perangkat yang digunakan. Pastikan untuk mempertimbangkan potongan layar yang berlaku.

  • Google Mobile Ads SDK menampilkan tinggi iklan yang dioptimalkan untuk lebar yang ditentukan dalam AdSize.

  • Ada tiga metode untuk mendapatkan ukuran iklan untuk banner adaptif—satu untuk lanskap, satu untuk potret, dan satu untuk orientasi saat ini saat eksekusi. Untuk informasi selengkapnya, lihat dokumentasi API lengkap di bawah.

  • Ukuran yang ditampilkan untuk lebar tertentu pada perangkat tertentu akan selalu sama, sehingga setelah menguji tata letak di perangkat tertentu, Anda dapat yakin bahwa ukuran iklan tidak akan berubah.

  • Tinggi banner anchor tidak pernah lebih besar dari 15% dari tinggi perangkat dan tidak pernah lebih kecil dari 50 dp.

Mulai cepat

Ikuti langkah-langkah di bawah ini untuk menerapkan banner anchor adaptif sederhana.

  1. Buat objek an AdView dan tetapkan ID unit iklan Anda.

  2. Dapatkan ukuran iklan banner adaptif. Ukuran yang Anda dapatkan akan digunakan untuk meminta banner adaptif. Untuk mendapatkan ukuran iklan adaptif, pastikan Anda:

    1. Dapatkan lebar perangkat yang sedang digunakan, atau setel lebar Anda sendiri jika Anda tidak ingin menggunakan lebar penuh layar.
    2. Gunakan metode statis yang sesuai pada class ukuran iklan, seperti AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width) untuk mendapatkan objek AdSize adaptif untuk orientasi yang dipilih.
    3. Tetapkan ukuran iklan pada tampilan iklan banner—lakukan menggunakan AdView.setAdSize().

    Contoh lengkapnya disertakan di bawah.

  3. Buat objek permintaan iklan dan muat banner menggunakan metodeloadAd() pada tampilan iklan yang telah disiapkan, seperti yang biasa Anda lakukan pada permintaan banner normal.

Kode contoh

Berikut ini contoh aktivitas yang akan memuat banner adaptif agar sesuai dengan lebar layar:

Java

import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.util.DisplayMetrics;
import android.view.Display;
import android.widget.FrameLayout;

import com.google.android.gms.ads.AdRequest;
import com.google.android.gms.ads.AdSize;
import com.google.android.gms.ads.AdView;
import com.google.android.gms.ads.MobileAds;

/** Main Activity. Inflates main activity xml and child fragments. */
public class MyActivity extends AppCompatActivity {

  private FrameLayout adContainerView;
  private AdView adView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_my);

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this, new OnInitializationCompleteListener() {
        @Override
        public void onInitializationComplete(InitializationStatus initializationStatus) { }
    });

    adContainerView = findViewById(R.id.ad_view_container);
    // Step 1 - Create an AdView and set the ad unit ID on it.
    adView = new AdView(this);
    adView.setAdUnitId(getString(R.string.adaptive_banner_ad_unit_id));
    adContainerView.addView(adView);
    loadBanner();
  }

  private void loadBanner() {
    // Create an ad request. Check your logcat output for the hashed device ID
    // to get test ads on a physical device, e.g.,
    // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this
    // device."
    AdRequest adRequest =
        new AdRequest.Builder().addTestDevice(AdRequest.DEVICE_ID_EMULATOR)
            .build();

    AdSize adSize = getAdSize();
    // Step 4 - Set the adaptive ad size on the ad view.
    adView.setAdSize(adSize);
    

    // Step 5 - Start loading the ad in the background.
    adView.loadAd(adRequest);
  }

  private AdSize getAdSize() {
    // Step 2 - Determine the screen width (less decorations) to use for the ad width.
    Display display = getWindowManager().getDefaultDisplay();
    DisplayMetrics outMetrics = new DisplayMetrics();
    display.getMetrics(outMetrics);

    float widthPixels = outMetrics.widthPixels;
    float density = outMetrics.density;

    int adWidth = (int) (widthPixels / density);

    // Step 3 - Get adaptive ad size and return for setting on the ad view.
    return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth);
  }
}

Kotlin

import android.os.Bundle
import android.util.DisplayMetrics
import androidx.appcompat.app.AppCompatActivity
import com.google.android.gms.ads.AdRequest
import com.google.android.gms.ads.AdSize
import com.google.android.gms.ads.AdView
import com.google.android.gms.ads.MobileAds
import kotlinx.android.synthetic.main.activity_my.*

/** Main Activity. Inflates main activity xml and child fragments.  */
class MyActivity : AppCompatActivity() {
  private lateinit var adView: AdView

  // Determine the screen width (less decorations) to use for the ad width.
  // If the ad hasn't been laid out, default to the full screen width.
  private val adSize: AdSize
    get() {
      val display = windowManager.defaultDisplay
      val outMetrics = DisplayMetrics()
      display.getMetrics(outMetrics)

      val density = outMetrics.density

      var adWidthPixels = ad_view_container.width.toFloat()
      if (adWidthPixels == 0f) {
        adWidthPixels = outMetrics.widthPixels.toFloat()
      }

      val adWidth = (adWidthPixels / density).toInt()
      return AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, adWidth)
    }

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_my)

    // Initialize the Mobile Ads SDK.
    MobileAds.initialize(this) { }

    adView = AdView(this)
    ad_view_container.addView(adView)
    loadBanner()
  }

  private fun loadBanner() {
    adView.adUnitId = ad unit id

    adView.adSize = adSize

    // Create an ad request. Check your logcat output for the hashed device ID to
    // get test ads on a physical device, e.g.,
    // "Use AdRequest.Builder.addTestDevice("ABCDE0123") to get test ads on this device."
    val adRequest = AdRequest
        .Builder()
        .addTestDevice(AdRequest.DEVICE_ID_EMULATOR).build()

    // Start loading the ad in the background.
    adView.loadAd(adRequest)
  }

  companion object {
    // This is an ad unit ID for a test ad. Replace with your own banner ad unit ID.
    private val AD_UNIT_ID = "ca-app-pub-3940256099942544~3347511713"
  }
}

Di sini, fungsi AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize digunakan untuk mendapatkan ukuran untuk banner dalam posisi anchor untuk orientasi antarmuka saat ini. Untuk memuat banner anchor dalam orientasi tertentu, gunakan fungsi yang relevan dari AdSize.getPortraitAnchoredAdaptiveBannerAdSize dan AdSize.getLandscapeAnchoredAdaptiveBannerAdSize.

Contoh lengkap di GitHub

Download Java Mendownload Kotlin