Sử dụng định dạng quảng cáo gốc tuỳ chỉnh

Chọn nền tảng: Android iOS Android (Cũ)

Định dạng quảng cáo tuỳ chỉnh

Giống như các đối tượng tương ứng do hệ thống xác định, định dạng quảng cáo gốc tuỳ chỉnh được tải bằng cách sử dụng các đối tượng GADAdLoader. Việc đưa hằng số GADAdLoaderAdTypeCustomNative vào mảng adTypes khi khởi tạo GADAdLoader sẽ định cấu hình để yêu cầu các định dạng gốc tuỳ chỉnh khi tải quảng cáo.

GADCustomNativeAdLoaderDelegate

Giao thức tải định dạng tuỳ chỉnh có 2 phương thức. GADAdLoader dùng mã nhận dạng định dạng đầu tiên để biết nên yêu cầu mã nhận dạng định dạng nào:

Swift

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

Objective-C

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

Mỗi định dạng quảng cáo gốc tuỳ chỉnh đều có một mã định dạng tương ứng để xác định định dạng đó. Khi phương thức này được gọi, ứng dụng của bạn sẽ trả về một mảng chứa mã định dạng của những quảng cáo mà ứng dụng đã chuẩn bị để hiển thị.

Thông báo thứ hai được gửi khi quảng cáo gốc tuỳ chỉnh đã tải, tương tự như thông báo cho các định dạng do hệ thống xác định:

Swift

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

Objective-C

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

Mã định dạng

Bạn có thể tìm thấy mã định dạng dùng để tham chiếu riêng biệt đến các định dạng quảng cáo gốc tuỳ chỉnh trong giao diện người dùng Ad Manager trong mục Gốc bên trong trình đơn thả xuống Phân phối:

Mã định dạng của mỗi quảng cáo gốc tuỳ chỉnh sẽ xuất hiện bên cạnh tên của quảng cáo đó. Khi nhấp vào một trong các tên, bạn sẽ được chuyển đến màn hình chi tiết cho thấy thông tin về các trường của định dạng:

Tại đây, bạn có thể thêm, chỉnh sửa và xoá từng trường. Ghi lại Tên của từng thành phần. Tên là khoá dùng để lấy dữ liệu cho từng thành phần khi hiển thị định dạng quảng cáo gốc tuỳ chỉnh.

Hiển thị định dạng quảng cáo gốc tuỳ chỉnh

Định dạng quảng cáo gốc tuỳ chỉnh khác với định dạng do hệ thống xác định ở chỗ nhà xuất bản có quyền xác định danh sách thành phần của riêng mình để tạo nên một quảng cáo. Do đó, quy trình hiển thị quảng cáo gốc tuỳ chỉnh sẽ khác với quy trình hiển thị định dạng quảng cáo do hệ thống xác định ở một số điểm sau:

  1. Vì GADCustomNativeAd được dùng để xử lý mọi định dạng quảng cáo gốc tuỳ chỉnh mà bạn tạo, nên nó không có các phương thức truy cập thành phần được đặt tên. Thay vào đó, nó cung cấp các phương thức như imageForKey: và stringForKey: lấy tên của trường làm đối số.
  2. Không có lớp chế độ xem quảng cáo chuyên biệt như GADNativeAdView để dùng với GADCustomNativeAd. Bạn có thể thoải mái sử dụng bất kỳ khung hiển thị nào phù hợp với trải nghiệm người dùng.
  3. Do không có lớp chế độ xem quảng cáo chuyên biệt, nên bạn không cần đăng ký bất kỳ chế độ xem nào mà bạn sử dụng để hiển thị thành phần quảng cáo.

Sau đây là ví dụ về một khung hiển thị quảng cáo có khả năng hiển thị một quảng cáo gốc tuỳ chỉnh đơn giản:

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 (phần trích dẫn)

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"];
}
...

Hiển thị biểu tượng Lựa chọn quảng cáo

