ใช้รูปแบบโฆษณาเนทีฟที่กำหนดเอง

เลือกแพลตฟอร์ม: Android iOS Android (เดิม)

รูปแบบโฆษณาที่กำหนดเอง

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

GADCustomNativeAdLoaderDelegate

โปรโตคอลสำหรับการโหลดรูปแบบที่กำหนดเองมี 2 วิธี GADAdLoader จะใช้โค้ดแรกเพื่อดูว่าควรขอรหัสรูปแบบใด

Swift

public func customNativeAdFormatIDs(for adLoader: AdLoader) -> [Any]

Objective-C

- (NSArray *)customNativeAdFormatIDsForAdLoader:(AdLoader *)adLoader;

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

ระบบจะส่งข้อความที่ 2 เมื่อโหลดโฆษณาเนทีฟที่กำหนดเองแล้ว ซึ่งคล้ายกับข้อความสำหรับรูปแบบที่ระบบกำหนด

Swift

public func adLoader(_ adLoader: AdLoader,
    didReceive customNativeAd: CustomNativeAd)

Objective-C

- (void)adLoader:(AdLoader *)adLoader
    didReceiveCustomNativeAd:(CustomNativeAd *)customNativeAd;

รหัสรูปแบบ

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

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

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

การแสดงรูปแบบโฆษณาเนทีฟที่กำหนดเอง

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

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

ต่อไปนี้คือตัวอย่างมุมมองโฆษณาที่สามารถแสดงโฆษณาเนทีฟที่กำหนดเองแบบง่าย

MySimpleNativeAdView.h

Swift

import UIKit
import GoogleMobileAds

/// Custom native ad view class with format ID 10063170.
class MySimpleNativeAdView: UIView {

  /// Weak references to this ad's asset views.
  @IBOutlet weak var headlineView: UILabel!
  @IBOutlet weak var mainImageView: UIImageView!
  @IBOutlet weak var captionView: UILabel!

  ...

  /// Populates the ad view with the custom native ad object.
  func populateWithCustomNativeAd(_ customNativeAd: CustomNativeAd) {
    ...
  }
}

Objective-C

@import UIKit;
@import GoogleMobileAds;

/// View representing a custom native ad format with format ID 10063170.
@interface MySimpleNativeAdView : UIView

// Weak references to this ad's asset views.
@property(weak, nonatomic) IBOutlet UILabel *headlineView;
@property(weak, nonatomic) IBOutlet UIImageView *mainImageView;
@property(weak, nonatomic) IBOutlet UILabel *captionView;

/// Populates the ad view with the custom native ad object.
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd;

@end

MySimpleNativeAdView.m (ข้อความที่ตัดตอนมา)

Swift

...
func populateWithCustomNativeAd(_ customNativeAd: CustomNativeAd) {
  self.customNativeAd = customNativeAd

  // Populate the custom native ad assets.
  headlineView.text = self.customNativeAd.stringForKey("Headline")
  mainImageView.image = self.customNativeAd.imageForKey("MainImage")?.image
  captionView.text = self.customNativeAd.stringForKey("Caption")
}
...

Objective-C

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  self.customNativeAd = customNativeAd;

  // Populate the custom native ad assets.
  self.headlineView.text = [customNativeAd stringForKey:@"Headline"];
  self.mainImageView.image = [customNativeAd imageForKey:@"MainImage"].image;
  self.captionView.text = [customNativeAd stringForKey:@"Caption"];
}
...

แสดงผลไอคอนตัวเลือกโฆษณาอื่นๆ

ในฐานะส่วนหนึ่งของการสนับสนุนกฎหมายบริการดิจิทัล (DSA) โฆษณาแบบจองล่วงหน้าที่แสดงในเขตเศรษฐกิจยุโรป (EEA) ต้องมีไอคอนตัวเลือกโฆษณาอื่นๆ และลิงก์ไปยังหน้า "เกี่ยวกับโฆษณานี้" ของ Google เมื่อติดตั้งใช้งานโฆษณาเนทีฟที่กำหนดเอง คุณจะเป็นผู้รับผิดชอบในการแสดงผลไอคอนตัวเลือกโฆษณาอื่นๆ โดยต้องทำตามขั้นตอนเพื่อแสดงผลและตั้งค่าฟังก์ชันรอคลิกสำหรับไอคอนตัวเลือกโฆษณาอื่นๆ เมื่อแสดงผลชิ้นงานโฆษณาหลัก

ตัวอย่างต่อไปนี้จะแสดงผลไอคอนตัวเลือกโฆษณาอื่นๆ และกำหนดค่าลักษณะการคลิก

Swift

class MySimpleNativeAdView: UIView {
  @IBOutlet weak var adChoicesView: UIImageView!

