Định dạng quảng cáo gốc tùy 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ũng đượ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 hằng số này để 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. Phương thức đầu tiên được GADAdLoader sử dụng để tìm ra mã định dạng mà trình xử lý sẽ yêu cầu:

Swift

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

Objective-C

- (NSArray *)customNativeAdFormatIDsForAdLoader:(GADAdLoader *)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 để nhận dạng đị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 các quảng cáo mà ứng dụng sẵn sàng hiển thị.

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

Swift

public func adLoader(_ adLoader: GADAdLoader,
    didReceive customNativeAd: GADCustomNativeAd)

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveCustomNativeAd:(GADCustomNativeAd *)customNativeAd;

Mã định dạng

Bạn có thể tìm thấy mã định dạng được dùng để tham chiếu đế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 mã đó. Khi nhấp vào một trong các tên đó, bạn sẽ được chuyển đến màn hình hiển thị thông tin chi tiết 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 riêng lẻ. Hãy lưu ý Tên của từng tài sả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ị các định dạng quảng cáo gốc tùy chỉnh

Các định dạng quảng cáo gốc tuỳ chỉnh khác với các đị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 các thành phần riêng 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ị quảng cáo gốc cho các định dạng do hệ thống xác định ở một số điểm sau:

  1. Do GADCustomNativeAd 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 sẽ không có các phương thức truy cập tài sản đã nêu tên. Thay vào đó, lớp này cung cấp các phương thức như imageForKey:stringForKey:. Các phương thức này lấy tên của trường làm đối số.
  2. Hệ thống không hỗ trợ bất kỳ lớp chế độ xem quảng cáo chuyên biệt nào 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 của mình.
  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 của quảng cáo.

Dưới đây là ví dụ về một chế độ xem 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: GADCustomNativeAd) {
    ...
  }
}

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

MySimplegView.m (phần trích dẫn)

Swift

...
func populateWithCustomNativeAd(_ customNativeAd: GADCustomNativeAd) {
  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"];
}
...

Video gốc cho các đị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ể biến định dạng đó thành định dạng đủ điều kiện xuất hiện dưới dạng video.

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

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

Swift

...
  /// Populates the ad view with the custom native ad object.
  func populate(withCustomNativeAd customNativeAd: GADCustomNativeAd) {
    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]];
  [self.mainPlaceholder
      addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[mainView]|"
                                                             options:0
                                                             metrics:nil
                                                               views:viewDictionary]];
}
...

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

Hãy tải ví dụ về Hiển thị tuỳ chỉnh Ad Manager xuống để xem ví dụ về cách hoạt động của video gốc trong thực tế.

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

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

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

Để ghi lại một 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:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

SDK giúp 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 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 số 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 chế độ xem thành phần, hãy gọi phương thức performClickOnAssetWithKey: trên GADCustomNativeAd tương ứng và chuyển vào 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 ở định dạng tuỳ chỉnh có tên là "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ã của bạn sẽ trông giố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 chế độ xem thành phần được liên kết với quảng cáo của mình. Ví dụ: Nếu bạn có một thành phần khác là "Caption" (chỉ hiển thị mà không người dùng nhấp hay nhấn vào), thì ứng dụng của bạn không cần gọi performClickOnAssetWithKey: cho khung hiển thị đó.

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

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

Swift

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

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

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

Khi người dùng nhấp vào một quảng cáo gốc tuỳ chỉnh, SDK có thể phản hồi theo 3 cách sau:

  1. Gọi khối customClickHandler trong Objective-C hoặc khối lệnh trong Swift (nếu đã đặt khối này).
  2. Lặp lại các URL liên kết sâu của quảng cáo và mở URL đầu tiên mà bạn có thể tìm thấy ứ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 khối lệnh trong Swift. Nếu bạn đã đặt một khối hoặc lệnh đó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 đã đă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ù hành động đó là cập nhật giao diện người dùng, trình bày một trình điều khiển chế độ xem khác hay chỉ ghi nhật ký lượt nhấp đó. Dưới đây là ví dụ hiển thị 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"];

Thử nghiệm mã quảng cáo gốc

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

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

/6499/example/native

Mã này được định cấu hình để 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)
  • Hình ảnh chính (hình ảnh)
  • Chú thích (văn bản)

Quảng cáo chèn lấp gốc

Để kiểm tra hoạt động của quảng cáo chèn lấp gốc, hãy sử dụng Ad Manager đơn vị quảng cáo sau:

/6499/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à mã đơn vị quảng cáo thực tế của bạn trước khi chạy quảng cáo!