Thiết lập quảng cáo biểu ngữ

Chế độ xem biểu ngữ là quảng cáo dạng hình ảnh hình chữ nhật hoặc quảng cáo dạng văn bản xuất hiện trên một phần của màn hình. Những quảng cáo này nằm trên màn hình trong khi người dùng tương tác với ứng dụng và có thể tự động làm mới sau một khoảng thời gian nhất định. Nếu bạn mới sử dụng quảng cáo trên thiết bị di động thì đây là loại quảng cáo rất phù hợp để bắt đầu.

Tài liệu hướng dẫn này trình bày cách tích hợp chế độ xem biểu ngữ vào ứng dụng Unity. Ngoài các đoạn mã và thông tin hướng dẫn, bài viết này còn cung cấp thông tin về việc xác định kích thước biểu ngữ sao cho phù hợp và đường liên kết đến các tài liệu tham khảo khác.

Điều kiện tiên quyết

Trước khi tiếp tục, thiết lập Google Mobile Ads Unity Plugin.

Luôn thử nghiệm bằng quảng cáo thử nghiệm

Mã mẫu sau đây chứa một mã đơn vị quảng cáo và bạn có thể dùng mã này để yêu cầu hiển thị quảng cáo thử nghiệm. Mã này được định cấu hình đặc biệt để trả về quảng cáo thử nghiệm thay vì quảng cáo thực tế cho mọi yêu cầu, vì vậy, mã này rất an toàn để sử dụng.

Tuy nhiên, sau khi đăng ký một ứng dụng trong giao diện web Ad Manager và tạo các mã đơn vị quảng cáo riêng để sử dụng trong ứng dụng, bạn cần định cấu hình thiết bị của mình làm thiết bị thử nghiệm một cách rõ ràng trong quá trình phát triển.

/21775744923/example/fixed-size-banner

Khởi chạy Google Mobile Ads Unity Plugin

Trước khi tải quảng cáo, hãy để ứng dụng của bạn khởi chạy Google Mobile Ads Unity Plugin bằng cách gọi MobileAds.Initialize(). Bạn chỉ cần thực hiện việc này một lần, tốt nhất là khi khởi chạy ứng dụng.

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize Google Mobile Ads Unity Plugin.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

Nếu bạn đang sử dụng tính năng dàn xếp, hãy đợi cho đến khi lệnh gọi lại xảy ra trước khi tải quảng cáo vì điều này sẽ đảm bảo rằng tất cả các bộ chuyển đổi dàn xếp đều khởi động.

Ví dụ về BannerView

Mã mẫu sau đây nêu chi tiết cách sử dụng chế độ xem biểu ngữ. Trong ví dụ này, hãy tạo một thực thể cho chế độ xem biểu ngữ, sử dụng AdManagerAdRequest để tải quảng cáo vào chế độ xem biểu ngữ, sau đó mở rộng các tính năng của chế độ xem biểu ngữ bằng cách xử lý các sự kiện trong vòng đời.

Tạo chế độ xem biểu ngữ

Bước đầu tiên để sử dụng chế độ xem biểu ngữ là tạo một bản sao cho chế độ xem biểu ngữ.

// Create a 320x50 banner at top of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);AdManagerBannerViewSnippets.cs

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

Hàm khởi tạo cho AdManagerBannerView có các thông số sau:

adUnitId: Mã đơn vị quảng cáo của quảng cáo biểu ngữ cần tải.
AdSize: Kích thước biểu ngữ mà bạn muốn sử dụng.
AdPosition: Vị trí mà bạn nên đặt chế độ xem biểu ngữ.

(Không bắt buộc) Tạo chế độ xem biểu ngữ có vị trí tuỳ chỉnh

Để kiểm soát tốt hơn vị trí đặt chế độ xem biểu ngữ trên màn hình so với khả năng kiểm soát do giá trị AdPosition cung cấp, hãy sử dụng hàm khởi tạo có toạ độ x và y làm tham số:

