Thêm quảng cáo khi mở ứng dụng của AdMob vào một ứng dụng Unity

1. Giới thiệu

Trong lớp học lập trình này, bạn sẽ triển khai quảng cáo khi mở ứng dụng của AdMob trong một ứng dụng Unity.

Sản phẩm bạn sẽ tạo ra

Lớp học lập trình này hướng dẫn bạn cách triển khai quảng cáo khi mở ứng dụng của AdMob trong ứng dụng Unity bằng cách sử dụng trình bổ trợ Unity của Quảng cáo trên thiết bị di động của Google.

6338548c3f73e7cf.gif

Nếu bạn gặp vấn đề (lỗi trong đoạn mã, lỗi ngữ pháp, từ ngữ không rõ ràng, v.v.) khi thực hành theo lớp học lập trình này, hãy báo cáo vấn đề bằng đường liên kết Báo cáo lỗi ở góc dưới bên trái lớp học lập trình.

Kiến thức bạn sẽ học được

  • Cách định cấu hình trình bổ trợ Unity của quảng cáo trên thiết bị di động của Google
  • Cách triển khai quảng cáo khi mở ứng dụng trong một ứng dụng Unity

Bạn cần có

  • Unity 2018.4 trở lên
  • Xcode 12 trở lên và CocoaPods (để triển khai cho iOS)

Bạn đánh giá mức độ trải nghiệm của mình với AdMob như thế nào?

Người mới tập Trung cấp Thành thạo

2. Thiết lập môi trường phát triển

Tải mã nguồn xuống

Sau khi bạn tải tệp zip xuống, hãy giải nén nội dung của tệp. Bạn sẽ có một thư mục có tên admob-appopen-unity-main.

Ngoài ra, bạn có thể sao chép kho lưu trữ GitHub từ dòng lệnh:

$ git clone https://github.com/googlecodelabs/admob-appopen-unity

Kho lưu trữ chứa hai thư mục:

  • android_studio_folder.png starter (khởi đầu): Đoạn mã khởi đầu mà bạn sẽ tạo trong lớp học lập trình này.
  • Đã hoàn tất android_studio_folder.png : Đã hoàn tất mã cho lớp học lập trình này.

3. Thiết lập ứng dụng và đơn vị quảng cáo AdMob

Vì Unity là SDK đa nền tảng, nên bạn cần thêm ứng dụng và đơn vị quảng cáo cho cả Android và iOS trong AdMob.

Thiết lập cho Android

Để thiết lập cho Android, bạn cần thêm một ứng dụng Android và tạo đơn vị quảng cáo.

Thêm ứng dụng Android

  1. Trong Bảng điều khiển của AdMob, hãy nhấp vào THÊM ỨNG DỤNG trên trình đơn Ứng dụng.
  2. Chọn Android làm nền tảng. Khi bạn được hỏi Ứng dụng này có được liệt kê trên cửa hàng ứng dụng được hỗ trợ không?, hãy nhấp vào KHÔNG.
  3. Nhập AdMob app open ad vào trường tên ứng dụng.
  4. Bạn không cần bật chỉ số người dùng để hoàn thành lớp học lập trình này. Tuy nhiên, bạn nên làm như vậy vì việc này giúp bạn hiểu rõ hơn hành vi của người dùng. Nhấp vào THÊM để hoàn tất quy trình này.

Tạo đơn vị quảng cáo

  1. Chọn ứng dụng Quảng cáo khi mở ứng dụng của AdMob (Android) trên trình đơn Ứng dụng trong bảng điều khiển AdMob.
  2. Nhấp vào trình đơn Đơn vị quảng cáo.

  1. Nhấp vào THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Quảng cáo khi mở ứng dụng.
  3. Nhập android-appopen vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Thường phải mất vài giờ để một đơn vị quảng cáo mới có thể phân phát quảng cáo.

Nếu bạn muốn thử nghiệm hành vi của quảng cáo ngay lập tức, hãy sử dụng mã ứng dụng thử nghiệm và mã đơn vị quảng cáo được liệt kê trong bảng Mã ứng dụng Android/Mã đơn vị quảng cáo và bảng Mã ứng dụng/Mã đơn vị quảng cáo dành cho iOS.

Thiết lập cho iOS

Để thiết lập quảng cáo cho iOS, bạn cần thêm một ứng dụng iOS và tạo đơn vị quảng cáo.

