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

การตั้งค่าสไตล์โฆษณาเนทีฟ ทำให้ 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 นั้นต่างจากรูปแบบโฆษณาอื่นๆ ตรงที่ไม่มีความกว้างที่กำหนดไว้ล่วงหน้า ดังนั้นอย่าลืมตั้งค่าความกว้างของเฟรมของแบนเนอร์อย่างชัดเจนในโค้ดหรือในเครื่องมือสร้างอินเทอร์เฟซ หากไม่ได้ระบุความกว้าง โดยค่าเริ่มต้น 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: ที่แสดงวิธีรับความกว้างและความสูงใหม่ของแบนเนอร์

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