Dodawanie reklamy AdMob wyświetlanej przy otwarciu aplikacji do aplikacji na platformie Unity

1. Wprowadzenie

W tym Codelabs wdrożysz reklamę wyświetlaną przy otwarciu aplikacji w aplikacji Unity.

Co utworzysz

W tym samouczku dowiesz się, jak wdrożyć reklamę wyświetlaną przy otwarciu aplikacji w aplikacji Unity za pomocą wtyczki do reklam mobilnych Google dla Unity.

6338548c3f73e7cf.gif

Jeśli podczas wykonywania tego laboratorium napotkasz jakiekolwiek problemy (błędy w kodzie, błędy gramatyczne, niejasne sformułowania itp.), zgłoś je, korzystając z linku Zgłoś błąd w lewym dolnym rogu laboratorium.

Czego się nauczysz

  • Jak skonfigurować wtyczkę reklam mobilnych Google dla środowiska Unity
  • Jak wdrożyć reklamę wyświetlaną przy otwarciu aplikacji w aplikacji Unity

Czego potrzebujesz

  • Unity w wersji 2018.4 lub nowszej
  • Xcode 12 lub nowsza wersja i CocoaPods (do wdrażania na iOS)

Jak oceniasz swoje doświadczenie z AdMob?

Początkujący Średnio zaawansowany Zaawansowany

2. Konfigurowanie środowiska programistycznego

Pobieranie kodu

Po pobraniu pliku ZIP wyodrębnij jego zawartość. Zobaczysz folder o nazwie admob-appopen-unity-main.

Możesz też sklonować repozytorium GitHub z poziomu wiersza poleceń:

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

Repozytorium zawiera 2 foldery:

  • android_studio_folder.png starter:kod początkowy, który będziesz rozwijać w ramach tych ćwiczeń z programowania.
  • android_studio_folder.png complete:ukończony kod do tych ćwiczeń z programowania.

3. Konfigurowanie aplikacji w AdMob i jednostek reklamowych

Unity to pakiet SDK na wiele platform, dlatego w AdMob musisz dodać aplikację i jednostki reklamowe zarówno na Androida, jak i na iOS.

Konfigurowanie na Androidzie

Aby skonfigurować aplikację na Androida, musisz dodać aplikację na Androida i utworzyć jednostki reklamowe.

Dodawanie aplikacji na Androida

  1. W konsoli AdMob w menu Aplikacje kliknij DODAJ APLIKACJĘ.
  2. Jako platformę wybierz Android. Gdy pojawi się pytanie Czy aplikacja jest dostępna w obsługiwanym sklepie z aplikacjami?, kliknij NIE.
  3. W polu nazwy aplikacji wpisz AdMob app open ad.
  4. Włączenie danych o użytkownikach nie jest konieczne do ukończenia tego ćwiczenia. Zalecamy jednak, aby to zrobić, ponieważ pozwala to lepiej poznać zachowania użytkowników. Aby ukończyć proces, kliknij DODAJ.

Tworzenie jednostki reklamowej

  1. W menu Aplikacje w konsoli AdMob wybierz aplikację Reklama wyświetlana przy otwarciu aplikacji w AdMob (Android).
  2. Kliknij menu Jednostki reklamowe.

  1. Kliknij DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Przy otwarciu aplikacji.
  3. W polu Nazwa jednostki reklamowej wpisz android-appopen.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Zanim nowa jednostka reklamowa zacznie wyświetlać reklamy, zwykle mija kilka godzin.

Jeśli chcesz od razu przetestować działanie reklamy, użyj identyfikatorów testowych aplikacji i jednostek reklamowych podanych w tabelach identyfikatorów aplikacji i jednostek reklamowych na Androida oraz iOS.

Konfigurowanie na urządzeniu z iOS

Aby skonfigurować usługę pod kątem iOS, musisz dodać aplikację na iOS i utworzyć jednostki reklamowe.

Dodawanie aplikacji na iOS

  1. W konsoli AdMob w menu Aplikacje kliknij DODAJ APLIKACJĘ.
  2. Jako platformę wybierz iOS. Gdy pojawi się pytanie Czy aplikacja jest dostępna w obsługiwanym sklepie z aplikacjami?, kliknij NIE.
  3. W polu nazwy aplikacji wpisz AdMob app open ad.
  4. Włączenie danych o użytkownikach nie jest konieczne do ukończenia tego ćwiczenia. Zalecamy jednak, aby to zrobić, ponieważ pozwala to lepiej poznać zachowania użytkowników. Aby ukończyć proces, kliknij DODAJ.

Tworzenie jednostki reklamowej

  1. Wybierz aplikację AdMob – reklamy w tekście (iOS) z menu Aplikacje w konsoli AdMob.
  2. Kliknij menu Jednostki reklamowe.

  1. Kliknij DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Przy otwarciu aplikacji.
  3. W polu Nazwa jednostki reklamowej wpisz ios-appopen.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Zanim nowa jednostka reklamowa zacznie wyświetlać reklamy, zwykle mija kilka godzin.

Jeśli chcesz od razu przetestować działanie reklamy, użyj identyfikatora aplikacji testowej i identyfikatorów jednostek reklamowych podanych w tabeli poniżej.

Opcjonalnie: użyj testowej aplikacji w AdMob i jednostek reklamowych

Jeśli chcesz wykonać ćwiczenie z programowania zamiast tworzyć własną aplikację i jednostki reklamowe, możesz użyć testowych identyfikatorów aplikacji w AdMob i jednostek reklamowych podanych w tabelach poniżej.

Identyfikator aplikacji na Androida lub jednostki reklamowej

Produkt