// Create a 320x50 banner views at coordinate (0,50) on screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, 0, 50);AdManagerBannerViewSnippets.cs

Góc trên cùng bên trái của chế độ xem biểu ngữ được định vị theo các giá trị x và y được truyền đến hàm khởi tạo, còn gốc toạ độ sẽ nằm ở phía trên cùng bên trái của màn hình.

(Không bắt buộc) Tạo chế độ xem biểu ngữ có kích thước tuỳ chỉnh

Ngoài việc sử dụng hằng số AdSize, bạn cũng có thể chỉ định một kích thước tuỳ chỉnh cho quảng cáo của mình:

// Create a 250x250 banner at the bottom of the screen.
AdSize adSize = new AdSize(250, 250);
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", adSize, AdPosition.Bottom);AdManagerBannerViewSnippets.cs

(Không bắt buộc) Nhiều kích thước quảng cáo

Ad Manager cho phép bạn chỉ định nhiều kích thước quảng cáo có thể đủ điều kiện phân phát trong AdManagerBannerView. Trước khi triển khai tính năng này trong SDK, bạn hãy tạo một mục hàng nhắm mục tiêu cùng một đơn vị quảng cáo được liên kết với nhiều tệp quảng cáo có kích thước khác nhau.

Trong ứng dụng của mình, hãy truyền nhiều tham số AdSize vào ValidAdSizes:

// Create a 250x250 banner at the bottom of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

// Add multiple ad sizes.
adManagerBannerView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner,
    new AdSize(120, 20),
    new AdSize(250, 250),
};AdManagerBannerViewSnippets.cs

Nếu AdManagerAdView thay đổi kích thước tại thời điểm làm mới, thì bố cục của bạn cần có khả năng tự động điều chỉnh cho vừa với kích thước mới. Theo mặc định, AdManagerAdView sẽ áp dụng kích thước được truyền vào thông số đầu tiên cho tới khi hệ thống trả về quảng cáo tiếp theo.

Tải quảng cáo biểu ngữ

Sau khi đã sẵn sàng AdManagerBannerView, hãy tiến hành tải quảng cáo bằng phương thức LoadAd() trong lớp AdManagerBannerView. Phương thức này sử dụng thông số giúp lưu giữ thông tin trong thời gian chạy, chẳng hạn như thông tin nhắm mục tiêu, nhãn loại trừ và mã do nhà xuất bản cung cấp.

Để tải quảng cáo, hãy tạo AdManagerAdRequest và truyền đối tượng này đến phương thức LoadAd().

// Send a request to load an ad into the banner view.
adManagerBannerView.LoadAd(new AdManagerAdRequest());AdManagerBannerViewSnippets.cs

Theo dõi các sự kiện về chế độ xem biểu ngữ

Để tuỳ chỉnh hoạt động của quảng cáo, bạn có thể dựa vào một số sự kiện trong vòng đời của quảng cáo, chẳng hạn như tải, mở hoặc đóng. Để theo dõi các sự kiện này, hãy đăng ký một trình uỷ quyền:

adManagerBannerView.OnBannerAdLoaded += () =>
{
    // Raised when an ad is loaded into the banner view.
};
adManagerBannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
    // Raised when an ad fails to load into the banner view.
};
adManagerBannerView.OnAdPaid += (AdValue adValue) =>
{
    // Raised when the ad is estimated to have earned money.
};
adManagerBannerView.OnAdImpressionRecorded += () =>
{
    // Raised when an impression is recorded for an ad.
};
adManagerBannerView.OnAdClicked += () =>
{
    // Raised when a click is recorded for an ad.
};
adManagerBannerView.OnAdFullScreenContentOpened += () =>
{
    // Raised when an ad opened full screen content.
};
adManagerBannerView.OnAdFullScreenContentClosed += () =>
{
    // Raised when the ad closed full screen content.
};AdManagerBannerViewSnippets.cs

Huỷ chế độ xem biểu ngữ

