Menambahkan iklan di layar pembuka aplikasi AdMob ke aplikasi Unity

1. Pengantar

Dalam codelab ini, Anda akan menerapkan iklan di layar pembuka aplikasi AdMob di aplikasi Unity.

Yang akan Anda buat

Codelab ini memandu Anda dalam menerapkan iklan di layar pembuka aplikasi AdMob di aplikasi Unity menggunakan plugin Google Mobile Ads Unity.

Jika Anda menemui masalah (bug kode, kesalahan tata bahasa, kata-kata yang tidak jelas, dan hal lainnya) saat mengerjakan codelab ini, laporkan masalah tersebut menggunakan link Laporkan kesalahan di sudut kiri bawah codelab.

Yang akan Anda pelajari

• Cara mengonfigurasi plugin Google Mobile Ads Unity
• Cara menerapkan iklan di layar pembuka aplikasi di aplikasi Unity

Yang akan Anda perlukan

• Unity 2018.4 atau yang lebih baru
• Xcode 12 atau yang lebih baru dan CocoaPods (untuk men-deploy ke iOS)

Menurut Anda, bagaimana tingkat pengalaman Anda dengan AdMob?

Pemula Menengah Mahir

2. Menyiapkan lingkungan pengembangan

Download kodenya

Download kode sumber Lihat repositori di GitHub

Setelah Anda mengunduh file zip, ekstrak isinya. Anda akan memiliki folder bernama admob-appopen-unity-main.

Atau, Anda dapat melakukan clone pada repositori GitHub dari command line:

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

Repositori berisi dua folder:

• starter: Memulai kode yang akan Anda buat di codelab ini.
• complete: Kode lengkap untuk codelab ini.

3. Menyiapkan aplikasi dan unit iklan AdMob

Karena Unity adalah SDK multi-platform, Anda perlu menambahkan aplikasi dan unit iklan untuk Android dan iOS di AdMob.

Catatan: Jika Anda ingin mengikuti codelab, dan tidak membuat sendiri aplikasi dan unit iklan baru, buka bagian Menggunakan aplikasi dan unit iklan AdMob percobaan.

Penyiapan untuk Android

Untuk menyiapkan Android, Anda perlu menambahkan aplikasi Android dan membuat unit iklan.

Menambahkan aplikasi Android

1. Di konsol AdMob, klik TAMBAHKAN APLIKASI dari menu Aplikasi.
2. Pilih Android sebagai platform. Saat ditanya Apakah aplikasi yang tercantum tersedia di app store yang didukung?, klik TIDAK.
3. Masukkan AdMob app open ad di kolom nama aplikasi.
4. Tidak perlu mengaktifkan metrik pengguna untuk menyelesaikan codelab ini. Namun, sebaiknya Anda memahami perilaku pengguna secara lebih mendetail. Klik TAMBAHKAN untuk menyelesaikan proses.

Membuat unit iklan

1. Pilih aplikasi iklan di layar pembuka aplikasi AdMob (Android) dari menu Aplikasi di konsol AdMob.
2. Klik menu Unit iklan.

Klik TAMBAHKAN UNIT IKLAN. Pilih Layar pembuka aplikasi sebagai format. Masukkan android-appopen di kolom Nama unit iklan. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Penting: Saat membuat dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan,, bukan iklan produksi langsung. Kegagalan untuk melakukannya dapat menyebabkan penangguhan akun. Untuk informasi selengkapnya tentang cara kerja iklan percobaan Mobile Ads SDK, lihat Iklan Percobaan.

Biasanya perlu waktu beberapa jam agar unit iklan baru dapat menayangkan iklan.

Jika Anda ingin segera menguji perilaku iklan, gunakan ID aplikasi dan ID unit iklan percobaan yang tercantum di tabel ID aplikasi Android/ID unit iklan dan ID aplikasi iOS/ID unit iklan.

Penyiapan untuk iOS

