แบนเนอร์โฆษณา

โฆษณาแบนเนอร์ คือโฆษณารูปสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนใดส่วนหนึ่งของเลย์เอาต์ของแอป แบนเนอร์แบบปรับขนาดได้ที่ตรึงไว้ เป็นโฆษณาที่มีสัดส่วนคงที่ซึ่งจะแสดงบนหน้าจอขณะที่ผู้ใช้ โต้ตอบกับแอป โดยอาจตรึงไว้ที่ด้านบนหรือด้านล่างของหน้าจอ

คู่มือนี้ครอบคลุมการโหลดโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ลงในแอป Android

ข้อกำหนดเบื้องต้น

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทน โฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าวอาจส่งผลให้บัญชีถูกระงับ

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับ แบนเนอร์ Android

ca-app-pub-3940256099942544/9214589741

ซึ่งได้รับการกำหนดค่าเป็นพิเศษให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ และคุณสามารถ ใช้ในแอปของคุณเองขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้ แทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนเผยแพร่แอป

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีทำงานของโฆษณาทดสอบใน Google Mobile Ads SDK (เบต้า) ได้ที่ เปิดใช้โฆษณาทดสอบ

กำหนดมุมมองโฆษณา

เลย์เอาต์ XML

เพิ่มมุมมองลงในไฟล์ XML ของเลย์เอาต์เพื่อใช้เป็นคอนเทนเนอร์สำหรับโฆษณาแบนเนอร์ที่ยึดด้านล่างแบบปรับได้

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

  <FrameLayout
      android:id="@+id/banner_view_container"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toStartOf="parent">

  </FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

Jetpack Compose

ใส่องค์ประกอบ AndroidView ภายใน Compose UI และกำหนดตัวแปร mutableStateOf<BannerAd?> สำหรับเก็บโฆษณาแบนเนอร์ ดังนี้

// Initialize required variables.
val context = LocalContext.current
var bannerAdState by remember { mutableStateOf<BannerAd?>(null) }

// The AdView is placed at the bottom of the screen.
Column(modifier = modifier.fillMaxSize(), verticalArrangement = Arrangement.Bottom) {
  bannerAdState?.let { bannerAd ->
    Box(modifier = Modifier.fillMaxWidth()) {
      // Display the ad within an AndroidView.
      AndroidView(
        modifier = modifier.wrapContentSize(),
        factory = { bannerAd.getView(requireActivity()) },
      )
    }
  }
}

โหลดโฆษณา

  1. สร้างออบเจ็กต์ BannerAdRequest ที่มีรหัสหน่วยโฆษณาและขนาดโฆษณาที่ปรับให้เข้ากับพื้นที่โฆษณาแบบยึด
  2. โทรหา BannerAd.load()
  3. เพิ่ม BannerAd.getView() ลงในลำดับชั้นของมุมมอง

Kotlin

import com.google.android.libraries.ads.mobile.sdk.banner.AdSize
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAd
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAdEventCallback
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAdRefreshCallback
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAdRequest
import com.google.android.libraries.ads.mobile.sdk.common.AdLoadCallback
import com.google.android.libraries.ads.mobile.sdk.common.LoadAdError

class MainActivity : Activity() {

  private var bannerAd: BannerAd? = null
  private lateinit var binding: ActivityMainBinding
  private lateinit var adSize: AdSize
  private lateinit var bannerViewContainer: FrameLayout

  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    binding = ActivityMainBinding.inflate(layoutInflater)
    setContentView(binding.root)

    // 320 is a placeholder value. Replace 320 with your banner container width.
    adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 320)

    // Give the banner container a placeholder height to avoid a sudden layout
    // shifts when the ad loads.
    bannerViewContainer = binding.bannerViewContainer
    val bannerLayoutParams = bannerViewContainer.layoutParams
    bannerLayoutParams.height = adSize.getHeightInPixels(requireContext())
    bannerViewContainer.layoutParams = bannerLayoutParams

    // Step 1 - Create a BannerAdRequest object with ad unit ID and size.
    val adRequest = BannerAdRequest.Builder("ca-app-pub-3940256099942544/9214589741", adSize).build()

    // Step 2 - Load the ad.
    BannerAd.load(
      adRequest,
      object : AdLoadCallback<BannerAd> {
        override fun onAdLoaded(ad: BannerAd) {
          // Assign the loaded ad to the BannerAd object.
          bannerAd = ad
          // Step 3 - Call BannerAd.getView() to get the View and add it
          // to view hierarchy on the UI thread.
          activity?.runOnUiThread {
            binding.bannerViewContainer.addView(ad.getView(requireActivity()))
          }
        }

        override fun onAdFailedToLoad(loadAdError: LoadAdError) {
          bannerAd = null
        }
      },
    )
  }
}

Java

import com.google.android.libraries.ads.mobile.sdk.banner.AdSize;
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAd;
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAdEventCallback;
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAdRefreshCallback;
import com.google.android.libraries.ads.mobile.sdk.banner.BannerAdRequest;
import com.google.android.libraries.ads.mobile.sdk.common.AdLoadCallback;
import com.google.android.libraries.ads.mobile.sdk.common.LoadAdError;

