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

เลือกแพลตฟอร์ม: Android iOS Unity Flutter

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

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

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

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

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

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

/21775744923/example/adaptive-banner

เริ่มต้น Mobile Ads SDK

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

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

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

ตัวอย่าง BannerView

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

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

ขั้นตอนแรกในการใช้มุมมองแบนเนอร์คือการสร้างอินสแตนซ์ของมุมมองแบนเนอร์

// Create a 320x50 banner at top of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

แทนที่ AD_UNIT_ID ด้วยรหัสหน่วยโฆษณา

ตัวสร้างสำหรับ AdManagerBannerView มีพารามิเตอร์ต่อไปนี้

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

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

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

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

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

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

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

// Create a 250x250 banner at the bottom of the screen.
AdSize adSize = new AdSize(250, 250);
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", adSize, AdPosition.Bottom);

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

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

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

// Create a 250x250 banner at the bottom of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

// Add multiple ad sizes.
adManagerBannerView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner,
    new AdSize(120, 20),
    new AdSize(250, 250),
};

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

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

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

หากต้องการโหลดโฆษณา ให้สร้าง AdManagerAdRequest แล้วส่งไปยังเมธอด LoadAd()

// Send a request to load an ad into the banner view.
adManagerBannerView.LoadAd(new AdManagerAdRequest());

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

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

adManagerBannerView.OnBannerAdLoaded += () =>
{
    // Raised when an ad is loaded into the banner view.
};
adManagerBannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
    // Raised when an ad fails to load into the banner view.
};
adManagerBannerView.OnAdPaid += (AdValue adValue) =>
{
    // Raised when the ad is estimated to have earned money.
};
adManagerBannerView.OnAdImpressionRecorded += () =>
{
    // Raised when an impression is recorded for an ad.
};
adManagerBannerView.OnAdClicked += () =>
{
    // Raised when a click is recorded for an ad.
};
adManagerBannerView.OnAdFullScreenContentOpened += () =>
{
    // Raised when an ad opened full screen content.
};
adManagerBannerView.OnAdFullScreenContentClosed += () =>
{
    // Raised when the ad closed full screen content.
};

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

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

if (adManagerBannerView != null)
{
    // Always destroy the banner view when no longer needed.
    adManagerBannerView.Destroy();
    adManagerBannerView = null;
}

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

รีเฟรชโฆษณา

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

ตารางต่อไปนี้แสดงขนาดแบนเนอร์มาตรฐาน

ขนาดในหน่วย 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 เหตุการณ์เหล่านี้ อาจเกิดขึ้นได้ทุกเมื่อในวงจรโฆษณา แม้กระทั่งก่อนที่จะเรียกใช้การโหลด

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

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

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

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    if (args.Name == "color")
    {
        Color color;
        if (ColorUtility.TryParseHtmlString(args.Data, out color))
        {
            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: 0;
      left: 0;
      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>

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