  override func awakeFromNib() {
    super.awakeFromNib()

    // Enable clicks on AdChoices.
    adChoicesView.addGestureRecognizer(
      UITapGestureRecognizer(
        target: self,
        action: #selector(performClickOnAdChoices(_:))))
    adChoicesView.isUserInteractionEnabled = true
  }

  @objc func performClickOnAdChoices(_ sender: UIImage!) {
    customNativeAd.performClickOnAsset(withKey:
      NativeAssetIdentifier.adChoicesViewAsset.rawValue)
  }

  func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {

    // Render the AdChoices image.
    let adChoicesKey = NativeAssetIdentifier.adChoicesViewAsset.rawValue
    let adChoicesImage = customNativeAd.image(forKey: adChoicesKey)?.image
    adChoicesView.image = adChoicesImage
    adChoicesView.isHidden = adChoicesImage == nil
    ...
  }
}

Objective-C

@interface MySimpleNativeAdView ()

@property(nonatomic, weak) IBOutlet UIImageView *adChoicesView;

@end

@implementation MySimpleNativeAdView

- (void)awakeFromNib {
  [super awakeFromNib];
  // Enable clicks on AdChoices.
  [self.adChoicesView addGestureRecognizer:[[UITapGestureRecognizer alloc]
                                            initWithTarget:self
                                            action:@selector(performClickOnAdChoices:)]];
  self.adChoicesView.userInteractionEnabled = YES;
}

- (void)performClickOnAdChoices:(UITapGestureRecognizer *)sender {
    [self.customNativeAd performClickOnAssetWithKey:GADNativeAdChoicesViewAsset];
}

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Render the AdChoices image.
  GADNativeAdImage *adChoicesAsset = [customNativeAd
    imageForKey:GADNativeAdChoicesViewAsset];
  self.adChoicesView.image = adChoicesAsset.image;
  self.adChoicesView.hidden = (adChoicesAsset == nil);
  ...
}

วิดีโอเนทีฟสำหรับรูปแบบโฆษณาเนทีฟที่กำหนดเอง

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

ในการติดตั้งใช้งานแอป ให้ใช้พร็อพเพอร์ตี้ GADCustomNativeAd.mediaContent เพื่อรับอินสแตนซ์ GADMediaContent ของโฆษณา หากต้องการตรวจสอบว่าโฆษณามีเนื้อหาวิดีโอหรือไม่ ให้ตรวจสอบพร็อพเพอร์ตี้ hasVideoContent หากโฆษณามีเนื้อหาวิดีโอ ให้สร้างมุมมอง GADMediaView กำหนดพร็อพเพอร์ตี้ mediaContent และเพิ่มมุมมองสื่อลงในลำดับชั้นการแสดงผล หากโฆษณาไม่มีเนื้อหาวิดีโอ ให้แสดงผลชิ้นงานอื่น เช่น รูปภาพ

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

Swift

func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {
  // Remove all the media placeholder's subviews.
  for subview: UIView in mainPlaceholder.subviews {
    subview.removeFromSuperview()
  }

  // This custom native ad has both a video and image associated with it. Use the video
  // asset if available, or fall back to the image asset.
  let mainView: UIView
  if customNativeAd.mediaContent.hasVideoContent {
    let mediaView = MediaView()
    mediaView.mediaContent = customNativeAd.mediaContent
    mainView = mediaView
  } else {
    let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
    mainView = UIImageView(image: image)
  }
  mainPlaceholder.addSubview(mainView)

  // Size the media view to fill the container size.
  mainView.translatesAutoresizingMaskIntoConstraints = false
  NSLayoutConstraint.activate([
    mainView.leadingAnchor.constraint(equalTo: mainPlaceholder.leadingAnchor),
    mainView.trailingAnchor.constraint(equalTo: mainPlaceholder.trailingAnchor),
    mainView.topAnchor.constraint(equalTo: mainPlaceholder.topAnchor),
    mainView.bottomAnchor.constraint(equalTo: mainPlaceholder.bottomAnchor),
  ])
}

Objective-C

- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)customNativeAd {
  // Remove all the media placeholder's subviews.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }

  // This custom native ad has both a video and image associated with it. Use the video
  // asset if available, or fall back to the image asset.
  UIView *mainView = nil;
  if (customNativeAd.mediaContent.hasVideoContent) {
    GADMediaView *mediaView = [[GADMediaView alloc] init];
    mediaView.mediaContent = customNativeAd.mediaContent;
    mainView = mediaView;
  } else {
    UIImage *image = [customNativeAd imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the media view to fill the container size.
  mainView.translatesAutoresizingMaskIntoConstraints = NO;
  [NSLayoutConstraint activateConstraints:@[
    [mainView.leadingAnchor constraintEqualToAnchor:self.mainPlaceholder.leadingAnchor],
    [mainView.trailingAnchor constraintEqualToAnchor:self.mainPlaceholder.trailingAnchor],
    [mainView.topAnchor constraintEqualToAnchor:self.mainPlaceholder.topAnchor],
    [mainView.bottomAnchor constraintEqualToAnchor:self.mainPlaceholder.bottomAnchor],
  ]];
}

ดูรายละเอียดเกี่ยวกับการปรับแต่งวิดีโอโฆษณาเนทีฟที่กำหนดเองได้ที่คลาส GADVideoController

หากต้องการดูการติดตั้งใช้งานวิดีโอเนทีฟที่กำหนดเอง โปรดดูตัวอย่างการแสดงผลที่กำหนดเองของ Ad Manager ใน Swift และ Objective-C

การจัดการการคลิกโฆษณาและการแสดงผลโฆษณาเนทีฟที่กำหนดเอง

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

การบันทึกการแสดงผล

หากต้องการบันทึกการแสดงผลสำหรับโฆษณาเนทีฟที่กำหนดเอง ให้เรียกใช้เมธอด recordImpression ใน GADCustomNativeAd ที่เกี่ยวข้อง

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

SDK จะป้องกันไม่ให้ระบบบันทึกการแสดงผลที่ซ้ำกันสำหรับคำขอเดียว หากแอปเรียกใช้เมธอดหลายครั้งสำหรับโฆษณาเดียวกันโดยไม่ตั้งใจ

การรายงานการคลิก

หากต้องการรายงานไปยัง SDK ว่ามีการคลิกเกิดขึ้นในมุมมองชิ้นงาน ให้เรียกใช้เมธอด performClickOnAssetWithKey: ใน GADCustomNativeAd ที่เกี่ยวข้อง และส่งชื่อชิ้นงานที่มีการคลิก ตัวอย่างเช่น หากคุณมีชิ้นงานในรูปแบบที่กำหนดเองชื่อ "MainImage" และต้องการรายงานการคลิกในมุมมองที่สอดคล้องกับชิ้นงานนั้น โค้ดของคุณจะมีลักษณะดังนี้

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

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

การตอบสนองต่อการดำเนินการคลิกที่กำหนดเอง

GADCustomNativeAd มีพร็อพเพอร์ตี้ customClickHandler ซึ่งเป็นประเภท GADNativeAdCustomClickHandler

Swift

typealias NativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

typedef void (^GADNativeAdCustomClickHandler)(NSString *assetID);

นี่คือบล็อก (Objective-C) / Closure (Swift) ที่ยอมรับ assetID เป็นพารามิเตอร์อินพุต ซึ่งระบุชิ้นงานที่มีการคลิก

เมื่อมีการคลิกโฆษณาเนทีฟที่กำหนดเอง SDK จะตอบสนองได้ 3 แบบ โดยจะพยายามดำเนินการตามลำดับต่อไปนี้

  1. เรียกใช้บล็อก customClickHandler ใน Objective-C หรือ Closure ใน Swift หากมีการตั้งค่าไว้
  2. วนซ้ำผ่าน URL ของ Deep Link ของโฆษณาและเปิด URL แรกที่พบแอปที่ตรงกัน
  3. เปิดเบราว์เซอร์และไปที่ URL ปลายทางแบบเดิมของโฆษณา

พร็อพเพอร์ตี้ customClickHandler ยอมรับบล็อกใน Objective-C และ Closure ใน Swift หากคุณตั้งค่าบล็อกหรือปิด SDK จะเรียกใช้และไม่ดำเนินการใดๆ เพิ่มเติม อย่างไรก็ตาม หากคุณตั้งค่าเป็น nil, SDK จะกลับไปใช้ Deep Link และ/หรือ URL ปลายทางที่ลงทะเบียนไว้กับโฆษณา

เครื่องจัดการการคลิกที่กำหนดเองช่วยให้แอปตัดสินใจได้เองว่าจะดำเนินการใดที่เหมาะสมที่สุดเพื่อตอบสนองต่อการคลิก ไม่ว่าจะเป็นการอัปเดต UI, การแสดงตัวควบคุมมุมมองอื่น หรือเพียงแค่บันทึกการคลิก ตัวอย่างการแจ้งเตือนมีดังนี้

Swift

myCustomNativeAd.customClickHandler = { assetID in
  if assetID == "MainImage" {
    let alertView = UIAlertView(title: "Custom Click",
        message: "You just clicked on the image!",
        delegate: self,
        cancelButtonTitle: "OK")
    alertView.alertViewStyle = .default
    alertView.show()
  }
}
myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[self.customNativeAd setCustomClickHandler:^(NSString *assetID){
  if ([assetID isEqualToString:@"MainImage"]) {
    [[[UIAlertView alloc] initWithTitle:@"Custom Click"
                                message:@"You just clicked on the image!"
                               delegate:self
                      cancelButtonTitle:@"OK"
                      otherButtonTitles:nil] show];
  }
}];
[self.customNativeAd performClickOnAssetWithKey:@"MainImage"];

การทดสอบโค้ดโฆษณาเนทีฟ

โฆษณาแบบขายตรง

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

/21775744923/example/native

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

  • บรรทัดแรก (ข้อความ)
  • MainImage (รูปภาพ)
  • คำบรรยายภาพ (ข้อความ)

โฆษณาทดแทนแบบเนทีฟ

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

/21775744923/example/native-backfill

โดยจะแสดงโฆษณาเพื่อการติดตั้งแอปตัวอย่างและโฆษณาแบบคอนเทนต์ที่มีการวางซ้อนตัวเลือกโฆษณาอื่นๆ

อย่าลืมอัปเดตโค้ดเพื่ออ้างอิงรหัสหน่วยโฆษณาและรหัสรูปแบบจริงก่อนเผยแพร่