UI kustom dengan IMA SDK untuk iOS

Panduan ini menunjukkan cara menerapkan UI iklan kustom Anda sendiri menggunakan IMA SDK untuk iOS. Untuk melakukannya, Anda perlu menonaktifkan UI default, menyiapkan UI kustom baru, lalu mengisi UI baru dengan informasi iklan yang diperoleh dari SDK. Panduan ini dibuat berdasarkan contoh Objective-C dasar untuk iOS. Anda dapat mendownload Contoh UI kustom.

Catatan: Akun Google Ad Manager Anda harus diaktifkan untuk mengaktifkan fitur ini. Untuk informasi selengkapnya, hubungi Account Manager Anda.

Mendefinisikan elemen UI baru

Sebelum Anda menulis kode apa pun, modifikasilah {i>storyboard<i} untuk menambahkan elemen pada Tombol Pelajari Lebih Lanjut, tombol Lewati Iklan, dan penghitung mundur. Pastikan bahwa tombol Lewati Iklan menjadi "Khusus" (seperti yang ditunjukkan di bawah ini) untuk mencegahnya agar tidak berkedip saat update penghitung mundur.

Tombol Pelajari Lebih Lanjut

Tombol Lewati Iklan

Label Hitung Mundur Iklan

Pastikan elemen baru ini terhubung ke variabel di ViewController Anda. Tambahkan juga variabel untuk melacak iklan saat ini dan waktu hingga iklan dapat dilewati. yang digunakan nanti.

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;

Menonaktifkan UI bawaan

Mulailah dengan memberi tahu SDK bahwa Anda ingin menonaktifkan UI bawaannya.

ViewController.m

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

Menyembunyikan UI kustom dan menampilkannya hanya jika diizinkan

Beberapa iklan Google, seperti iklan AdSense, tidak mengizinkan UI kustom. Sebagai gantinya, elemen tersebut selalu merender UI-nya sendiri. Sembunyikan UI kustom secara default:

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

Menampilkan UI kustom hanya jika iklan yang sedang diputar menyembunyikan UI-nya. Sembunyikan UI kustom setelah setiap iklan jika iklan yang mengikutinya tidak izinkan UI kustom:

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

Menambahkan logika untuk tombol Pelajari Lebih Lanjut

Komponen UI pertama yang akan disambungkan adalah tombol Pelajari Lebih Lanjut. Membuat "Touch Up Inside" pemroses memberi tahu SDK bahwa Tombol Learn More telah diklik.

ViewController.m

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

Menambahkan logika untuk penghitung mundur

Selanjutnya, sambungkan penghitung hitung mundur, yang menggunakan adsManager:adDidProgressToTime:totalTime: untuk menghitung sisa waktu iklan.

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

Menambahkan logika untuk tombol Lewati Iklan

Terakhir, hubungkan tombol Skip Ad. Tombol ini hanya ditampilkan untuk dapat dilewati iklan; iklan melewati iklan setelah penghitung mundurnya mencapai 0. Kode ini ditambahkan dengan metode yang sama dengan yang digunakan untuk penghitung mundur di atas.

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

Setelah diimplementasikan, UI di Contoh UI Kustom akan terlihat seperti ini:

Pemecahan masalah

Apakah Anda memiliki tag contoh yang diaktifkan untuk menonaktifkan UI iklan?

Anda dapat menyalin URL ini contoh tag dan menempelkannya ke dalam penerapan IMA Anda.

Saya tidak dapat menonaktifkan UI default.

Periksa untuk memastikan bahwa Anda menetapkan adsRenderingSettings.disableUi ke true dan meneruskannya ke getAdsManager. Periksa untuk mengetahui bahwa ad.isUiDisabled() akan menampilkan true. Selain itu, jaringan Anda harus diaktifkan di Ad Manager untuk menonaktifkan UI iklan. Jika diaktifkan, VAST Anda akan berisi Extension yang akan terlihat seperti ini:

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

Jika Anda masih mengalami masalah, hubungi Account Manager Anda untuk menentukan baik ketika Anda diaktifkan. Beberapa jenis iklan memerlukan UI khusus; iklan ini tampilkan dengan nilai <UiHideable> 0. Jika Anda mengalami ini, tim proses iklan perlu melakukan perubahan untuk memastikan jenis iklan ini tidak ditayangkan.