Thêm ứng dụng iOS

  1. Trong Bảng điều khiển của AdMob, hãy nhấp vào THÊM ỨNG DỤNG trên trình đơn Ứng dụng.
  2. Chọn iOS làm nền tảng. Khi bạn được hỏi Ứng dụng này có được liệt kê trên cửa hàng ứng dụng được hỗ trợ không?, hãy nhấp vào KHÔNG.
  3. Nhập AdMob app open ad vào trường tên ứng dụng.
  4. Bạn không cần bật chỉ số người dùng để hoàn thành lớp học lập trình này. Tuy nhiên, bạn nên làm như vậy vì việc này giúp bạn hiểu rõ hơn hành vi của người dùng. Nhấp vào THÊM để hoàn tất quy trình này.

Tạo đơn vị quảng cáo

  1. Chọn ứng dụng Quảng cáo nội tuyến AdMob (iOS) từ trình đơn Ứng dụng trong bảng điều khiển AdMob.
  2. Nhấp vào trình đơn Đơn vị quảng cáo.

  1. Nhấp vào THÊM ĐƠN VỊ QUẢNG CÁO.
  2. Chọn định dạng là Quảng cáo khi mở ứng dụng.
  3. Nhập ios-appopen vào trường Tên đơn vị quảng cáo.
  4. Nhấp vào TẠO ĐƠN VỊ QUẢNG CÁO để hoàn tất quy trình này.

Thường phải mất vài giờ để một đơn vị quảng cáo mới có thể phân phát quảng cáo.

Nếu bạn muốn thử nghiệm hành vi của quảng cáo ngay lập tức, hãy sử dụng mã ứng dụng thử nghiệm và mã đơn vị quảng cáo được liệt kê trong bảng sau.

Không bắt buộc: Sử dụng ứng dụng và đơn vị quảng cáo AdMob thử nghiệm

Nếu muốn theo dõi lớp học lập trình thay vì tự tạo một ứng dụng và đơn vị quảng cáo mới, bạn có thể sử dụng mã ứng dụng AdMob thử nghiệm và mã đơn vị quảng cáo được liệt kê trong các bảng sau.

Mã ứng dụng Android/Mã đơn vị quảng cáo

Item

mã ứng dụng/mã đơn vị quảng cáo

Mã ứng dụng AdMob

ca-app-pub-3940256099942544~3347511713

Mã đơn vị quảng cáo

ca-app-pub-3940256099942544/3419835294

Mã ứng dụng iOS/Mã đơn vị quảng cáo

Item

mã ứng dụng/mã đơn vị quảng cáo

Mã ứng dụng AdMob

ca-app-pub-3940256099942544~1458002511

Mã đơn vị quảng cáo

ca-app-pub-3940256099942544/5662855259

Để biết thêm thông tin về quảng cáo thử nghiệm, hãy tham khảo tài liệu dành cho nhà phát triển về quảng cáo thử nghiệm trên Android và quảng cáo thử nghiệm trên iOS.

4. Thêm trình bổ trợ Unity của quảng cáo trên thiết bị di động của Google

Bước đầu tiên để hiển thị quảng cáo AdMob và tạo doanh thu là tích hợp trình bổ trợ Unity của quảng cáo trên thiết bị di động của Google.

Tải trình bổ trợ Unity quảng cáo trên thiết bị di động xuống

Trình bổ trợ Unity quảng cáo trên thiết bị di động của Google cho phép các nhà phát triển Unity dễ dàng phân phát Quảng cáo trên thiết bị di động của Google trên các ứng dụng Android và iOS. Trình bổ trợ này cung cấp giao diện C# để yêu cầu quảng cáo mà tập lệnh C# sử dụng trong dự án Unity của bạn.

Sử dụng đường liên kết dưới đây để tải gói Unity xuống cho trình bổ trợ.

Mở dự án khởi đầu

  1. Chạy Unity Hub.
  2. Trong thẻ Dự án, hãy nhấp vào nút THÊM.
  3. Chuyển đến thư mục mà bạn đã trích xuất đoạn mã đã tải xuống trong bước Thiết lập môi trường phát triển.
  4. Mở thư mục starter (khởi động).
  5. Bạn sẽ thấy dự án starter (khởi đầu) trong danh sách dự án. Nhấp vào dự án để mở dự án đó trong Trình chỉnh sửa Unity.