Trong khuôn khổ Hỗ trợ Đạo luật Dịch vụ kỹ thuật số (DSA), quảng cáo đặt trước được phân phát ở Khu vực kinh tế Châu Âu (EEA) cần có biểu tượng Lựa chọn quảng cáo và một đường liên kết đến trang Thông tin về quảng cáo này của Google. Khi triển khai quảng cáo gốc tuỳ chỉnh, bạn có trách nhiệm hiển thị biểu tượng Lựa chọn quảng cáo. Bạn cần thực hiện các bước để hiển thị và đặt trình theo dõi lượt nhấp cho biểu tượng Lựa chọn quảng cáo khi hiển thị các thành phần quảng cáo chính.

Ví dụ sau đây sẽ hiển thị biểu tượng Lựa chọn quảng cáo và định cấu hình hành vi nhấp chuột thích hợp.

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

Video gốc cho định dạng quảng cáo gốc tuỳ chỉnh

Khi tạo một định dạng tuỳ chỉnh, bạn có thể chọn để định dạng đó đủ điều kiện xuất hiện trong video.

Trong quá trình triển khai ứng dụng, bạn có thể sử dụng thuộc tính GADCustomNativeAd.mediaView để xem video. Sau đó, hãy thêm khung hiển thị này vào hệ phân cấp view. Nếu quảng cáo không có nội dung video, hãy lên kế hoạch thay thế để hiển thị quảng cáo mà không có video.

Ví dụ bên dưới kiểm tra xem quảng cáo có nội dung video hay không và hiển thị hình ảnh thay thế nếu không có video:

Swift

...
  /// Populates the ad view with the custom native ad object.
  func populate(withCustomNativeAd customNativeAd: CustomNativeAd) {
    if customNativeAd.videoController.hasVideoContent(),
      let mediaView = customNativeAd.mediaView {
      updateMainView(mediaView)
    } else {
      // Assumes your native format has an image asset with the name MainImage.
      let image: UIImage? = customNativeAd.image(forKey: "MainImage")?.image
      updateMainView(UIImageView(image: image))
    }
  }

  private func updateMainView(_ mainView:UIView) {
    // Assumes you have a placeholder view for your media content.
    // Remove all the placeholder's subviews.
    for subview: UIView in mainPlaceholder.subviews {
      subview.removeFromSuperview()
    }
    mainPlaceholder.addSubview(mainView)
    // Size the media view to fill our container size.
    mainView.translatesAutoresizingMaskIntoConstraints = false
    let viewDictionary: [AnyHashable: Any] = ["mainView":mainView]
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "H:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
    mainPlaceholder.addConstraints(NSLayoutConstraint.constraints(
      withVisualFormat: "V:|[mainView]|", options: [], metrics: nil,
      views: viewDictionary as? [String : Any] ?? [String : Any]()))
  }
...

Objective-C

...
- (void)populateWithCustomNativeAd:(GADCustomNativeAd *)ad {
  UIView *mainView = nil;
  if (ad.videoController.hasVideoContent) {
    mainView = ad.mediaView;
  } else {
    // Assumes your native format has an image asset with the name MainImage.
    UIImage *image = [ad imageForKey:@"MainImage"].image;
    mainView = [[UIImageView alloc] initWithImage:image];
  }
  // Assumes you have a placeholder view for your media content.
  for (UIView *subview in self.mainPlaceholder.subviews) {
    [subview removeFromSuperview];
  }
  [self.mainPlaceholder addSubview:mainView];

  // Size the main view to fill our container size.
  [mainView setTranslatesAutoresizingMaskIntoConstraints:NO];
  NSDictionary *viewDictionary = NSDictionaryOfVariableBindings(mainView);
  [self.mainPlaceholder
      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[mainView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:viewDictionary]];
}
...

Xem GADVideoController để biết thêm thông tin về cách bạn có thể tuỳ chỉnh trải nghiệm video của quảng cáo gốc tuỳ chỉnh.

Tải ví dụ về tính năng hiển thị tuỳ chỉnh của Ad Manager xuống để xem ví dụ minh hoạ về video gốc đang hoạt động.

Xử lý lượt nhấp và lượt hiển thị của quảng cáo gốc tuỳ chỉnh

Đối với các định dạng quảng cáo gốc tuỳ chỉnh, ứng dụng của bạn có trách nhiệm ghi lại các lượt hiển thị và báo cáo sự kiện nhấp chuột cho SDK.

Ghi lại lượt hiển thị

