แบนเนอร์โฆษณา

มุมมองแบนเนอร์คือโฆษณาแบบรูปภาพหรือแบบข้อความสี่เหลี่ยมผืนผ้าซึ่งใช้พื้นที่บนหน้าจอ ในระหว่างที่ผู้ใช้กําลังโต้ตอบกับแอป ผู้ใช้จะยังคงอยู่ในหน้าจอและรีเฟรชได้ โดยอัตโนมัติหลังจากระยะเวลาหนึ่งๆ หากคุณเพิ่งเริ่มใช้งานอุปกรณ์เคลื่อนที่ ก็นับว่าเป็นจุดเริ่มต้นที่ดี

คู่มือนี้จะแสดงวิธีผสานรวมมุมมองแบนเนอร์ไว้ในแอป Unity นอกจากนี้ กับข้อมูลโค้ดและวิธีการ ซึ่งจะมีข้อมูลเกี่ยวกับการกำหนดขนาด แบนเนอร์อย่างเหมาะสม และลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม

ข้อกำหนดเบื้องต้น

• ทำตามคู่มือเริ่มต้นใช้งานจนจบ

ทดสอบด้วยโฆษณาทดสอบเสมอ

โค้ดตัวอย่างต่อไปนี้มีรหัสหน่วยโฆษณาที่คุณใช้เพื่อขอได้ โฆษณาทดสอบ โดยได้รับการกำหนดค่าเป็นพิเศษให้ส่งคืนโฆษณาทดสอบ โฆษณาในเวอร์ชันที่ใช้งานจริงสำหรับทุกคำขอ ทำให้ใช้งานได้อย่างปลอดภัย

อย่างไรก็ตาม หลังจากที่คุณลงทะเบียนแอปใน เว็บอินเทอร์เฟซของ Ad Manager และสร้างหน่วยโฆษณาของคุณเอง รหัสสำหรับใช้ในแอป ให้กำหนดค่าอุปกรณ์เป็นการทดสอบให้ชัดเจน อุปกรณ์ในระหว่าง ที่กำลังพัฒนา

/6499/example/banner

เริ่มต้น SDK โฆษณาในอุปกรณ์เคลื่อนที่

ก่อนที่จะโหลดโฆษณา ให้แอปของคุณเริ่มต้น SDK โฆษณาในอุปกรณ์เคลื่อนที่โดยการเรียก MobileAds.Initialize(). ขั้นตอนนี้ต้องทำเพียงครั้งเดียว และควรทำเมื่อเปิดแอป

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

หากคุณกำลังใช้สื่อกลาง ให้รอจนกว่าจะมีการเรียกกลับก่อนที่จะโหลดโฆษณาเป็น วิธีนี้จะทำให้อะแดปเตอร์สื่อกลางทั้งหมดเริ่มต้นทำงานแล้ว

ตัวอย่าง BannerView

โค้ดตัวอย่างด้านล่างแสดงรายละเอียดวิธีใช้มุมมองแบนเนอร์ ในตัวอย่างนี้ คุณ เช่น การสร้างมุมมองแบนเนอร์ AdManagerAdRequest เพื่อโหลดโฆษณาลงในมุมมองแบนเนอร์ และ จากนั้นจึงขยายขีดความสามารถโดยการจัดการเหตุการณ์ในวงจร

สร้างมุมมองแบนเนอร์

ขั้นตอนแรกในการใช้มุมมองแบนเนอร์คือการสร้างอินสแตนซ์ของมุมมองแบนเนอร์ ในสคริปต์ C# ซึ่งแนบอยู่กับ GameObject

  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/6499/example/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);
  }

เครื่องมือสร้างสำหรับ AdManagerBannerView มีรายการดังต่อไปนี้ ได้แก่

• adUnitId: รหัสหน่วยโฆษณาที่ AdManagerBannerView ควรโหลดโฆษณา
• AdSize: ขนาดโฆษณาที่คุณต้องการใช้ ดูขนาดแบนเนอร์ เพื่อดูรายละเอียด
• AdPosition: ตำแหน่งที่ควรวางมุมมองแบนเนอร์ enum ของ AdPosition จะแสดงค่าอันดับโฆษณาที่ถูกต้อง

สังเกตวิธีการใช้หน่วยโฆษณาที่แตกต่างกันตามแพลตฟอร์ม คุณจำเป็นต้องใช้ หน่วยโฆษณา iOS สำหรับการสร้างคำขอโฆษณาบน iOS และหน่วยโฆษณา Android สำหรับสร้าง คำขอบน Android

(ไม่บังคับ) สร้างมุมมองแบนเนอร์โดยมีตำแหน่งที่กำหนดเอง

เพื่อให้ควบคุมได้มากขึ้นว่า AdManagerBannerView อยู่ที่ไหน ปรากฏบนหน้าจอมากกว่าที่ค่า AdPosition เสนอ ให้ใช้ตัวสร้าง ที่มีพิกัด x และ y เป็นพารามิเตอร์:

// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);

มุมซ้ายบนของ AdManagerBannerView คือ อยู่ที่ค่า x และ y ที่ส่งผ่านไปยังตัวสร้าง โดยที่ต้นทางคือ ที่ด้านบนซ้ายของหน้าจอ

(ไม่บังคับ) สร้างมุมมองแบนเนอร์ตามขนาดที่กำหนดเอง

นอกจากการใช้ค่าคงที่ AdSize แล้ว คุณยังระบุขนาดที่กำหนดเองได้อีกด้วย สำหรับโฆษณาของคุณ

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

(ไม่บังคับ) โฆษณาหลายขนาด

