มุมมองแบนเนอร์คือโฆษณาแบบรูปภาพหรือแบบข้อความสี่เหลี่ยมผืนผ้าซึ่งใช้พื้นที่บนหน้าจอ ในระหว่างที่ผู้ใช้กําลังโต้ตอบกับแอป ผู้ใช้จะยังคงอยู่ในหน้าจอและรีเฟรชได้ โดยอัตโนมัติหลังจากระยะเวลาหนึ่ง หากคุณเพิ่งเริ่มใช้งานอุปกรณ์เคลื่อนที่ ก็นับว่าเป็นจุดเริ่มต้นที่ดี
คู่มือนี้จะแสดงวิธีผสานรวมมุมมองแบนเนอร์ไว้ในแอป Unity นอกจากนี้ กับข้อมูลโค้ดและวิธีการ ซึ่งจะมีข้อมูลเกี่ยวกับการกำหนดขนาด แบนเนอร์อย่างเหมาะสม และลิงก์ไปยังแหล่งข้อมูลเพิ่มเติม
ข้อกำหนดเบื้องต้น
- ทำตามคู่มือเริ่มต้นใช้งานจนจบ
ทดสอบด้วยโฆษณาทดสอบเสมอ
โค้ดตัวอย่างต่อไปนี้มีรหัสหน่วยโฆษณาที่คุณใช้เพื่อขอได้ โฆษณาทดสอบ โดยได้รับการกำหนดค่าเป็นพิเศษให้ส่งคืนโฆษณาทดสอบ โฆษณาในเวอร์ชันที่ใช้งานจริงสำหรับทุกคำขอ ทำให้ใช้งานได้อย่างปลอดภัย
อย่างไรก็ตาม หลังจากที่คุณลงทะเบียนแอปใน เว็บอินเทอร์เฟซของ Ad Manager และสร้างหน่วยโฆษณาของคุณเอง รหัสสำหรับใช้ในแอป ให้กำหนดค่าอุปกรณ์เป็นการทดสอบให้ชัดเจน อุปกรณ์ในระหว่าง ที่กำลังพัฒนา
/21775744923/example/adaptive-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 = "/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);
}
เครื่องมือสร้างสำหรับ 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 ใช้รูปแบบโฆษณาทั้งหมดเพียงเล็กน้อย