Để hủy bỏ biểu ngữ, hãy gọi phương thức Destroy() để giải phóng tài nguyên:

if (adManagerBannerView != null)
{
    // Always destroy the banner view when no longer needed.
    adManagerBannerView.Destroy();
    adManagerBannerView = null;
}AdManagerBannerViewSnippets.cs

Đối với những biểu ngữ không tải được, bạn nên làm mới biểu ngữ thay vì huỷ và tạo một biểu ngữ mới. Để biết thông tin chi tiết, hãy xem bài viết Làm mới quảng cáo.

Làm mới quảng cáo

Nếu đã định cấu hình đơn vị quảng cáo để làm mới, thì bạn không cần yêu cầu một quảng cáo khác khi quảng cáo không tải được. Google Mobile Ads Unity Plugin sẽ áp dụng tốc độ làm mới mà bạn chỉ định trong giao diện người dùng Ad Manager. Nếu chưa kích hoạt tính năng làm mới, hãy đưa ra yêu cầu mới. Để biết thêm thông tin chi tiết về tính năng làm mới đơn vị quảng cáo, chẳng hạn như cách đặt tốc độ làm mới, hãy xem bài viết Tốc độ làm mới của quảng cáo trong ứng dụng dành cho thiết bị di động.

Kích thước biểu ngữ

Bảng sau đây liệt kê các kích thước biểu ngữ chuẩn:

Kích thước đo bằng dp (RxC)	Mô tả	Phạm vi cung cấp	Hằng số AdSize
320x50	Biểu ngữ chuẩn	Điện thoại và máy tính bảng	`BANNER`
320x100	Biểu ngữ lớn	Điện thoại và máy tính bảng	`LARGE_BANNER`
300x250	Hình chữ nhật trung bình IAB	Điện thoại và máy tính bảng	`MEDIUM_RECTANGLE`
468x60	Biểu ngữ kích thước đầy đủ IAB	Máy tính bảng	`FULL_BANNER`
728x90	Hình chữ nhật dài IAB	Máy tính bảng	`LEADERBOARD`
Chiều rộng đã cho x Chiều cao thích ứng	Biểu ngữ thích ứng	Điện thoại và máy tính bảng	Không áp dụng
Chiều rộng màn hình x 32\|50\|90	Biểu ngữ thông minh	Điện thoại và máy tính bảng	`SMART_BANNER`
Tìm hiểu thêm về Biểu ngữ thích ứng. Định dạng này dự kiến sẽ thay thế Biểu ngữ thông minh.

Sự kiện ứng dụng

Sự kiện ứng dụng cho phép bạn tạo những quảng cáo có thể gửi thông báo đến mã ứng dụng của sự kiện đó. Sau đó, ứng dụng có thể hành động dựa trên các thông báo này.

Bạn có thể theo dõi các sự kiện ứng dụng dành riêng cho Ad Manager bằng cách sử dụng AppEvent. Những sự kiện này có thể xảy ra bất cứ lúc nào trong vòng đời của quảng cáo, ngay cả trước khi hệ thống gọi lệnh tải.

OnAppEventReceived được kích hoạt khi một sự kiện ứng dụng xảy ra trong một quảng cáo. Sau đây là ví dụ về cách xử lý sự kiện này trong mã của bạn:

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Data}.");
};AdManagerBannerViewSnippets.cs

Dưới đây là ví dụ cho thấy cách thay đổi màu nền của ứng dụng, tuỳ thuộc vào sự kiện ứng dụng đi kèm tên màu:

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    if (args.Name == "color")
    {
        Color color;
        if (ColorUtility.TryParseHtmlString(args.Data, out color))
        {
            renderer.material.color = color;
        }
    }
};AdManagerBannerViewSnippets.cs

Đây là mẫu quảng cáo tương ứng sẽ gửi sự kiện ứng dụng màu:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0;
      left: 0;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>
AppEventSnippets.html

Tài nguyên khác

Ví dụ về HelloWorld: Cách triển khai tối giản cho mọi định dạng quảng cáo.