Wyświetlenia banera to prostokątne reklamy graficzne lub tekstowe, które zajmują miejsce na ekranie. Pozostają na ekranie, gdy użytkownicy wchodzą w interakcję z aplikacją, i mogą być automatycznie odświeżane po upływie określonego czasu. Jeśli dopiero zaczynasz korzystać z urządzeń mobilnych reklamy, to dobry punkt wyjścia.
Z tego przewodnika dowiesz się, jak zintegrować wyświetlenia banerów w aplikacji Unity. Oprócz fragmentów kodu i instrukcji zawiera on też informacje o prawidłowym rozmiarze banerów oraz linki do dodatkowych materiałów.
Wymagania wstępne
- Zapoznaj się z przewodnikiem dla początkujących.
Zawsze korzystaj z reklam testowych
Ten przykładowy kod zawiera identyfikator jednostki reklamowej, którego możesz użyć do przesłania żądania reklam testowych. Został on skonfigurowany tak, aby wyświetlać reklamy testowe, a nie aby tworzyć bezpieczne reklamy dla każdego żądania.
Jeśli jednak zarejestrujesz aplikację w Interfejs internetowy Ad Managera i utworzona własną jednostkę reklamową Identyfikatory do wykorzystania w aplikacji; jawnie skonfiguruj urządzenie jako testowe urządzenia w trakcie w Google Cloud.
/21775744923/example/adaptive-banner
Zainicjowanie pakietu SDK do reklam mobilnych
Przed wczytaniem reklam poproś aplikację o zainicjowanie pakietu SDK do reklam mobilnych, wywołując
MobileAds.Initialize()
Wystarczy to zrobić tylko raz, najlepiej przy uruchomieniu aplikacji.
using GoogleMobileAds;
using GoogleMobileAds.Api;
public class GoogleMobileAdsDemoScript : MonoBehaviour
{
public void Start()
{
// Initialize the Google Mobile Ads SDK.
MobileAds.Initialize((InitializationStatus initStatus) =>
{
// This callback is called once the MobileAds SDK is initialized.
});
}
}
Jeśli korzystasz z zapośredniczenia, przed wczytaniem reklam zaczekaj na wywołanie zwrotne, aby mieć pewność, że wszystkie adaptery zapośredniczenia są zainicjowane.
Przykład BannerView
Poniższy przykładowy kod zawiera szczegółowe informacje o korzystaniu z widoku banera. W tym przykładzie
utwórz instancję widoku banera, użyj tagu
AdManagerAdRequest
, aby wczytać reklamę w widoku banera, oraz
a potem rozszerz jego możliwości przez obsługę zdarzeń cyklu życia.
Tworzenie widoku banera
Pierwszym krokiem przy korzystaniu z widoku banera jest utworzenie instancji widoku banera.
w skrypcie C# dołączonym do interfejsu GameObject
.
// This ad unit is configured to always serve test ads.
private string _adUnitId = "/21775744923/example/adaptive-banner";
AdManagerBannerView _bannerView;
/// <summary>
/// Creates a 320x50 banner view at top of the screen.
/// </summary>
public void CreateBannerView()
{
Debug.Log("Creating banner view");
// If we already have a banner, destroy the old one.
if (_bannerView != null)
{
DestroyAd();
}
// Create a 320x50 banner at top of the screen
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
}
Konstruktor obiektu AdManagerBannerView
ma ten element
parametry:
adUnitId
: identyfikator jednostki reklamowej, z której pochodzi parametr AplikacjaAdManagerBannerView
powinna wczytać reklamy.AdSize
: rozmiar reklamy, którego chcesz użyć. Więcej informacji znajdziesz w sekcji Rozmiary banerów.AdPosition
: pozycja, w której mają znajdować się banery. WyliczeniowaAdPosition
zawiera listę prawidłowych wartości pozycji reklamy.
Zwróć uwagę, jak różne jednostki reklamowe są używane w zależności od platformy. Musisz użyć Jednostkę reklamową iOS do wysyłania żądań reklamy w systemie iOS oraz jednostkę na Androida do tworzenia żądań na Androidzie.
(Opcjonalnie) Tworzenie widoku banera z pozycją niestandardową
Aby uzyskać większą kontrolę nad tym, gdzie AdManagerBannerView
jest umieszczany na ekranie, niż to oferują wartości AdPosition
, użyj konstruktora, który ma współrzędne x i y jako parametry:
// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);
W lewym górnym rogu AdManagerBannerView
jest
jest umieszczone na wartościach x i y przekazywanych do konstruktora, gdzie początek
w lewym górnym rogu ekranu.
(Opcjonalnie) Tworzenie widoku banera o niestandardowym rozmiarze
Oprócz korzystania ze stałej AdSize
możesz też określić rozmiar niestandardowy
dla reklamy:
// Use the AdSize argument to set a custom size for the ad.
AdSize adSize = new AdSize(250, 250);
_bannerView = new AdManagerBannerView(_adUnitId, adSize, AdPosition.Bottom);
(Opcjonalnie) Wiele rozmiarów reklam
Ad Manager umożliwia określenie wielu rozmiarów reklam odpowiednich do wyświetlania
w: AdManagerBannerView
. Zanim zaimplementujesz tę funkcję w pakiecie SDK, utwórz
element zamówienia kierowany na te same jednostki reklamowe powiązane z kreacjami o różnych rozmiarach.
W aplikacji przekaż do funkcji ValidAdSizes
wiele parametrów AdSize
:
var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};
Jeśli AdManagerAdView
zmieni rozmiar po odświeżeniu, układ powinien mieć taką możliwość
automatycznie dostosują się do nowego rozmiaru. Domyślnym rozmiarem jest AdManagerAdView
przekazywane w pierwszym parametrze aż do powrotu następnej reklamy.
Wczytywanie banera reklamowego
Gdy AdManagerBannerView
będzie na swoim miejscu, wczytaj
reklamę z metodą LoadAd()
w AdManagerBannerView
zajęcia. Przyjmuje parametr , który przechowuje
informacje o czasie działania, takie jak informacje o kierowaniu, etykiety wykluczeń czy wydawca
podany identyfikator.
/// <summary>
/// Creates the banner view and loads a banner ad.
/// </summary>
public void LoadAd()
{
// create an instance of a banner view first.
if(_bannerView == null)
{
CreateAdManagerBannerView();
}
// create our request used to load the ad.
var adRequest = new AdManagerAdRequest();
// send the request to load the ad.
Debug.Log("Loading banner ad.");
_bannerView.LoadAd(adRequest);
}
Nasłuchiwanie zdarzeń wyświetlenia banera
Aby dostosować działanie reklamy, możesz podłączyć ją do wielu zdarzeń w cyklu życia reklamy, np. wczytywania, otwierania lub zamykania. Aby wsłuchać się w te utwory , zarejestruj przedstawiciela:
/// <summary>
/// listen to events the banner view may raise.
/// </summary>
private void ListenToAdEvents()
{
// Raised when an ad is loaded into the banner view.
_bannerView.OnBannerAdLoaded += () =>
{
Debug.Log("Banner view loaded an ad with response : "
+ _bannerView.GetResponseInfo());
};
// Raised when an ad fails to load into the banner view.
_bannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
Debug.LogError("Banner view failed to load an ad with error : "
+ error);
};
// Raised when the ad is estimated to have earned money.
_bannerView.OnAdPaid += (AdValue adValue) =>
{
Debug.Log(String.Format("Banner view paid {0} {1}.",
adValue.Value,
adValue.CurrencyCode));
};
// Raised when an impression is recorded for an ad.
_bannerView.OnAdImpressionRecorded += () =>
{
Debug.Log("Banner view recorded an impression.");
};
// Raised when a click is recorded for an ad.
_bannerView.OnAdClicked += () =>
{
Debug.Log("Banner view was clicked.");
};
// Raised when an ad opened full screen content.
_bannerView.OnAdFullScreenContentOpened += () =>
{
Debug.Log("Banner view full screen content opened.");
};
// Raised when the ad closed full screen content.
_bannerView.OnAdFullScreenContentClosed += () =>
{
Debug.Log("Banner view full screen content closed.");
};
}
Zniszcz widok banera
Gdy skończysz korzystać z widoku banera, wywołaj Destroy()
, aby zwolnić
i zasobami Google Cloud.
/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
if (_bannerView != null)
{
Debug.Log("Destroying banner view.");
_bannerView.Destroy();
_bannerView = null;
}
}
Znakomicie. Twoja aplikacja jest już gotowa do wyświetlania banerów reklamowych.
Rozmiary banerów
W tabeli poniżej znajdziesz standardowe rozmiary banerów.
Rozmiar w dp (szer.xwys.) | Opis | Dostępność | Stała rozmiar reklamy |
---|---|---|---|
320 x 50 | Standardowy baner | Telefony i tablety | BANNER |
320 x 100 | Duży baner | Telefony i tablety | LARGE_BANNER |
300 x 250 | Średni prostokąt IAB | Telefony i tablety | MEDIUM_RECTANGLE |
468 x 60 | Baner IAB w pełnym rozmiarze | Tablety | FULL_BANNER |
728 x 90 | Tabela wyników IAB | Tablety | LEADERBOARD |
Podana szerokość x Wysokość adaptacyjna | Baner adaptacyjny | Telefony i tablety | Nie dotyczy |
Szerokość ekranu x 32|50|90 | Baner inteligentny | Telefony i tablety | SMART_BANNER |
Dowiedz się więcej o banerach adaptacyjnych, które mają zastąpić inteligentne banery. |
Zdarzenia w aplikacjach
Zdarzenia w aplikacji pozwalają tworzyć reklamy, które mogą wysyłać komunikaty do kodu aplikacji. Aplikacja może następnie podejmować działania na podstawie tych wiadomości.
Możesz nasłuchiwać zdarzeń Ad Managera w aplikacjach za pomocą narzędzia AppEvent
. Te wydarzenia
może wystąpić w dowolnym momencie cyklu życia reklamy, nawet przed wywołaniem wczytywania.
namespace GoogleMobileAds.Api.AdManager;
/// The App event message sent from the ad.
public class AppEvent
{
// Name of the app event.
string Name;
// Argument passed from the app event.
string Value;
}
Wartość OnAppEventReceived
jest podwyższana, gdy w reklamie wystąpi zdarzenie w aplikacji. Oto
przykład obsługi tego zdarzenia w kodzie:
_bannerview.OnAppEventReceived += (AppEvent args) =>
{
Debug.Log($"Received app event from the ad: {args.Name}, {args.Value}.");
};
Oto przykład, który pokazuje, jak zmienić kolor tła aplikacji w zależności od zdarzenia w aplikacji o nazwie koloru:
_bannerview.OnAppEventReceived += (AppEvent args) =>
{
if (args.Name == "color")
{
Color color;
if (ColorUtility.TryParseColor(arg.Value, out color))
{
gameObject.GetComponent<Renderer>().material.color = color;
}
}
};
A oto odpowiednia kreacja wysyłająca zdarzenie w aplikacji koloru:
<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: 0px;
left: 0px;
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>
Dodatkowe materiały
- Przykład HelloWorld: Minimalne wdrożenie wszystkich formatów reklam.