Ad Manager ให้คุณระบุโฆษณาหลายขนาดที่อาจมีสิทธิ์แสดง ใน AdManagerBannerView ก่อนใช้ฟีเจอร์นี้ใน SDK ให้สร้าง รายการโฆษณาที่กำหนดเป้าหมายหน่วยโฆษณาเดียวกันที่เชื่อมโยงกับครีเอทีฟโฆษณาขนาดแตกต่างกัน

ในแอป ให้ส่งพารามิเตอร์ AdSize หลายรายการไปยัง ValidAdSizes ดังนี้

var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};

หาก AdManagerAdView เปลี่ยนขนาดเมื่อรีเฟรช เลย์เอาต์ควรจะแสดงได้ จะปรับเป็นขนาดใหม่โดยอัตโนมัติ AdManagerAdView มีค่าเริ่มต้นเป็นขนาด ในพารามิเตอร์แรกจนกว่าโฆษณาถัดไปจะกลับมา

โหลดโฆษณาแบนเนอร์

หลังจากติดตั้ง AdManagerBannerView แล้ว ให้ดำเนินการโหลดต่อ โฆษณาที่มีเมธอด LoadAd() ใน AdManagerBannerView ต้องใช้พารามิเตอร์ การคงไว้ชั่วคราว ข้อมูลรันไทม์ เช่น ข้อมูลการกำหนดเป้าหมาย ป้ายกำกับการยกเว้น และผู้เผยแพร่โฆษณา รหัสที่ระบุ

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

ฟังเหตุการณ์ในมุมมองแบนเนอร์

หากต้องการปรับแต่งลักษณะการทำงานของโฆษณา คุณสามารถดึงดูดเหตุการณ์ต่างๆ ได้ใน วงจรโฆษณา เช่น การโหลด การเปิด หรือปิด เพื่อฟังรายการเหล่านี้ ให้ลงทะเบียนผู้รับมอบสิทธิ์

/// <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.");
    };
}

ทำลายมุมมองแบนเนอร์

เมื่อใช้มุมมองแบนเนอร์เสร็จแล้ว อย่าลืมเรียก Destroy() เพื่อเผยแพร่ ที่ไม่ซับซ้อน

/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyAd()
{
    if (_bannerView != null)
    {
        Debug.Log("Destroying banner view.");
        _bannerView.Destroy();
        _bannerView = null;
    }
}

เท่านี้ก็เรียบร้อย ตอนนี้แอปของคุณพร้อมแสดงโฆษณาแบนเนอร์แล้ว

ขนาดของแบนเนอร์

ตารางด้านล่างแสดงรายการขนาดแบนเนอร์มาตรฐาน

ขนาดเป็นหน่วย dp (กว้างxสูง)	คำอธิบาย	ความพร้อมใช้งาน	ค่าคงที่ AdSize
320x50	แบนเนอร์มาตรฐาน	โทรศัพท์และแท็บเล็ต	BANNER
320x100	แบนเนอร์ขนาดใหญ่	โทรศัพท์และแท็บเล็ต	LARGE_BANNER
300x250	สี่เหลี่ยมผืนผ้ากลาง IAB	โทรศัพท์และแท็บเล็ต	MEDIUM_RECTANGLE
468x60	แบนเนอร์ IAB ขนาดเต็ม	แท็บเล็ต	FULL_BANNER
728x90	ลีดเดอร์บอร์ด IAB	แท็บเล็ต	LEADERBOARD
ความกว้างที่ระบุ x ความสูงแบบปรับอัตโนมัติ	แบนเนอร์แบบปรับขนาดได้	โทรศัพท์และแท็บเล็ต	ไม่มี
ความกว้างของหน้าจอ x 32|50|90	แบนเนอร์อัจฉริยะ	โทรศัพท์และแท็บเล็ต	SMART_BANNER
ดูข้อมูลเพิ่มเติมเกี่ยวกับแบนเนอร์แบบปรับขนาดได้ ซึ่งใช้แทนแบนเนอร์อัจฉริยะ

เหตุการณ์ของแอป

กิจกรรมของแอปช่วยให้คุณสร้างโฆษณาที่ส่งข้อความไปยังโค้ดของแอปได้ แอป สามารถดำเนินการโดยอิงจากข้อความเหล่านี้ได้

คุณฟังเหตุการณ์ในแอปที่เจาะจงของ Ad Manager ได้โดยใช้ AppEvent กิจกรรมเหล่านี้ อาจเกิดขึ้นเมื่อใดก็ได้ในระหว่างวงจรของโฆษณา แม้กระทั่งก่อนที่ระบบจะเรียกใช้การโหลด

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

OnAppEventReceived เพิ่มขึ้นเมื่อเกิดเหตุการณ์ของแอปในโฆษณา นี่คือ ตัวอย่างวิธีจัดการเหตุการณ์นี้ในโค้ดของคุณ

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

นี่เป็นตัวอย่างที่แสดงวิธีเปลี่ยนสีพื้นหลังของแอป ขึ้นอยู่กับเหตุการณ์ของแอปที่มีชื่อสี ดังนี้

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
  if (args.Name == "color")
  {
    Color color;
    if (ColorUtility.TryParseColor(arg.Value, out color))
    {
      gameObject.GetComponent<Renderer>().material.color = color;
    }
  }
};

และนี่คือครีเอทีฟโฆษณาที่เกี่ยวข้องที่ส่งเหตุการณ์ของแอปสี

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

แหล่งข้อมูลเพิ่มเติม

• ตัวอย่างของ HelloWorld ใช้รูปแบบโฆษณาทั้งหมดเพียงเล็กน้อย