iOS 向け IMA SDK とカスタム UI

このガイドでは、IMA SDK for iOS を使用して独自のカスタム広告 UI を実装する方法について説明します。 そのためには、デフォルトの UI を無効にして、新しいカスタム UI を設定してから、 SDK から取得した広告情報を新しい UI に入力する。このガイドは、 Objective-C の基本的なサンプル 追加できますこの動画の全文は カスタム UI の例。

注: この機能を有効にするには、Google アド マネージャー アカウントを有効にする必要があります。 詳しくは、アカウント マネージャーにお問い合わせください。

新しい 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 を無効にする

まず、組み込み UI を無効にすることを SDK に伝えます。

ViewController.m

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

カスタム UI を非表示にして、許可された場合にのみ表示します

AdSense 広告などの一部の Google 広告では、UI をカスタマイズできません。 常に独自の 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 が非表示になっている場合にのみ、カスタム UI を表示します。 広告の後にカスタム UI が表示されていない（後続の広告が カスタム 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 コンポーネントは、[Learn More] ボタンです。 「内側のレタッチ」を作成する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];
  }
}

実装すると、Google Chat の UI が カスタム UI の例 次のようになります。

トラブルシューティング

広告 UI を無効にするために有効になっているサンプルタグはありますか？

このサイトの URL をコピーできます サンプルタグ それを IMA 実装に貼り付けます

デフォルト UI を無効にできません。

adsRenderingSettings.disableUi が true に設定されていることを確認してください getAdsManager に渡します。ad.isUiDisabled() を確認してください。 true を返します。また、アド マネージャーでこの機能を無効にするには、 広告 UI を表示します。有効になっている場合は、VAST に Extension が含まれ、 次のようになります。

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

それでも問題が解決しない場合は、アカウント マネージャーに状況をお問い合わせください。 有効かどうかがわかります。一部の広告タイプでは特定の UI が必要になります。これらの広告 <UiHideable> の値 0 が返されます。これが発生した場合は 入稿チームは、これらの広告タイプが配信されないように変更を加える必要があります。