Identyfikator aplikacji lub jednostki reklamowej

Identyfikator aplikacji w AdMob

ca-app-pub-3940256099942544~3347511713

Identyfikator jednostki reklamowej

ca-app-pub-3940256099942544/3419835294

Identyfikator aplikacji na iOS lub identyfikator jednostki reklamowej

Produkt

Identyfikator aplikacji lub jednostki reklamowej

Identyfikator aplikacji w AdMob

ca-app-pub-3940256099942544~1458002511

Identyfikator jednostki reklamowej

ca-app-pub-3940256099942544/5662855259

Więcej informacji o reklamach testowych znajdziesz w dokumentacji dla deweloperów dotyczącej reklam testowych na Androidareklam testowych na iOS.

4. Dodawanie wtyczki reklam mobilnych Google dla środowiska Unity

Integracja wtyczki reklam mobilnych Google dla środowiska Unity to pierwszy krok do wyświetlania reklam AdMob i uzyskiwania przychodów.

Pobieranie wtyczki reklam mobilnych dla środowiska Unity

Wtyczka reklam mobilnych Google dla środowiska Unity umożliwia programistom Unity łatwe wyświetlanie reklam mobilnych Google w aplikacjach na Androida i iOS. Wtyczka udostępnia interfejs C# do wysyłania żądań reklam, który jest używany przez skrypty C# w projekcie Unity.

Kliknij link poniżej, aby pobrać pakiet Unity wtyczki.

Otwórz projekt początkowy

  1. Uruchom Unity Hub.
  2. Na karcie Projekty kliknij przycisk DODAJ.
  3. Otwórz folder, w którym w kroku Konfigurowanie środowiska programistycznego wyodrębniono pobrany kod.
  4. Otwórz folder starter.
  5. Na liście projektów zobaczysz projekt startowy. Kliknij projekt, aby otworzyć go w edytorze Unity.

Importowanie wtyczki reklam mobilnych dla środowiska Unity

  1. W edytorze Unity wybierz z menu Assets > Import Package > Custom Package (Zasoby > Importuj pakiet > Własny pakiet).
  2. Wybierz plik GoogleMobileAds-{VERSION}.unitypackage pobrany w poprzednim kroku.
  3. Upewnij się, że wszystkie pliki są zaznaczone, i kliknij Importuj.

Ustawianie identyfikatora aplikacji w AdMob

  1. W edytorze Unity wybierz z menu Assets (Zasoby) > Google Mobile Ads (Reklamy mobilne Google) > Settings (Ustawienia).
  2. W odpowiednich polach wpisz identyfikator aplikacji w AdMob na Androida i iOS. Jeśli chcesz wykonać ćwiczenie z programowania zamiast tworzyć nową aplikację w AdMob i jednostki reklamowe, wpisz testowy identyfikator aplikacji w AdMob w ten sposób:

8890521e199b1090.png

5. Tworzenie klasy narzędziowej

Utwórz nową klasę o nazwie AppOpenAdManager w folderze Skrypty. Ta klasa zarządza zmienną instancji, aby śledzić wczytaną reklamę i identyfikator jednostki reklamowej na każdej platformie.

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

Wczytywanie reklamy

Reklamę wczytuje się za pomocą statycznej metody AppOpenAd.LoadAd(). Metoda wczytywania wymaga identyfikatora jednostki reklamowej, trybu ScreenOrientation, obiektu AdRequest i procedury obsługi zakończenia, która jest wywoływana, gdy wczytywanie reklamy się powiedzie lub nie.

Wczytany obiekt AppOpenAd jest podawany jako parametr w procedurze obsługi zakończenia. Zaimplementuj metodę LoadAd() w ten sposób:

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

Wyświetl reklamę

Przed wyświetleniem reklamy zarejestruj każdy moduł obsługi zdarzeń, aby nasłuchiwać każdego zdarzenia reklamy.

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

Uwzględnij czas wygaśnięcia reklamy

Odniesienia do reklam przy otwarciu aplikacji wygasają po 4 godzinach. Reklamy renderowane po upływie 4 godzin od żądania nie będą ważne i mogą nie wygenerować przychodów.

Aby uniknąć wyświetlania wygasłych reklam, zmodyfikuj właściwość IsAdAvailable na AppOpenAdManager, która sprawdza, ile czasu minęło od wczytania reklamy. Następnie użyj tej metody, aby sprawdzić, czy reklama jest nadal ważna.

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. Zaktualizuj scenę, aby wczytać lub wyświetlić reklamę

Zaktualizuj metodę Start() w klasie MainScene, aby wczytywać reklamę wyświetlaną przy otwarciu aplikacji podczas uruchamiania sceny.

Aby otrzymywać powiadomienia o zdarzeniach przejścia aplikacji na pierwszy plan, zalecamy nasłuchiwanie pojedynczego obiektu AppStateEventNotifier. Po wdrożeniu AppStateEventNotifier.AppStateChanged delegata aplikacja będzie otrzymywać powiadomienia o uruchomieniu i przejściu na pierwszy plan, dzięki czemu będzie mogła wyświetlać reklamy.

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

To wszystko. Skompiluj i uruchom projekt na urządzeniu lub w emulatorze. Po uruchomieniu aplikacji odczekaj kilka sekund, aż reklama zostanie w pełni wczytana.

Następnie, gdy wrócisz do aplikacji z innych aplikacji lub ekranu głównego, wyświetli się reklama wyświetlana przy otwarciu aplikacji, jak poniżej.

6338548c3f73e7cf.gif

7. Wszystko gotowe

To już koniec samouczka. Gotowy kod do tego ćwiczenia znajdziesz w folderze android_studio_folder.pngcomplete.