使用 IMA SDK for iOS 的自訂使用者介面

本指南將說明如何使用 iOS 專用 IMA SDK 導入自訂廣告 UI。 如要這麼做，必須停用預設 UI、設定新的自訂 UI，然後 在新的 UI 中填入從 SDK 取得的廣告資訊。本指南以 基本 Objective-C 範例 iOS 版。您可以下載 自訂 UI 範例。

注意： 您必須啟用 Google Ad Manager 帳戶，才能啟用這項功能。 詳情請洽您的客戶經理。

定義新的 UI 元素

編寫任何程式碼之前，請先修改分鏡腳本，為 [瞭解詳情] 按鈕、[略過廣告] 按鈕和倒數計時器。請確認 「略過廣告」按鈕是一種「自訂」按鈕 (如下所示) 防止 略過倒數計時器更新

「瞭解詳情」按鈕

「略過廣告」按鈕

廣告倒數計時標籤

請確認這些新元素已連結至 ViewController 中的變數。 同時新增變數來追蹤目前廣告，以及廣告可以略過的時間 稍後會用到的架構

ViewController.m

@property(nonatomic, weak) IBOutlet UIButton *learnMore;
@property(nonatomic, weak) IBOutlet UIButton *skipAd;
@property(nonatomic, weak) IBOutlet UILabel *adCountdown;
@property(nonatomic) NSTimeInterval timeTillSkip;
@property(nonatomic, strong) IMAAd *currentAd;

停用內建 UI

首先，請告知 SDK 您要停用其內建 UI。

ViewController.m

- (void)setUpContentPlayer {
  ...
  IMAAdsRenderingSettings *adsRenderingSettings = [[IMAAdsRenderingSettings alloc] init];
  adsRenderingSettings.disableUi = YES;
  [self.adsManager initializeWithAdsRenderingSettings:adsRenderingSettings];
}

隱藏自訂 UI，只在允許時顯示

部分 Google 廣告 (例如 AdSense 廣告) 不允許使用自訂使用者介面。 而是一律改為顯示自己的 UI。預設隱藏自訂 UI：

ViewController.m

- (void)viewDidLoad {
  ...
  [self hideCustomUi];
  self.timeTillSkip = INFINITY;
  self.learnMore.layer.zPosition = MAXFLOAT;
  self.skipAd.layer.zPosition = MAXFLOAT;
  self.adCountdown.layer.zPosition = MAXFLOAT;
  ...
}

- (void)hideCustomUi {
  self.learnMore.hidden = YES;
  self.adCountdown.hidden = YES;
  self.skipAd.hidden = YES;
}

只在目前播放的廣告隱藏使用者介面時，才顯示自訂使用者介面。 在每則廣告結束後隱藏自訂使用者介面，以免以下廣告沒有出現 允許自訂 UI：

ViewController.m

- (void)adsManager:(IMAAdsManager *)adsManager didReceiveAdEvent:(IMAAdEvent *)event {
  // When the SDK notified you that ads have been loaded, play them.
  if (event.type == kIMAAdEvent_LOADED) {
    [adsManager start];
  } else if (event.type == kIMAAdEvent_STARTED) {
    self.currentAd = event.ad;
    if (self.currentAd.isUiDisabled) {
      [self showCustomUi];
    }
  } else if (event.type == kIMAAdEvent_SKIPPED || event.type == kIMAAdEvent_COMPLETE) {
    [self hideCustomUi];
  } else if (event.type == kIMAAdEvent_TAPPED) {
    // Since you're disabling IMA's built-in UI, you're also losing the
    // UI element that resumes paused ads with a tap. Add this code
    // to resume paused ads when a user taps on them.
    [self.adsManager resume];
  }
}

