Triển khai quảng cáo trong chế độ hình trong hình (thử nghiệm)

Chọn nền tảng: Android iOS Unity

Quảng cáo hình trong hình (PiP) xuất hiện trong một cửa sổ nổi luôn nằm trên cùng của nội dung trên màn hình, chẳng hạn như bài viết, nguồn cấp dữ liệu hoặc trò chơi. Định dạng này cho phép người dùng tương tác với ứng dụng của bạn trong khi quảng cáo vẫn hiển thị. Để hiển thị quảng cáo không chiếm toàn màn hình, hãy chọn định dạng này. Tìm hiểu thêm về quảng cáo hình trong hình ads.

Hướng dẫn này trình bày cách yêu cầu và hiển thị quảng cáo hình trong hình trong ứng dụng của bạn bằng GMA Next-Gen SDK.

Trước khi bắt đầu

Trước khi tiếp tục, hãy làm như sau:

• Thiết lập GMA Next-Gen SDK.

• Cài đặt GMA Next-Gen SDK phiên bản 1.4.0 trở lên.

• Bật quảng cáo thử nghiệm và sử dụng mã đơn vị quảng cáo thử nghiệm sau:

  ca-app-pub-3940256099942544/9657123429
  

Tải một quảng cáo

Để tải đối tượng PictureInPictureAd, hãy tạo một yêu cầu quảng cáo và gọi phương thức tải:

Kotlin

private fun loadPictureInPictureAd() {
  val request = PictureInPictureAdRequest.Builder(AD_UNIT_ID).build()

  PictureInPictureAd.load(
    request,
    object : AdLoadCallback<PictureInPictureAd> {
      override fun onAdFailedToLoad(adError: LoadAdError) {
        Log.w(TAG, "Picture-in-Picture ad failed to load: $adError")
      }

      override fun onAdLoaded(ad: PictureInPictureAd) {
        Log.d(TAG, "Picture-in-Picture ad loaded.")

        // Capture the PictureInPictureAd reference for later use.
        pipAd = ad
        setAdEventCallback(ad)
      }
    },
  )
}

Java

private void loadPictureInPictureAd() {
  PictureInPictureAdRequest request = new PictureInPictureAdRequest.Builder(AD_UNIT_ID).build();

  PictureInPictureAd.load(
      request,
      new AdLoadCallback<PictureInPictureAd>() {
        @Override
        public void onAdFailedToLoad(@NonNull LoadAdError adError) {
          Log.w(TAG, "Picture-in-Picture ad failed to load: " + adError);
        }

        @Override
        public void onAdLoaded(@NonNull PictureInPictureAd ad) {
          Log.d(TAG, "Picture-in-Picture ad loaded.");

          // Capture the PictureInPictureAd reference for later use.
          pipAd = ad;
          setAdEventCallback(ad);
        }
      });
}

Thay thế AD_UNIT_ID bằng mã đơn vị quảng cáo của bạn.

Hiển thị quảng cáo

Để hiển thị quảng cáo hình trong hình trên màn hình, hãy gọi phương thức hiển thị. Ví dụ sau đây hiển thị quảng cáo ở vị trí mặc định và đặt phạm vi trình bày thành màn hình:

Kotlin

private fun showPictureInPictureAd(activity: Activity) {
  // Capture the ad reference saved from the onAdLoaded callback.
  val ad = pipAd
  if (ad != null) {
    val options =
      PictureInPictureAdOptions.Builder()
        // Uses the Google Mobile Ads SDK's default screen position.
        .setPosition(PictureInPictureAdPosition.DEFAULT)
        // Binds the ad lifecycle to the host screen.
        .setPresentationScope(PictureInPictureAdPresentationScope.SCREEN)
        .build()
    ad.show(activity, options)
  } else {
    Log.d(TAG, "No ad to show.")
  }
}

Java

private void showPictureInPictureAd(@NonNull Activity activity) {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    PictureInPictureAdOptions options =
        new PictureInPictureAdOptions.Builder()
            // Uses the Google Mobile Ads SDK's default screen position.
            .setPosition(PictureInPictureAdPosition.DEFAULT)
            // Binds the ad lifecycle to the host screen.
            .setPresentationScope(PictureInPictureAdPresentationScope.SCREEN)
            .build();
    pipAd.show(activity, options);
  } else {
    Log.d(TAG, "No ad to show.");
  }
}

