Giao diện người dùng tùy chỉnh với SDK IMA cho iOS

Hướng dẫn này cho biết cách triển khai giao diện người dùng quảng cáo tùy chỉnh của riêng bạn bằng cách sử dụng SDK IMA cho iOS. Để thực hiện điều này, bạn cần tắt giao diện người dùng mặc định, thiết lập giao diện người dùng tuỳ chỉnh mới điền sẵn thông tin quảng cáo thu được từ SDK vào giao diện người dùng mới. Hướng dẫn này dựa trên ví dụ cơ bản về Target-C cho iOS. Bạn có thể tải xuống Ví dụ về giao diện người dùng tuỳ chỉnh.

Lưu ý: Bạn phải bật tài khoản Google Ad Manager để bật tính năng này. Để biết thêm thông tin, hãy liên hệ với người quản lý tài khoản.

Xác định các thành phần mới trên giao diện người dùng

Trước khi bạn viết bất kỳ mã nào, hãy sửa đổi bảng phân cảnh để thêm các phần tử cho Nút Tìm hiểu thêm, nút Bỏ qua quảng cáo và đồng hồ đếm ngược. Đảm bảo rằng nút Bỏ qua quảng cáo là "Tuỳ chỉnh" (như trình bày dưới đây) để ngăn chặn do nhấp nháy khi đồng hồ đếm ngược bỏ qua cập nhật.

Nút Tìm hiểu thêm

Nút Bỏ qua quảng cáo

Nhãn Đếm ngược quảng cáo

Đảm bảo những phần tử mới này được kết nối với các biến trong ViewController của bạn. Ngoài ra, hãy thêm các biến để theo dõi quảng cáo hiện tại và thời gian cho đến khi có thể bỏ qua quảng cáo, để sau này sử dụng.

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;

Tắt giao diện người dùng tích hợp sẵn

Hãy bắt đầu bằng cách thông báo cho SDK biết rằng bạn muốn vô hiệu hoá giao diện người dùng tích hợp sẵn.

ViewController.m

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

Ẩn giao diện người dùng tuỳ chỉnh và chỉ hiển thị khi được cho phép

Một số quảng cáo của Google (chẳng hạn như quảng cáo AdSense) không có giao diện người dùng tuỳ chỉnh. Thay vào đó, các thành phần này luôn hiển thị giao diện người dùng riêng. Ẩn giao diện người dùng tuỳ chỉnh theo mặc định:

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

Chỉ hiển thị giao diện người dùng tuỳ chỉnh khi quảng cáo hiện đang phát đang ẩn giao diện người dùng. Ẩn giao diện người dùng tuỳ chỉnh sau mỗi quảng cáo trong trường hợp quảng cáo phía sau không cho phép giao diện người dùng tuỳ chỉnh:

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

Thêm logic cho nút Tìm hiểu thêm

Thành phần giao diện người dùng đầu tiên cần kết nối là nút Tìm hiểu thêm. Tạo tài liệu "Chỉnh sửa bên trong" trình nghe để thông báo cho SDK rằng Đã nhấp vào nút Tìm hiểu thêm.

ViewController.m

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

Thêm logic cho đồng hồ đếm ngược

Tiếp theo, hãy kết nối đồng hồ đếm ngược với adsManager:adDidProgressToTime:totalTime: để tính thời gian còn lại của quảng cáo.

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

Thêm logic cho nút Bỏ qua quảng cáo

Cuối cùng, hãy kết nối nút Bỏ qua quảng cáo. Nút này chỉ được hiển thị cho quảng cáo có thể bỏ qua quảng cáo; thì quảng cáo đó sẽ bỏ qua quảng cáo sau khi đồng hồ đếm ngược đến 0. Mã này đã được thêm thành cùng phương thức dùng cho đồng hồ đếm ngược ở trên.

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

Sau khi được triển khai, giao diện người dùng trong Ví dụ về giao diện người dùng tuỳ chỉnh sẽ có dạng như sau:

Khắc phục sự cố

Bạn có thẻ mẫu được bật để vô hiệu hóa giao diện người dùng quảng cáo không?

Bạn có thể sao chép URL của nội dung này thẻ mẫu rồi dán vào phương thức triển khai IMA.

Tôi không tắt được giao diện người dùng mặc định.

Kiểm tra để đảm bảo rằng bạn đã đặt adsRenderingSettings.disableUi thành true rồi truyền tệp đó đến getAdsManager. Kiểm tra để đảm bảo rằng ad.isUiDisabled() sẽ trả về true. Ngoài ra, bạn phải bật mạng của mình trong Ad Manager để vô hiệu hoá giao diện người dùng của quảng cáo. Nếu bạn được bật, VAST của bạn sẽ chứa Extension sẽ có dạng như sau:

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

Nếu bạn vẫn gặp sự cố, hãy kiểm tra với người quản lý tài khoản của bạn để xác định cho dù bạn có được bật hay không. Một số loại quảng cáo yêu cầu giao diện người dùng cụ thể; những quảng cáo này trả về với giá trị <UiHideable> bằng 0. Nếu gặp phải vấn đề này, nhóm quản lý quảng cáo cần thực hiện thay đổi để đảm bảo những loại quảng cáo này không phân phát.