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.
Buat objek an
AdView
dan tetapkan ID unit iklan Anda.Dapatkan ukuran iklan banner adaptif. Ukuran yang Anda dapatkan akan digunakan untuk meminta banner adaptif. Untuk mendapatkan ukuran iklan adaptif, pastikan Anda:
- Dapatkan lebar perangkat yang sedang digunakan, atau setel lebar Anda sendiri jika Anda tidak ingin menggunakan lebar penuh layar.
- Gunakan metode statis yang sesuai pada class ukuran iklan, seperti
AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context, width)
untuk mendapatkan objekAdSize
adaptif untuk orientasi yang dipilih. - Tetapkan ukuran iklan pada tampilan iklan banner—lakukan
menggunakan
AdView.setAdSize()
.
Contoh lengkapnya disertakan di bawah.
Buat objek permintaan iklan dan muat banner menggunakan metode
loadAd()
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 |