رابط کاربری سفارشی با IMA SDK برای iOS

این راهنما نحوه پیاده‌سازی رابط کاربری تبلیغات سفارشی خود را با استفاده از IMA SDK برای iOS نشان می‌دهد. برای انجام این کار، باید رابط کاربری پیش‌فرض را غیرفعال کنید، یک رابط کاربری سفارشی جدید راه‌اندازی کنید، و سپس رابط کاربری جدید را با اطلاعات تبلیغاتی به‌دست‌آمده از SDK پر کنید. این راهنما مبتنی بر مثال اصلی Objective-C برای iOS است. می‌توانید نمونه کامل رابط کاربری سفارشی را دانلود کنید.

توجه: برای فعال کردن این ویژگی، حساب Google Ad Manager شما باید فعال باشد. برای اطلاعات بیشتر، با مدیر حساب خود تماس بگیرید.

عناصر UI جدید را تعریف کنید

قبل از نوشتن هر کدی، استوری بورد را تغییر دهید تا عناصری برای دکمه بیشتر بدانید ، دکمه رد شدن از تبلیغ و تایمر شمارش معکوس اضافه شود. مطمئن شوید که دکمه Skip Ad شما یک دکمه «سفارشی» است (مانند شکل زیر) تا از چشمک زدن آن هنگام به‌روزرسانی تایمر رد شدن از شمارش معکوس جلوگیری کنید.

دکمه بیشتر بدانید

دکمه رد شدن از آگهی

برچسب شمارش معکوس تبلیغات

مطمئن شوید که این عناصر جدید به متغیرهای 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 شروع کنید که می خواهید رابط کاربری داخلی آن را غیرفعال کنید.

ViewController.m

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

رابط کاربری سفارشی خود را پنهان کنید و آن را فقط در صورت مجاز نشان دهید

برخی از تبلیغات Google، مانند تبلیغات AdSense، اجازه 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 سفارشی را ندهد، پس از هر تبلیغ، رابط کاربری سفارشی را پنهان کنید:

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

برای دکمه بیشتر بدانید منطق اضافه کنید

اولین مؤلفه رابط کاربری که سیم‌کشی می‌شود، دکمه «بیشتر بدانید» است. یک شنونده «Touch Up Inside» ایجاد کنید تا به 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;
}

برای دکمه Skip Ad منطق اضافه کنید

در نهایت، دکمه Skip Ad را سیم کشی کنید. این دکمه فقط برای تبلیغات قابل پرش نمایش داده می شود. هنگامی که تایمر شمارش معکوس آن به 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 در مثال رابط کاربری سفارشی ما به صورت زیر است:

عیب یابی

آیا برچسب نمونه ای دارید که برای غیرفعال کردن رابط کاربری تبلیغات فعال باشد؟

می توانید URL این تگ نمونه را کپی کرده و در پیاده سازی IMA خود جایگذاری کنید.

من نمی توانم رابط کاربری پیش فرض را غیرفعال کنم.

بررسی کنید تا مطمئن شوید که adsRenderingSettings.disableUi را روی true تنظیم کرده اید و آن را به getAdsManager ارسال کنید. بررسی کنید که ad.isUiDisabled() true برمی گرداند. علاوه بر این، شبکه شما باید در Ad Manager فعال باشد تا رابط کاربری تبلیغات غیرفعال شود. اگر فعال هستید، VAST شما حاوی یک Extension است که به شکل زیر است:

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

اگر هنوز مشکل دارید، با مدیر حساب خود بررسی کنید تا مشخص شود که آیا فعال هستید یا خیر. برخی از انواع تبلیغات به یک UI خاص نیاز دارند. این تبلیغات با مقدار <UiHideable> 0 برمی گردند. اگر با این مورد مواجه شدید، تیم قاچاق شما باید تغییراتی ایجاد کند تا اطمینان حاصل شود که این انواع تبلیغات ارائه نمی شوند.