สไตล์โฆษณาเนทีฟ

การตั้งค่าสไตล์โฆษณาเนทีฟ ทำให้ Google Ad Manager สามารถจัดการการแสดงผลโฆษณาเนทีฟตาม สไตล์ที่คุณระบุภายในผลิตภัณฑ์ ขั้นแรก ให้ระบุขนาดและการกำหนดเป้าหมาย จากนั้นเพิ่ม HTML, CSS และ JavaScript เพื่อกำหนดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณา และสร้างการแสดงผลที่มีคุณภาพ บนทุกหน้าจอ คุณไม่จำเป็นต้องดำเนินการ การแสดงภาพใดๆ Ad Manager จะใช้สไตล์โฆษณาเนทีฟที่เหมาะสมโดยอัตโนมัติ สำหรับปลายทาง สไตล์โฆษณาเนทีฟจะนำมาใช้เช่นเดียวกับโฆษณาแบนเนอร์ โดยใช้ GAMBannerView ซึ่งสามารถใช้กับโฆษณาแบบคงที่ กำหนดขนาดล่วงหน้าหรือขนาดโฆษณาแบบไหลที่กำหนดขณะรันไทม์

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

  • SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เวอร์ชัน 7.14.0 ขึ้นไป

คู่มือนี้ประกอบด้วยความรู้บางส่วนในการใช้งาน SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google ลองอ่านดู คู่มือเริ่มต้นใช้งาน

ขนาดคงที่

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

  1. สร้างรายการโฆษณาใน UI ของ Ad Manager และเลือกหนึ่งใน ขนาดที่กำหนดไว้ล่วงหน้าจากเมนู Size แบบเลื่อนลง

  2. ในเครื่องมือสร้างอินเทอร์เฟซ ให้ตั้งค่าความกว้างและความสูงของ GAMBannerView ให้ตรงกับขนาดที่กำหนดไว้ล่วงหน้าที่เลือกไว้ในขั้นตอนที่ 1 คุณสามารถดู รายการขนาดและค่าคงที่ GADAdSize ที่สอดคล้องกันในแบนเนอร์ ขนาด

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

ขนาดแบบไหล

ในบางกรณี ขนาดคงที่อาจไม่สมเหตุสมผล ตัวอย่างเช่น คุณอาจ ต้องการความกว้างของโฆษณาให้ตรงกับเนื้อหาแอป แต่ต้องการความสูงของโฆษณา เพื่อปรับให้เข้ากับเนื้อหาโฆษณา วิธีจัดการเคสนี้ คุณสามารถระบุ Fluid เป็นขนาดโฆษณาใน UI ของ Ad Manager ซึ่ง ระบุว่าขนาดของโฆษณาจะกำหนดขณะรันไทม์ในแอป SDK มีค่าคงที่พิเศษ GADAdSize kGADAdSizeFluid ในการจัดการเคสนี้ ความสูงของขนาดโฆษณาแบบไหลจะกำหนดแบบไดนามิก ตามความกว้างที่ผู้เผยแพร่กำหนด ซึ่งทำให้ GAMBannerView เพื่อปรับความสูงให้ตรงกับความสูงของครีเอทีฟโฆษณา

คำขอแบบไหล

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

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

การใช้การสร้างขนาดเดียวและของเหลวหลายขนาด คำขอนั้นคล้ายกันมาก ความแตกต่างเพียงอย่างเดียวคือสำหรับหลายขนาด คุณตั้งค่าพร็อพเพอร์ตี้ validAdSizes เพื่อระบุโฆษณา ขนาดที่ถูกต้องสำหรับคำขอโฆษณามีดังนี้

Swift

bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
                           NSValueFromGADAdSize(kGADAdSizeBanner)]

Objective-C

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

ลักษณะการติดตั้งทั้งหมดในโค้ดจะมีลักษณะดังนี้

Swift

var bannerView: GAMBannerView!

override func viewDidLoad() {
  super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = GAMBannerView(adSize: kGADAdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
  //                            NSValueFromGADAdSize(kGADAdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(GAMRequest())
}

Objective-C

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

หากต้องการดูตัวอย่างการใช้งานขนาดโฆษณาแบบไหลของ Ad Manager ดาวน์โหลดแอปเดโม iOS API ใน Swift หรือ Objective-C

ดาวน์โหลดการสาธิต API

โปรโตคอล GADAdSizeDelegate

คุณอาจต้องการทราบความสูงของแบนเนอร์ก่อนที่ขนาดโฆษณาจะเปลี่ยนแปลง การติดต่อกลับของ adView:willChangeAdSizeTo: จะแจ้งเตือนผู้รับมอบสิทธิ์ก่อน มุมมองแบนเนอร์จะเปลี่ยนเป็น GADAdSize ใหม่ หากต้องการรับการแจ้งเตือนก่อน เมื่อมุมมองแบนเนอร์เปลี่ยนเป็นขนาดโฆษณาใหม่ คลาสของคุณจะต้องเป็นไปตาม โปรโตคอล GADAdSizeDelegate

ต่อไปนี้คือตัวอย่างการใช้งาน adView:willChangeAdSizeTo: Callback ที่แสดงวิธีรับความกว้างและความสูงใหม่ของแบนเนอร์

Swift

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: GADBannerView, willChangeAdSizeTo adSize: GADAdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

Objective-C

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}