واجهة مستخدم مخصّصة تتضمّن حزمة تطوير البرامج لإعلانات الوسائط التفاعلية لنظام التشغيل iOS

يوضح هذا الدليل كيفية تنفيذ واجهة مستخدم مخصصة لإعلاناتك باستخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية لنظام التشغيل iOS. لإجراء ذلك، عليك إيقاف واجهة المستخدم التلقائية، وإعداد واجهة مستخدم مخصّصة جديدة، ثم تعبئة واجهة المستخدم الجديدة بمعلومات الإعلان التي تم الحصول عليها من حزمة تطوير البرامج (SDK). يستنِد هذا الدليل إلى مثال Objective-C الأساسي لنظام التشغيل iOS. يمكنك تنزيل النسخة الكاملة مثال على واجهة مستخدم مخصَّصة:

ملاحظة: يجب تفعيل حسابك على "مدير إعلانات Google" لتفعيل هذه الميزة. لمزيد من المعلومات، يُرجى التواصل مع مدير حسابك.

تحديد عناصر واجهة المستخدم الجديدة

قبل كتابة أي تعليمة برمجية، قم بتعديل مخطط القصة لإضافة عناصر زرّ مزيد من المعلومات وزر تخطّي الإعلان وموقّت العد التنازلي تأكَّد من زر تخطي الإعلان هو "مخصّص" (كما هو موضح أدناه) لمنع حدوث ذلك من الوميض مع تحديثات موقّت العد التنازلي لتخطّيه

زر مزيد من المعلومات

زر تخطّي الإعلان

تصنيف العد التنازلي للإعلان

تأكَّد من أنّ هذه العناصر الجديدة مرتبطة بالمتغيّرات في 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;

إيقاف واجهة المستخدم المدمجة

ابدأ بإخبار حزمة SDK بأنّك تريد إيقاف واجهة المستخدم المضمَّنة فيها.

ViewController.m

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

إخفاء واجهة المستخدم المخصَّصة وعرضها فقط عند السماح بذلك

لا تسمح بعض إعلانات Google، مثل إعلانات AdSense، بواجهة مستخدم مخصصة. وتعرض دائمًا واجهة المستخدم الخاصة بها بدلاً من ذلك. يمكنك إخفاء واجهة المستخدم المخصصة تلقائيًا:

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

يمكنك عرض واجهة المستخدم المخصّصة فقط عندما يخفي الإعلان الذي يتم تشغيله حاليًا واجهة المستخدم الخاصة به. إخفاء واجهة المستخدم المخصصة بعد كل إعلان في حالة عدم ظهور الإعلان الذي يليه السماح بواجهة المستخدم المخصصة:

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

إضافة منطق لزر "مزيد من المعلومات"

مكوّن واجهة المستخدم الأول الذي سيتم توصيله هو زر مزيد من المعلومات. إنشاء "اللمسات الداخلية" أداة معالجة البيانات بإبلاغ حزمة 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];
  }
}

بمجرد التنفيذ، يمكن أن تعمل واجهة المستخدم في مثال على واجهة مستخدم مخصَّصة يبدو كما يلي:

تحديد المشاكل وحلّها

هل لديك نموذج علامة تم تفعيله لإيقاف واجهة مستخدم الإعلان؟

يمكنك نسخ عنوان URL لهذا نموذج علامة وألصقه في عملية تنفيذ إعلانات الوسائط التفاعلية

لا يمكنني إيقاف واجهة المستخدم التلقائية.

تأكَّد من ضبط adsRenderingSettings.disableUi على true وتمريره إلى getAdsManager. تحقق مما يلي: ad.isUiDisabled() وإرجاع true. بالإضافة إلى ذلك، يجب تفعيل شبكتك في "مدير الإعلانات" لإيقافها. واجهة مستخدم الإعلان. إذا كانت هذه الميزة مفعّلة، سيحتوي نموذج عرض إعلانات فيديو (VAST) على Extension يبدو كما يلي:

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

إذا كنت لا تزال تواجه مشاكل، يُرجى الرجوع إلى مدير حسابك لتحديد ما إذا كنت مُفعَّلاً أم لا. تتطلّب بعض أنواع الإعلانات واجهة مستخدم محدّدة. هذه الإعلانات نتيجة بقيمة <UiHideable> تساوي 0. إذا واجهت هذا، فإن فريق عدد الزيارات إلى إجراء تغييرات لضمان عدم عرض أنواع الإعلانات هذه.