自訂原生廣告格式

自訂廣告格式

與系統定義的廣告格式一樣,自訂原生廣告格式也是使用 GADAdLoader 物件載入。在初始化 GADAdLoader 時,將 GADAdLoaderAdTypeCustomNative 常數加入 adTypes 陣列,即可在載入廣告時,將其設為要求自訂原生廣告格式。

GADCustomNativeAdLoaderDelegate

載入自訂格式的通訊協定有兩種方法。GADAdLoader 會使用第一個值,找出應要求的格式 ID:

Swift

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

Objective-C

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

每個自訂原生廣告格式都有對應的格式 ID,可用於識別該格式。在呼叫這個方法時,應用程式應傳回陣列,其中包含準備要顯示的廣告格式 ID。

自訂原生廣告載入後,系統會傳送第二則訊息,這類似於系統定義格式的訊息:

Swift

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

Objective-C

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

格式 ID

您可以在 Ad Manager 使用者介面中找到用於明確指向自訂原生廣告格式的格式 ID,位於「發布」下拉式選單中的「原生」專區下方:

每個自訂原生廣告的格式 ID 會顯示在名稱旁邊。按一下其中一個名稱,即可前往詳細資料畫面,查看格式欄位的相關資訊:

您可以在這裡新增、編輯及移除個別欄位。請記下每項資產的名稱。名稱是顯示自訂原生廣告格式時,用來取得每個素材資源的資料的鍵。

顯示自訂原生廣告格式

自訂原生廣告格式與系統定義的廣告格式不同,因為發布商可以自行定義廣告的素材資源清單。因此,顯示自訂原生廣告的程序與系統定義格式有幾項不同之處:

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

MySimpleNativeAdView.m (節錄)

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

算繪 AdChoices 圖示

遵循《數位服務法》(DSA) 規定,在歐洲經濟區 (EEA) 放送的預訂廣告必須包含 AdChoices 圖示和 Google 的「關於這則廣告」頁面連結。導入自訂原生廣告時,您必須顯示 AdChoices 圖示。顯示主要廣告素材資源時,請務必遵循相關步驟來顯示及設定 AdChoices 圖示的點擊事件監聽器。

以下範例會算繪 AdChoices 圖示,並設定適當的點擊行為。

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:
      GADNativeAssetIdentifier.adChoicesViewAsset.rawValue)
  }

  func populate(withCustomNativeAd customNativeAd: GADCustomNativeAd) {

    // Render the AdChoices image.
    let adChoicesKey = GADNativeAssetIdentifier.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.mediaView 屬性來取得影片的檢視畫面。然後將這個檢視畫面新增至檢視區塊階層。如果廣告沒有影片內容,請擬定其他計畫,以便在沒有影片的情況下放送廣告。

下方範例會檢查廣告是否含有影片內容,如果沒有影片,就會顯示圖片:

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

如要進一步瞭解如何自訂自訂原生廣告的影片體驗,請參閱 GADVideoController

下載 Ad Manager 自訂顯示範例,瞭解原生影片的實際運作方式。

處理自訂原生廣告的點擊和曝光

如果是自訂原生廣告格式,您的應用程式必須負責記錄曝光,並將點擊事件回報給 SDK。

錄製曝光

如要記錄自訂原生廣告的曝光次數,只要在對應的 GADCustomNativeAd 上呼叫 recordImpression 方法即可:

Swift

myCustomNativeAd.recordImpression()

Objective-C

[myCustomNativeAd recordImpression];

如果應用程式不小心針對同一個廣告多次呼叫方法,SDK 會避免為單一請求記錄重複的曝光。

回報點擊

如要向 SDK 回報資產檢視畫面發生點擊事件,請在對應的 GADCustomNativeAd 上呼叫 performClickOnAssetWithKey: 方法,並傳入點選的資產名稱。舉例來說,如果您有自訂格式資產「MainImage」,且想回報與該資產相對應的檢視畫面點擊次數,程式碼會如下所示:

Swift

myCustomNativeAd.performClickOnAsset(withKey: "MainImage")

Objective-C

[myCustomNativeAd performClickOnAssetWithKey:@"MainImage"];

請注意,您不需要針對與廣告相關聯的每個素材資源檢視畫面呼叫此方法。舉例來說,如果您有另一個名為「Caption」的素材資源,且該素材資源是用於顯示,但使用者不會點按或輕觸,那麼應用程式就不需要為該檢視畫面呼叫 performClickOnAssetWithKey:

回應自訂點擊動作

GADCustomNativeAd 具有屬性 customClickHandler,其類型為 GADNativeAdCustomClickHandler

Swift

typealias GADNativeAdCustomClickHandler = (assetID: String) -> Void

Objective-C

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

這是一個區塊 (Objective-C) / 關閉 (Swift),可接受 assetID 做為輸入參數,用來識別已點選的素材資源。

當自訂原生廣告收到點擊時,SDK 會嘗試以下三種回應:

  1. 在 Objective-C 中叫用 customClickHandler 區塊,或在 Swift 中叫用關閉函式 (如果已設定)。
  2. 循環檢查廣告的深層連結網址,並開啟第一個可找到相符應用程式的網址。
  3. 開啟瀏覽器,前往廣告的傳統到達網頁網址。

customClickHandler 屬性會接受 Objective-C 中的區塊,以及 Swift 中的函式。如果您設定了區塊或結束函式,SDK 會執行該區塊或結束函式,但不會採取進一步行動。不過,如果您設定為空值,SDK 會改用廣告註冊的深層連結和/或目的地網址。

自訂點擊處理常式可讓應用程式自行決定如何回應點擊,無論是更新 UI、顯示其他 View Controller,還是只記錄點擊,都能自行決定最佳動作。以下是顯示警告的範例:

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 廣告單元 ID:

/21775744923/example/native

這個廣告活動已設定為放送範例的應用程式安裝廣告和內容廣告,以及使用下列素材資源的自訂原生廣告格式:

  • 廣告標題 (文字)
  • MainImage (圖片)
  • 說明文字 (文字)

原生候補廣告

如要測試原生候補廣告的行為,請使用下列 Ad Manager 廣告單元:

/21775744923/example/native-backfill

這會放送含有 AdChoices 重疊層的應用程式安裝和內容廣告範例。

請記得在正式上線前更新程式碼,以便參照實際的廣告單元和格式 ID!