Nhập trình bổ trợ Unity quảng cáo trên thiết bị di động

  1. Trong trình chỉnh sửa Unity, chọn Assets > Nhập gói > Custom Package (Gói tuỳ chỉnh) trong trình đơn.
  2. Chọn GoogleMobileAds-{VERSION}.unitypackage mà bạn đã tải xuống ở bước trước.
  3. Hãy đảm bảo bạn đã chọn tất cả các tệp, rồi nhấp vào Nhập.

Đặt mã ứng dụng AdMob

  1. Trong Trình chỉnh sửa Unity, hãy chọn Tài sản > Quảng cáo trên điện thoại di động của Google > Cài đặt trong trình đơn.
  2. Nhập mã ứng dụng AdMob trên Android và iOS của bạn vào mỗi trường. Nếu bạn muốn theo dõi lớp học lập trình thay vì tự tạo một ứng dụng và đơn vị quảng cáo mới, hãy nhập mã ứng dụng AdMob thử nghiệm như sau.

8890521e199b1090.pngS

5. Tạo một lớp tiện ích

Tạo một lớp mới có tên là AppOpenAdManager trong thư mục Scripts (Tập lệnh). Lớp này sẽ quản lý một biến thực thể để theo dõi một quảng cáo đã tải và mã đơn vị quảng cáo của từng nền tảng.

AppOpenAdManager.cs

using System;
using GoogleMobileAds.Api;
using UnityEngine;

public class AppOpenAdManager
{
#if UNITY_ANDROID
    // Test ad unit ID: ca-app-pub-3940256099942544/3419835294
    private const string AD_UNIT_ID = "<YOUR_ANDROID_APPOPEN_AD_UNIT_ID>";
#elif UNITY_IOS
    // Test ad unit ID: ca-app-pub-3940256099942544/5662855259
    private const string AD_UNIT_ID = "<YOUR_IOS_APPOPEN_AD_UNIT_ID>";
#else
    private const string AD_UNIT_ID = "unexpected_platform";
#endif

    private static AppOpenAdManager instance;

    private AppOpenAd ad;

    private bool isShowingAd = false;

    public static AppOpenAdManager Instance
    {
        get
        {
            if (instance == null)
            {
                instance = new AppOpenAdManager();
            }

            return instance;
        }
    }

    private bool IsAdAvailable
    {
        get
        {
            return ad != null;
        }
    }

    public void LoadAd()
    {
        // TODO: Load an app open ad.
    }
}

Tải quảng cáo

Bạn có thể tải một quảng cáo bằng cách sử dụng phương thức AppOpenAd.LoadAd() tĩnh. Phương thức tải này yêu cầu một mã đơn vị quảng cáo, chế độ ScreenOrientation, đối tượng AdRequest và một trình xử lý hoàn thành để gọi khi tải quảng cáo thành công hoặc không thành công.

Đối tượng AppOpenAd đã tải được cung cấp dưới dạng một tham số trong trình xử lý hoàn thành. Triển khai phương thức LoadAd() như sau.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void LoadAd()
    {
        AdRequest request = new AdRequest.Builder().Build();

        // Load an app open ad for portrait orientation
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                // Handle the error.
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            // App open ad is loaded.
            ad = appOpenAd;
        }));
    }
}

Hiển thị quảng cáo

Trước khi hiển thị quảng cáo, hãy đăng ký từng trình xử lý sự kiện để theo dõi từng sự kiện quảng cáo.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    public void ShowAdIfAvailable()
    {
        if (!IsAdAvailable || isShowingAd)
        {
            return;
        }

        ad.OnAdDidDismissFullScreenContent += HandleAdDidDismissFullScreenContent;
        ad.OnAdFailedToPresentFullScreenContent += HandleAdFailedToPresentFullScreenContent;
        ad.OnAdDidPresentFullScreenContent += HandleAdDidPresentFullScreenContent;
        ad.OnAdDidRecordImpression += HandleAdDidRecordImpression;
        ad.OnPaidEvent += HandlePaidEvent;

        ad.Show();
    }

    private void HandleAdDidDismissFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Closed app open ad");
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        isShowingAd = false;
        LoadAd();
    }

    private void HandleAdFailedToPresentFullScreenContent(object sender, AdErrorEventArgs args)
    {
        Debug.LogFormat("Failed to present the ad (reason: {0})", args.AdError.GetMessage());
        // Set the ad to null to indicate that AppOpenAdManager no longer has another ad to show.
        ad = null;
        LoadAd();
    }

    private void HandleAdDidPresentFullScreenContent(object sender, EventArgs args)
    {
        Debug.Log("Displayed app open ad");
        isShowingAd = true;
    }

    private void HandleAdDidRecordImpression(object sender, EventArgs args)
    {
        Debug.Log("Recorded ad impression");
    }

    private void HandlePaidEvent(object sender, AdValueEventArgs args)
    {
        Debug.LogFormat("Received paid event. (currency: {0}, value: {1}",
                args.AdValue.CurrencyCode, args.AdValue.Value);
    }
}

