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

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

Giống như các định dạ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 đối tượng GADAdLoader. Việc đưa hằng số GADAdLoaderAdTypeCustomNative vào mảng adTypes khi khởi chạy 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ó hai phương thức. GADAdLoader sử dụng lệnh gọi đầu tiên để tìm ra mã định dạng mà nó nên yêu cầu:

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

- (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 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, rất giống với thông báo cho các định dạng do hệ thống xác định:

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

- (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 đế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. Lưu ý Tên của từng thành phần. Tên là khoá dùng để lấy dữ liệu cho mỗi 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 riêng của họ để 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 lớp này không có phương thức truy cập thành phần được đặt tên. Thay vào đó, lớp này 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 để sử dụng với GADCustomNativeAd. Bạn có thể sử dụng bất kỳ chế độ xem 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.

Dưới đây là ví dụ về một chế độ xem quảng cáo có thể hiển thị một quảng cáo gốc tuỳ chỉnh đơn giản:

MySimpleNativeAdView.h

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

@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)

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

...
- (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ổ chương trình 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) phải 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 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.

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

@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 định dạng tuỳ chỉnh, bạn có thể chọn đặt định dạng đó đủ điều kiện cho video.

Trong quá trình triển khai ứng dụng, hãy sử dụng thuộc tính GADCustomNativeAd.mediaContent để lấy thực thể GADMediaContent của quảng cáo. Để xác định xem quảng cáo có chứa nội dung video hay không, hãy kiểm tra thuộc tính hasVideoContent. Nếu quảng cáo có nội dung video, hãy tạo một thành phần hiển thị GADMediaView, chỉ định thuộc tính mediaContent và thêm thành phần hiển thị nội dung nghe nhìn vào hệ phân cấp view. Nếu quảng cáo không có nội dung video, hãy hiển thị một thành phần thay thế, chẳng hạn như hình ảnh.

Ví dụ sau đây 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:

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),
  ])
}
NativeAdSnippets.swift

- (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],
  ]];
}
NativeAdSnippets.m

Để biết thông tin chi tiết về cách tuỳ chỉnh video quảng cáo gốc tuỳ chỉnh, hãy xem lớp GADVideoController.

Để biết cách triển khai video gốc tuỳ chỉnh, hãy xem ví dụ về tính năng Hiển thị tuỳ chỉnh của Ad Manager trong Swift và Objective-C.

Xử lý lượt nhấp vào quảng cáo 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 lượt hiển thị cho một 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:

myCustomNativeAd.recordImpression()

[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, nếu ứ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 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 chế độ xem tương ứng với thành phần đó, thì mã sẽ có dạng như sau:

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

[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 chế độ xem 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ó thuộc tính customClickHandler thuộc loại GADNativeAdCustomClickHandler

typealias NativeAdCustomClickHandler = (assetID: String) -> Void

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

Đây là một khối (Objective-C) / closure (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 lệnh đó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 thường dù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 hàm đóng trong Swift. Nếu bạn đặt một khối hoặc lệnh đóng, SDK sẽ chạy khối hoặc lệnh đóng đó 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 để phản hồi một lượt nhấp, cho dù đó là cập nhật giao diện người dùng, hiển thị 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:

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")

[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 sau:

/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 lấp đầy gốc

Để thử nghiệm 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ã định dạng và đơn vị quảng cáo thực tế của bạn trước khi phát hành!