public class MainActivity extends AppCompatActivity {

  private BannerAd bannerAd;
  private ActivityMainBinding binding;
  private AdSize adSize;
  private FrameLayout bannerViewContainer;

  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    binding = ActivityMainBinding.inflate(getLayoutInflater());
    setContentView(binding.getRoot());

    // 320 is a placeholder value. Replace 320 with your banner container width.
    adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(this, 320);

    // Give the banner container a placeholder height to avoid a sudden layout
    // shifts when the ad loads.
    bannerViewContainer = binding.bannerViewContainer;
    LayoutParams bannerLayoutParams = bannerViewContainer.getLayoutParams();
    bannerLayoutParams.height = adSize.getHeightInPixels(this);
    bannerViewContainer.setLayoutParams(bannerLayoutParams);

    // Step 1 - Create a BannerAdRequest object with ad unit ID and size.
    BannerAdRequest adRequest = new BannerAdRequest.Builder("ca-app-pub-3940256099942544/9214589741",
        adSize).build();

    // Step 2 - Load the ad.
    BannerAd.load(
        adRequest,
        new AdLoadCallback<BannerAd>() {
          @Override
          public void onAdLoaded(@NonNull BannerAd ad) {
            // Assign the loaded ad to the BannerAd object.
            bannerAd = ad;
            // Step 3 - Call BannerAd.getView() to get the View and add it
            // to view hierarchy on the UI thread.
            runOnUiThread(
                () -> binding.bannerViewContainer.addView(ad.getView(MainActivity.this)));
          }

          @Override
          public void onAdFailedToLoad(@NonNull LoadAdError adError) {
            bannerAd = null;
          }
        });
  }
}

Jetpack Compose

// Request an anchored adaptive banner with a width of 360.
val adSize = AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(requireContext(), 360)

// Load the ad when the screen is active.
val coroutineScope = rememberCoroutineScope()
val isPreviewMode = LocalInspectionMode.current
LaunchedEffect(context) {
  bannerAdState?.destroy()
  if (!isPreviewMode) {
    coroutineScope.launch {
      when (val result = BannerAd.load(BannerAdRequest.Builder(AD_UNIT_ID, adSize).build())) {
        is AdLoadResult.Success -> {
          bannerAdState = result.ad
        }
        is AdLoadResult.Failure -> {
          showToast("Banner failed to load.")
          Log.w(Constant.TAG, "Banner ad failed to load: $result.error")
        }
      }
    }
  }
}

รีเฟรชโฆษณา

หากกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่น เมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK (เบต้า) จะใช้อัตราการรีเฟรชที่คุณระบุใน UI ของ AdMob หากยังไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรช ได้ที่ ใช้การรีเฟรชอัตโนมัติสําหรับโฆษณาแบนเนอร์

เผยแพร่ชิ้นงานโฆษณา

เมื่อใช้โฆษณาแบนเนอร์เสร็จแล้ว คุณสามารถปล่อยทรัพยากรของโฆษณาแบนเนอร์ได้

หากต้องการเผยแพร่ทรัพยากรของโฆษณา ให้นำโฆษณาออกจากลําดับชั้นของมุมมองและ ทิ้งการอ้างอิงทั้งหมดของโฆษณา

Kotlin

// Remove banner from view hierarchy.
val parentView = adView?.parent
if (parentView is ViewGroup) {
  parentView.removeView(adView)
}

// Destroy the banner ad resources.
adView?.destroy()

// Drop reference to the banner ad.
adView = null

Java

// Remove banner from view hierarchy.
if (adView.getParent() instanceof ViewGroup) {
  ((ViewGroup) adView.getParent()).removeView(adView);
}
// Destroy the banner ad resources.
adView.destroy();
// Drop reference to the banner ad.
adView = null;

Jetpack Compose


// Destroy the ad when the screen is disposed.
DisposableEffect(Unit) { onDispose { bannerAdState?.destroy() } }

เหตุการณ์โฆษณา

คุณสามารถฟังเหตุการณ์ต่างๆ ในวงจรโฆษณาได้ ซึ่งรวมถึงการแสดงผลและการคลิกโฆษณา ตลอดจนการเปิดและปิดโฆษณา ขอแนะนำให้ ตั้งค่าการเรียกกลับก่อนแสดงแบนเนอร์

Kotlin

BannerAd.load(
  BannerAdRequest.Builder("ca-app-pub-3940256099942544/9214589741", adSize).build(),
  object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
      ad.adEventCallback =
        object : BannerAdEventCallback {
          override fun onAdImpression() {
            // Banner ad recorded an impression.
          }

          override fun onAdClicked() {
            // Banner ad recorded a click.
          }

          override fun onAdShowedFullScreenContent() {
            // Banner ad showed.
          }

          override fun onAdDismissedFullScreenContent() {
            // Banner ad dismissed.
          }

          override fun onAdFailedToShowFullScreenContent(
            fullScreenContentError: FullScreenContentError
          ) {
            // Banner ad failed to show.
          }
        }
    }
    // ...
  }
)

Java