- (void)showCustomUi {
  self.learnMore.hidden = NO;
  [self.videoView bringSubviewToFront:self.learnMore];
  self.adCountdown.hidden = NO;
  if (self.currentAd.isSkippable) {
    self.skipAd.hidden = NO;
    [self.videoView bringSubviewToFront:self.skipAd];
  } else {
    self.skipAd.hidden = YES;
  }
  self.adCountdown.text = @"";
  [self.skipAd setTitle:@"" forState:UIControlStateNormal];
}

新增「瞭解詳情」按鈕的邏輯

第一個要連接的 UI 元件是「瞭解詳情」按鈕。 打造「內部修飾」用來通知 SDK 已按下「瞭解詳情」按鈕。

ViewController.m

- (IBAction)onLearnMoreTouch:(id)sender {
  [self.adsManager clicked];
}

新增倒數計時器的邏輯

接著，連接倒數計時器 必須支付 adsManager:adDidProgressToTime:totalTime: 才能計算 廣告的剩餘放送時間

ViewController.m

- (void)adsManager:(IMAAdsManager *)adsManager
adDidProgressToTime:(NSTimeInterval)mediaTime
         totalTime:(NSTimeInterval)totalTime {
  // Update countdown timer.
  NSMutableString *countdownText = [NSMutableString stringWithString:@"Ad "];
  NSInteger totalAds = self.currentAd.adPodInfo.totalAds;
  if (totalAds > 1) {
    NSInteger position = self.currentAd.adPodInfo.adPosition;
    [countdownText appendString:
        [NSString stringWithFormat:@"%ld of %ld", (long)position, (long)totalAds]];
  }
  NSTimeInterval remainingTime = totalTime - mediaTime;
  [countdownText appendString:[NSString stringWithFormat:@" (%.fs)", remainingTime]];
  self.adCountdown.text = countdownText;
}

新增「略過廣告」按鈕的邏輯

最後，連接「略過廣告」按鈕。只有可略過廣告會顯示這個按鈕 廣告；倒數計時器達到 0 時就會略過廣告。已新增這個圖碼 與上述倒數計時器的方法相同

ViewController.m

- (void)adsManager:(IMAAdsManager *)adsManager
adDidProgressToTime:(NSTimeInterval)mediaTime
         totalTime:(NSTimeInterval)totalTime {
  ...
  // Update skip button
  if (self.currentAd.isSkippable) {
    self.timeTillSkip = self.currentAd.skipTimeOffset - mediaTime;
    NSString *skipString = @"Skip ad";
    if (self.timeTillSkip > 0) {
      skipString =
          [NSString stringWithFormat:@"Skip this ad in %.f...", self.timeTillSkip];
    }
    // Disable animations while you change the button text to prevent it from blinking. The button
    // type must be "Custom" instead of "System" for this to work. This can be set in the attributes
    // inspector for the button in the storyboard file.
    [UIView setAnimationsEnabled:NO];
    [self.skipAd setTitle:skipString forState:UIControlStateNormal];
    [self.skipAd layoutIfNeeded];
    [UIView setAnimationsEnabled:YES];
  }
}

完成實作後， 自訂 UI 範例 如下所示：

疑難排解

是否有可用於停用廣告 UI 的範例代碼？

您可以複製這個網址 代碼範例 並貼到 IMA 導入中

我無法停用預設使用者介面。

確認你已將「adsRenderingSettings.disableUi」設為「true」 並傳遞至 getAdsManager確認ad.isUiDisabled() 會傳回 true。此外，您必須在 Ad Manager 中啟用聯播網，才能停用 廣告使用者介面。如果您已啟用，VAST 會包含 Extension 如下所示：

<Extension type="uiSettings">
<UiHideable>1</UiHideable>
</Extension>

敬上 如果問題仍未解決，請與客戶經理聯絡 以及是否已啟用部分廣告類型需要使用特定使用者介面；這些廣告 傳回 <UiHideable> 值為 0。如果發現這種情況，您的 這樣廣告投放團隊就必須做出變更，確保這些廣告類型不會放送。