Xem xét thời hạn của quảng cáo

Các tệp tham chiếu quảng cáo trong ứng dụng khi mở sẽ hết hạn sau 4 giờ. Sau 4 giờ kể từ thời điểm yêu cầu, quảng cáo được hiển thị sẽ không còn hợp lệ và không thể tạo doanh thu nữa.

Để đảm bảo bạn không hiển thị quảng cáo đã hết hạn, hãy sửa đổi thuộc tính IsAdAvailable thành AppOpenAdManager. Thuộc tính này sẽ kiểm tra khoảng thời gian kể từ khi quảng cáo của bạn được tải. Sau đó, hãy sử dụng phương thức đó để kiểm tra xem quảng cáo có còn hợp lệ hay không.

AppOpenAdManager.cs

public class AppOpenAdManager
{
    ...

    // TODO: Add loadTime field
    private DateTime loadTime;

    private bool IsAdAvailable
    {
        get
        {
            // TODO: Consider ad expiration
            return ad != null && (System.DateTime.UtcNow - loadTime).TotalHours < 4;
        }
    }

    public void LoadAd()
    {
        if (IsAdAvailable)
        {
            return;
        }

        AdRequest request = new AdRequest.Builder().Build();
        AppOpenAd.LoadAd(AD_UNIT_ID, ScreenOrientation.Portrait, request, ((appOpenAd, error) =>
        {
            if (error != null)
            {
                Debug.LogFormat("Failed to load the ad. (reason: {0})", error.LoadAdError.GetMessage());
                return;
            }

            ad = appOpenAd;
            Debug.Log("App open ad loaded");

            // TODO: Keep track of time when the ad is loaded.
            loadTime = DateTime.UtcNow;
        }));
    }
}

6. Cập nhật cảnh để tải/hiển thị quảng cáo

Cập nhật phương thức Start() trong lớp MainScene để tải quảng cáo khi mở ứng dụng khi cảnh bắt đầu.

Để nhận được thông báo về các sự kiện đưa ứng dụng lên nền trước, bạn nên theo dõi singleton AppStateEventNotifier. Bằng cách triển khai tính năng uỷ quyền AppStateEventNotifier.AppStateChanged, ứng dụng của bạn sẽ được thông báo về các sự kiện chạy ứng dụng và đưa ứng dụng lên nền trước, đồng thời sẽ có thể hiển thị quảng cáo.

MainScene.cs

using GoogleMobileAds.Api;
using GoogleMobileAds.Common;
using UnityEngine;

public class MainScene : MonoBehaviour
{
    public void Start()
    {
        // TODO: Request an app open ad.
        MobileAds.Initialize((initStatus) =>
        {
            AppOpenAdManager.Instance.LoadAd();
            AppStateEventNotifier.AppStateChanged += OnAppStateChanged;
        });
    }

    public void OnAppStateChanged(AppState state)
    {
        if (state == AppState.Foreground)
        {
            // TODO: Show an app open ad if available.
            AppOpenAdManager.Instance.ShowAdIfAvailable();
        }
    }
}

Vậy là xong! Tạo và chạy dự án trên một thiết bị hoặc một trình mô phỏng. Sau khi chạy ứng dụng, hãy chờ vài giây để quảng cáo được tải đầy đủ.

Sau đó, khi bạn chuyển trở lại ứng dụng từ các ứng dụng/màn hình chính khác, quảng cáo khi mở ứng dụng sẽ xuất hiện như bên dưới.

6338548c3f73e7cf.gif

7. Đã xong!

Bạn đã hoàn thành lớp học lập trình. Bạn có thể tìm thấy mã đã hoàn tất cho lớp học lập trình này trong thư mục android_studio_folder.pngcomplete.