Untuk menyiapkan iOS, Anda perlu menambahkan aplikasi iOS dan membuat unit iklan.

Menambahkan aplikasi iOS

1. Di konsol AdMob, klik TAMBAHKAN APLIKASI dari menu Aplikasi.
2. Pilih iOS sebagai platform. Saat ditanya Apakah aplikasi yang tercantum tersedia di app store yang didukung?, klik TIDAK.
3. Masukkan AdMob app open ad di kolom nama aplikasi.
4. Tidak perlu mengaktifkan metrik pengguna untuk menyelesaikan codelab ini. Namun, sebaiknya Anda memahami perilaku pengguna secara lebih mendetail. Klik TAMBAHKAN untuk menyelesaikan proses.

Membuat unit iklan

1. Pilih aplikasi Iklan inline AdMob (iOS) dari menu Aplikasi di konsol AdMob.
2. Klik menu Unit iklan.

Klik TAMBAHKAN UNIT IKLAN. Pilih Layar pembuka aplikasi sebagai format. Masukkan ios-appopen di kolom Nama unit iklan. Klik BUAT UNIT IKLAN untuk menyelesaikan prosesnya.

Penting: Saat membuat dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan,, bukan iklan produksi langsung. Kegagalan untuk melakukannya dapat menyebabkan penangguhan akun. Untuk informasi selengkapnya tentang cara kerja iklan percobaan Mobile Ads SDK, lihat Iklan Percobaan.

Biasanya perlu waktu beberapa jam agar unit iklan baru dapat menayangkan iklan.

Jika Anda ingin segera menguji perilaku iklan, gunakan ID aplikasi dan ID unit iklan percobaan yang tercantum dalam tabel berikut.

Opsional: Menggunakan aplikasi AdMob dan unit iklan percobaan

Jika Anda ingin mengikuti codelab, bukannya membuat sendiri aplikasi dan unit iklan baru, Anda dapat menggunakan ID aplikasi AdMob dan ID unit iklan percobaan yang tercantum dalam tabel berikut.

ID aplikasi Android/ID unit iklan

Item	ID aplikasi/ID unit iklan
ID aplikasi AdMob	ca-app-pub-3940256099942544~3347511713
ID unit iklan	ca-app-pub-3940256099942544/3419835294

ID aplikasi iOS/ID unit iklan

Item	ID aplikasi/ID unit iklan
ID aplikasi AdMob	ca-app-pub-3940256099942544~1458002511
ID unit iklan	ca-app-pub-3940256099942544/5662855259

Untuk informasi selengkapnya tentang iklan percobaan, lihat dokumentasi developer Iklan percobaan Android dan Iklan percobaan iOS.

4. Menambahkan plugin Google Mobile Ads Unity

Mengintegrasikan plugin Google Mobile Ads Unity adalah langkah pertama untuk menampilkan iklan AdMob dan memperoleh pendapatan.

Mendownload plugin Mobile Ads Unity

Plugin Google Mobile Ads Unity memungkinkan developer Unity menayangkan Google Mobile Ads dengan mudah di aplikasi Android dan iOS. Plugin ini menyediakan antarmuka C# untuk meminta iklan yang digunakan oleh skrip C# di project Unity Anda.

Gunakan link di bawah untuk mendownload paket Unity untuk plugin.

Download plugin

Membuka project starter

1. Luncurkan Unity Hub.
2. Di tab Project, klik tombol ADD.
3. Buka folder tempat Anda mengekstrak kode yang didownload pada langkah Menyiapkan lingkungan pengembangan.
4. Buka folder starter.
5. Anda akan melihat project starter di daftar project. Klik project untuk membukanya di Unity Editor.

Mengimpor plugin Mobile Ads Unity

1. Di editor Unity, pilih Assets > Import Package > Custom Package dari menu.
2. Pilih GoogleMobileAds-{VERSION}.unitypackage yang Anda download pada langkah sebelumnya.
3. Pastikan semua file telah dipilih dan klik Import.