BannerAd.load(
    new BannerAdRequest.Builder("ca-app-pub-3940256099942544/9214589741", adSize).build(),
    new AdLoadCallback<BannerAd>() {
      @Override
      public void onAdLoaded(@NonNull BannerAd ad) {
        ad.setAdEventCallback(new BannerAdEventCallback() {
          @Override
          public void onAdImpression() {
            // Banner ad recorded an impression.
          }

          @Override
          public void onAdClicked() {
            // Banner ad recorded a click.
          }

          @Override
          public void onAdShowedFullScreenContent() {
            // Banner ad showed.
          }

          @Override
          public void onAdDismissedFullScreenContent() {
            // Banner ad dismissed.
          }

          @Override
          public void onAdFailedToShowFullScreenContent(
              @NonNull FullScreenContentError fullScreenContentError) {
            // Banner ad failed to show.
          }
        });

        // ...
      }
    });

การเรียกกลับการรีเฟรชโฆษณา

BannerAdRefreshCallback จะจัดการเหตุการณ์การรีเฟรชโฆษณาหากคุณใช้การรีเฟรชอัตโนมัติ สําหรับโฆษณาแบนเนอร์ อย่าลืมตั้งค่าการเรียกกลับก่อนเพิ่มมุมมองโฆษณาลงใน ลำดับชั้นของมุมมอง ดูรายละเอียดเกี่ยวกับการรีเฟรชโฆษณาได้ที่ รีเฟรชโฆษณา

Kotlin

BannerAd.load(
  BannerAdRequest.Builder("ca-app-pub-3940256099942544/9214589741", adSize).build(),
  object : AdLoadCallback<BannerAd> {
    override fun onAdLoaded(ad: BannerAd) {
      ad.bannerAdRefreshCallback =
        object : BannerAdRefreshCallback {
          // Set the ad refresh callbacks.
          override fun onAdRefreshed() {
            // Called when the ad refreshes.
          }

          override fun onAdFailedToRefresh(loadAdError: LoadAdError) {
            // Called when the ad fails to refresh.
          }
        }

      // ...
    }
  }
)

Java

BannerAd.load(
    new BannerAdRequest.Builder("ca-app-pub-3940256099942544/9214589741", adSize).build(),
    new AdLoadCallback<BannerAd>() {
      @Override
      public void onAdLoaded(@NonNull BannerAd ad) {
        ad.setBannerAdRefreshCallback(
            // Set the ad refresh callbacks.
            new BannerAdRefreshCallback() {
              @Override
              public void onAdRefreshed() {
                // Called when the ad refreshes.
              }

              @Override
              public void onAdFailedToRefresh(@NonNull LoadAdError adError) {
                // Called when the ad fails to refresh.
              }
            });
        // ...
      }
    });

การเร่งฮาร์ดแวร์สำหรับโฆษณาวิดีโอ

หากต้องการให้โฆษณาวิดีโอแสดงในมุมมองโฆษณาแบนเนอร์ได้สำเร็จ คุณต้องเปิดใช้การเร่งด้วยฮาร์ดแวร์

การเร่งด้วยฮาร์ดแวร์จะเปิดใช้โดยค่าเริ่มต้น แต่บางแอปอาจเลือกปิดใช้ หากแอปของคุณเป็นเช่นนี้ เราขอแนะนำให้เปิดใช้การเร่งด้วยฮาร์ดแวร์สำหรับคลาส Activityที่ใช้โฆษณา

เปิดการเร่งฮาร์ดแวร์

หากแอปทำงานไม่ถูกต้องเมื่อเปิดการเร่งด้วยฮาร์ดแวร์ ทั่วโลก คุณสามารถควบคุมการเร่งด้วยฮาร์ดแวร์สำหรับกิจกรรมแต่ละอย่างได้เช่นกัน หากต้องการเปิดหรือปิดใช้การเร่งฮาร์ดแวร์ คุณสามารถใช้แอตทริบิวต์ android:hardwareAccelerated สำหรับองค์ประกอบ <application> และ <activity> ใน AndroidManifest.xml ตัวอย่างต่อไปนี้เปิดใช้การเร่งด้วยฮาร์ดแวร์ สำหรับทั้งแอป แต่ปิดใช้สำหรับกิจกรรมหนึ่งๆ

<application android:hardwareAccelerated="true">
    <!-- For activities that use ads, hardwareAcceleration should be true. -->
    <activity android:hardwareAccelerated="true" />
    <!-- For activities that don't use ads, hardwareAcceleration can be false. -->
    <activity android:hardwareAccelerated="false" />
</application>

ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือกในการควบคุมการเร่งฮาร์ดแวร์ได้ที่คำแนะนำ การเร่งฮาร์ดแวร์ โปรดทราบว่าคุณจะเปิดใช้มุมมองโฆษณาแต่ละรายการสำหรับการเร่งฮาร์ดแวร์ไม่ได้หากปิดใช้กิจกรรม ดังนั้นกิจกรรมเองต้องเปิดใช้การเร่งฮาร์ดแวร์

ดาวน์โหลดและเรียกใช้แอปตัวอย่าง ที่แสดงการใช้ Google Mobile Ads SDK (เบต้า)