Để ghi lại một lượt hiển thị cho quảng cáo gốc tuỳ chỉnh, bạn chỉ cần gọi phương thức recordImpression trên GADCustomNativeAd tương ứng:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

SDK ngăn việc ghi lại các lượt hiển thị trùng lặp cho một yêu cầu duy nhất, trong trường hợp ứng dụng của bạn vô tình gọi phương thức này nhiều lần cho cùng một quảng cáo.

Báo cáo lượt nhấp

Để báo cáo cho SDK biết rằng một lượt nhấp đã xảy ra trên một khung hiển thị thành phần, hãy gọi phương thức performClickOnAssetWithKey: trên GADCustomNativeAd tương ứng và truyền tên của thành phần được nhấp vào. Ví dụ: nếu bạn có một thành phần trong định dạng tuỳ chỉnh "MainImage" và muốn báo cáo một lượt nhấp vào khung hiển thị tương ứng với thành phần đó, thì mã sẽ có dạng như sau:

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

Xin lưu ý rằng bạn không cần phải gọi phương thức này cho mỗi khung hiển thị thành phần được liên kết với quảng cáo. Ví dụ: Nếu bạn có một thành phần khác là "Chú thích" (bạn chỉ hiển thị mà không cho người dùng nhấp hay nhấn vào thành phần này), thì ứng dụng của bạn không cần gọi phương thức performClickOnAssetWithKey: cho chế độ xem đó.

Phản hồi hành động nhấp tuỳ chỉnh

GADCustomNativeAd có một thuộc tính customClickHandler thuộc loại GADNativeAdCustomClickHandler

Swift

typealias NativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

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

Đây là một khối (Objective-C) / đóng (Swift) chấp nhận assetID làm tham số đầu vào, xác định thành phần đã được nhấp vào.

Khi một lượt nhấp được thực hiện trên một quảng cáo gốc tuỳ chỉnh, SDK có thể phản hồi theo 3 cách, theo thứ tự sau:

  1. Gọi khối customClickHandler trong Objective-C hoặc đóng trong Swift (nếu có).
  2. Xử lý các URL liên kết sâu của quảng cáo và mở URL đầu tiên giúp bạn tìm được ứng dụng phù hợp.
  3. Mở một trình duyệt rồi chuyển đến URL đích truyền thống của quảng cáo đó.

Thuộc tính customClickHandler chấp nhận một khối trong Objective-C và một bao đóng trong Swift. Nếu bạn đặt một khối hoặc đóng, SDK sẽ chạy khối đó và không thực hiện thêm hành động nào. Tuy nhiên, nếu bạn đặt một giá trị rỗng, SDK sẽ quay lại đường liên kết sâu và/hoặc URL đích được đăng ký với quảng cáo.

Trình xử lý lượt nhấp tuỳ chỉnh cho phép ứng dụng của bạn tự quyết định hành động phù hợp nhất cần thực hiện để phản hồi một lượt nhấp, cho dù đó là cập nhật giao diện người dùng, trình bày một trình điều khiển khung hiển thị khác hay chỉ ghi lại lượt nhấp. Sau đây là ví dụ cho thấy một cảnh báo:

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"];

Kiểm thử mã quảng cáo gốc

Quảng cáo bán trực tiếp

Nếu muốn thử nghiệm quảng cáo gốc được bán trực tiếp, bạn có thể sử dụng mã đơn vị quảng cáo Ad Manager này:

/21775744923/example/native

Mã này được thiết lập để phân phát quảng cáo nội dung và quảng cáo cài đặt ứng dụng mẫu, cũng như định dạng quảng cáo gốc tuỳ chỉnh với các thành phần sau:

  • Dòng tiêu đề (văn bản)
  • MainImage (hình ảnh)
  • Chú thích (văn bản)

Quảng cáo gốc thay thế

Để kiểm thử hành vi của quảng cáo thay thế gốc, hãy sử dụng đơn vị quảng cáo Ad Manager này:

/21775744923/example/native-backfill

Đơn vị này sẽ phân phát quảng cáo nội dung và quảng cáo cài đặt ứng dụng mẫu chứa lớp phủ Lựa chọn quảng cáo.

Hãy nhớ cập nhật mã để tham chiếu đến mã đơn vị quảng cáo và định dạng thực tế của bạn trước khi phát hành!