UI ที่กำหนดเองด้วย IMA SDK สำหรับ iOS

คู่มือนี้แสดงวิธีใช้งาน UI โฆษณาที่กำหนดเองของคุณเองโดยใช้ IMA SDK สำหรับ iOS ซึ่งทำได้โดยปิดใช้ 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 ของตัวเองแทนเสมอ วิธีซ่อน 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 แรกที่จะย้ายเข้ามาคือปุ่มดูข้อมูลเพิ่มเติม สร้าง "ตกแต่งภายใน" Listener เพื่อแจ้งให้ 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 ที่กำหนดเอง ซึ่งมีลักษณะดังนี้

การแก้ปัญหา

คุณมีตัวอย่างแท็กที่เปิดใช้การปิดใช้ UI โฆษณาไหม

คุณสามารถคัดลอก URL ของ ตัวอย่างแท็ก และวางลงในการติดตั้งใช้งาน IMA

ฉันไม่สามารถปิดใช้ UI เริ่มต้น

ตรวจสอบว่าได้ตั้งค่า adsRenderingSettings.disableUi เป็น true แล้ว และส่งไปยัง getAdsManager ตรวจสอบว่า ad.isUiDisabled() แสดงผล true นอกจากนี้ คุณต้องเปิดใช้เครือข่ายใน Ad Manager เพื่อปิดใช้ UI โฆษณา หากคุณเปิดใช้ VAST จะมี Extension ที่ ซึ่งมีลักษณะดังนี้

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

หากยังคงพบปัญหา โปรดตรวจสอบกับผู้จัดการฝ่ายดูแลลูกค้าเพื่อดูว่า ไม่ว่าคุณจะเปิดใช้งานอยู่หรือไม่ โฆษณาบางประเภทต้องใช้ UI ที่เฉพาะเจาะจง โฆษณาเหล่านี้ แสดงผลที่มีค่า <UiHideable> เป็น 0 หากคุณพบสิ่งนี้ ทีมดูแลการแสดงโฆษณาต้องทำการเปลี่ยนแปลงเพื่อให้มั่นใจว่าประเภทโฆษณาเหล่านี้จะไม่แสดง