Menetapkan ID aplikasi AdMob

1. Di Unity Editor, pilih Assets > Google Mobile Ads > Settings dari menu.
2. Masukkan ID aplikasi AdMob Android dan iOS Anda di setiap kolom. Jika Anda ingin mengikuti codelab, dan tidak membuat sendiri aplikasi dan unit iklan baru, masukkan ID aplikasi AdMob percobaan sebagai berikut.

Penting: Jika tidak memasukkan ID aplikasi AdMob, aplikasi akan error.

5. Membuat class utilitas

Buat class baru bernama AppOpenAdManager di folder Scripts. Kelas ini mengelola variabel instance untuk terus melacak iklan yang dimuat dan ID unit iklan untuk setiap platform.

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.
    }
}

Memuat iklan

Pemuatan iklan dilakukan menggunakan metode AppOpenAd.LoadAd() statis. Metode pemuatan memerlukan ID unit iklan, mode ScreenOrientation, objek AdRequest, dan pengendali penyelesaian yang dipanggil saat pemuatan iklan berhasil atau gagal.

Objek AppOpenAd yang dimuat disediakan sebagai parameter di pengendali penyelesaian. Terapkan metode LoadAd() sebagai berikut.

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;
        }));
    }
}

Menampilkan iklan

Sebelum menampilkan iklan, daftarkan setiap pengendali peristiwa untuk memproses setiap peristiwa iklan.

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);
    }
}

Pertimbangkan waktu berakhir iklan

Waktu referensi iklan di layar pembuka aplikasi akan habis setelah empat jam. Iklan yang dirender lebih dari empat jam setelah waktu permintaan tidak akan lagi valid dan tidak akan menghasilkan pendapatan.

Untuk memastikan Anda tidak menampilkan iklan yang masa berlakunya sudah habis, ubah properti IsAdAvailable ke AppOpenAdManager yang memeriksa durasi iklan sejak dimuat. Kemudian, gunakan metode tersebut untuk memeriksa apakah iklan tersebut masih valid.

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. Memperbarui tampilan layar untuk memuat/menampilkan iklan

Perbarui metode Start() di class MainScene untuk memuat iklan di layar pembuka aplikasi saat tampilan layar dimulai.

Untuk mendapatkan notifikasi tentang peristiwa latar depan aplikasi, sebaiknya Anda memproses singleton AppStateEventNotifier. Dengan menerapkan delegasi AppStateEventNotifier.AppStateChanged, aplikasi Anda akan diberi tahu tentang peristiwa peluncuran dan latar depan aplikasi, serta akan dapat menampilkan iklan.

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();
        }
    }
}

Penting: AppStateEventNotifier direkomendasikan karena OnApplicationPause akan memberikan sinyal latar depan dan latar belakang yang salah saat aplikasi menampilkan iklan layar penuh.

Catatan: Iklan di layar pembuka aplikasi dapat ditampilkan saat pengguna kembali ke aplikasi dari aplikasi lain (misalnya, untuk memilih foto dari galeri) karena tindakan tersebut juga dianggap sebagai peristiwa ‘penggantian aplikasi'. Sebaiknya nonaktifkan/aktifkan iklan di layar pembuka aplikasi agar tidak ditampilkan lagi di tengah alur penggunaan yang penting.

Selesai! Buat dan jalankan project di perangkat atau emulator. Setelah aplikasi diluncurkan, tunggu beberapa detik hingga iklan dimuat sepenuhnya.

Kemudian, setelah Anda kembali ke aplikasi dari layar utama/aplikasi lain, iklan di layar pembuka aplikasi akan ditampilkan seperti di bawah ini.

7. Selesai.

Anda telah menyelesaikan codelab. Anda dapat menemukan kode lengkap untuk codelab ini di folder complete.