Đặt vị trí

Theo mặc định, GMA Next-Gen SDK hiển thị quảng cáo hình trong hình ở góc dưới cùng bên phải màn hình khi quảng cáo xuất hiện lần đầu hoặc ở vị trí đã biết gần đây nhất nếu quảng cáo đã xuất hiện trước đó. Để tuỳ chỉnh vị trí xuất hiện của quảng cáo, hãy chỉ định một vị trí khi hiển thị quảng cáo. Ví dụ sau đây đặt vị trí ở trên cùng của nội dung ở góc trên cùng bên trái màn hình:

Kotlin

private fun createTopLeftPositionOptions(): PictureInPictureAdOptions {
  return PictureInPictureAdOptions.Builder()
    // Sets the ad position to the top-left corner of the screen.
    .setPosition(PictureInPictureAdPosition.TOP_LEFT)
    .build()
}

Java

private PictureInPictureAdOptions createTopLeftPositionOptions() {
  return new PictureInPictureAdOptions.Builder()
      // Sets the ad position to the top-left corner of the screen.
      .setPosition(PictureInPictureAdPosition.TOP_LEFT)
      .build();
}

Để biết tất cả các vị trí có sẵn, hãy xem PictureInPictureAdPosition.

Đặt phạm vi trình bày

Theo mặc định, GMA Next-Gen SDK liên kết quảng cáo hình trong hình với màn hình lưu trữ hiện tại. GMA Next-Gen SDK sẽ đóng quảng cáo khi hệ phân cấp view của màn hình lưu trữ không còn trong bộ nhớ. Để giữ cho quảng cáo hiển thị sau khi màn hình lưu trữ bị xoá khỏi bộ nhớ, hãy đặt phạm vi trình bày thành ứng dụng:

Kotlin

private fun createApplicationScopedOptions(): PictureInPictureAdOptions {
  return PictureInPictureAdOptions.Builder()
    // Keeps the ad visible beyond the host screen's lifecycle.
    .setPresentationScope(PictureInPictureAdPresentationScope.APPLICATION)
    .build()
}

Java

private PictureInPictureAdOptions createApplicationScopedOptions() {
  return new PictureInPictureAdOptions.Builder()
      // Keeps the ad visible beyond the host screen's lifecycle.
      .setPresentationScope(PictureInPictureAdPresentationScope.APPLICATION)
      .build();
}

Để biết thêm thông tin, hãy xem bài viết Giữ cho quảng cáo hiển thị trên các màn hình.

Theo dõi các sự kiện quảng cáo

Để xử lý các sự kiện trong vòng đời của quảng cáo hình trong hình, hãy đăng ký các sự kiện quảng cáo trước khi hiển thị quảng cáo. Các sự kiện này báo cáo lượt tương tác với quảng cáo, chẳng hạn như lượt nhấp và lượt hiển thị. Các sự kiện này cũng báo cáo các sự kiện cụ thể về hình trong hình, chẳng hạn như khi quảng cáo hiển thị hoặc ẩn:

Kotlin

private fun setAdEventCallback(pipAd: PictureInPictureAd) {
  pipAd.adEventCallback =
    object : PictureInPictureAdEventCallback {
      override fun onAdShown() {
        Log.d(TAG, "Picture-in-Picture ad shown.")
      }

      override fun onAdHidden() {
        Log.d(TAG, "Picture-in-Picture ad hidden.")
      }

      override fun onAdImpression() {
        Log.d(TAG, "Picture-in-Picture ad recorded an impression.")
      }

      override fun onAdClicked() {
        Log.d(TAG, "Picture-in-Picture ad recorded a click.")
      }

      override fun onAdShowedFullScreenContent() {
        Log.d(TAG, "Picture-in-Picture ad showed full screen content.")
      }

      override fun onAdDismissedFullScreenContent() {
        Log.d(TAG, "Picture-in-Picture ad dismissed full screen content.")
      }

      override fun onAdFailedToShowFullScreenContent(
        fullScreenContentError: FullScreenContentError
      ) {
        Log.w(
          TAG,
          "Picture-in-Picture ad failed to show full screen content: $fullScreenContentError",
        )
      }

      override fun onAdPaid(value: AdValue) {
        Log.d(TAG, "Picture-in-Picture ad paid: ${value.valueMicros} ${value.currencyCode}")
      }
    }
}

