iOS용 IMA SDK를 사용한 맞춤 UI

이 가이드에서는 iOS용 IMA SDK를 사용하여 맞춤형 광고 UI를 구현하는 방법을 설명합니다. 이렇게 하려면 기본 UI를 사용 중지하고 새 맞춤 UI를 설정한 다음 SDK에서 가져온 광고 정보로 새 UI를 채웁니다. 이 가이드는 기본 Objective-C 예 입니다. 전체 버전을 다운로드할 수 있습니다. 맞춤 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 광고는 맞춤 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를 허용합니다.

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 구성요소는 자세히 알아보기 버튼입니다. '내부 수정' 만들기 리스너를 호출하여 자세히 알아보기 버튼을 클릭했습니다.

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의 맞춤 UI 예 다음과 같습니다.

문제 해결

광고 UI를 사용 중지할 수 있도록 설정된 샘플 태그가 있나요?

이 URL을 복사할 수 있습니다. 샘플 태그 붙여넣기만 하면 됩니다

기본 UI를 사용 중지할 수 없습니다.

adsRenderingSettings.disableUi이(가) true(으)로 설정되었는지 확인합니다. 그런 다음 getAdsManager에 전달합니다. ad.isUiDisabled()을(를) 확인하세요. 은 true를 반환합니다. 또한 Ad Manager에서 네트워크를 사용 설정해야만 사용 중지할 수 있습니다. 설정할 수 있습니다. 사용 설정하면 VAST에 Extension 다음과 같습니다.

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

드림 그래도 문제가 해결되지 않으면 계정 관리자에게 문의하여 표시됩니다. 일부 광고 유형에는 특정 UI가 필요합니다. 이 광고 <UiHideable> 값 0으로 반환합니다. 이 문제가 발생하면 이러한 광고 유형이 게재되지 않도록 변경해야 합니다