Java

private void setAdEventCallback(@NonNull PictureInPictureAd pipAd) {
  pipAd.setAdEventCallback(
      new PictureInPictureAdEventCallback() {
        @Override
        public void onAdShown() {
          Log.d(TAG, "Picture-in-Picture ad shown.");
        }

        @Override
        public void onAdHidden() {
          Log.d(TAG, "Picture-in-Picture ad hidden.");
        }

        @Override
        public void onAdImpression() {
          Log.d(TAG, "Picture-in-Picture ad recorded an impression.");
        }

        @Override
        public void onAdClicked() {
          Log.d(TAG, "Picture-in-Picture ad recorded a click.");
        }

        @Override
        public void onAdShowedFullScreenContent() {
          Log.d(TAG, "Picture-in-Picture ad showed full screen content.");
        }

        @Override
        public void onAdDismissedFullScreenContent() {
          Log.d(TAG, "Picture-in-Picture ad dismissed full screen content.");
        }

        @Override
        public void onAdFailedToShowFullScreenContent(
            @NonNull FullScreenContentError fullScreenContentError) {
          Log.w(
              TAG,
              "Picture-in-Picture ad failed to show full screen content: "
                  + fullScreenContentError);
        }

        @Override
        public void onAdPaid(@NonNull AdValue value) {
          Log.d(
              TAG,
              "Picture-in-Picture ad paid: "
                  + value.getValueMicros()
                  + " "
                  + value.getCurrencyCode());
        }
      });
}

Ẩn quảng cáo

Để xoá quảng cáo nổi khỏi màn hình, hãy gọi phương thức ẩn. Phương thức này gọi sự kiện quảng cáo bị ẩn:

Kotlin

private fun hidePictureInPictureAd() {
  // Capture the ad reference saved from the onAdLoaded callback.
  val ad = pipAd
  if (ad != null) {
    ad.hide()
  } else {
    Log.d(TAG, "No ad to hide.")
  }
}

Java

private void hidePictureInPictureAd() {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    pipAd.hide();
  } else {
    Log.d(TAG, "No ad to hide.");
  }
}

Xoá tài nguyên quảng cáo

Để tránh làm rò rỉ bộ nhớ, hãy xoá tham chiếu đến đối tượng quảng cáo khi ứng dụng của bạn sử dụng xong quảng cáo. Ví dụ: khi ứng dụng của bạn không còn hiển thị hoặc tương tác với quảng cáo nữa. Đối với quảng cáo có phạm vi là màn hình, hãy xoá tham chiếu khi ứng dụng của bạn xoá màn hình lưu trữ khỏi bộ nhớ. Đối với quảng cáo có phạm vi là ứng dụng, hãy giữ lại tham chiếu quảng cáo trong khi người dùng di chuyển giữa các màn hình và xoá tham chiếu khi người dùng đóng quảng cáo:

Kotlin

private fun cleanUpPictureInPictureAd() {
  pipAd?.destroy()
  pipAd = null
}

Java

private void cleanUpPictureInPictureAd() {
  // Use the ad reference saved from the onAdLoaded callback.
  if (pipAd != null) {
    pipAd.destroy();
    pipAd = null;
  }
}

Giữ cho quảng cáo hiển thị trên các màn hình

Khi bạn đặt phạm vi trình bày thành ứng dụng, quảng cáo hình trong hình vẫn hiển thị ngay cả khi ứng dụng của bạn xoá màn hình lưu trữ khỏi bộ nhớ. Để tương tác với hoặc đóng quảng cáo khi người dùng di chuyển khỏi màn hình lưu trữ, ứng dụng của bạn phải giữ lại quyền truy cập vào quảng cáo hình trong hình. Bạn nên giữ quảng cáo trong một trình quản lý trạng thái dùng chung hoặc singleton ở cấp ứng dụng thay vì trong biến thực thể của một màn hình.

Để biết ví dụ về cách giữ cho quảng cáo hiển thị trên các màn hình, hãy xem các ứng dụng mẫu sau:

• Kotlin
• Java