ממשק משתמש מותאם אישית עם IMA SDK ל-iOS

במדריך הזה מוסבר איך להטמיע ממשק משתמש מותאם אישית של מודעות באמצעות IMA SDK ל-iOS. לשם כך, צריך להשבית את ממשק המשתמש שמוגדר כברירת מחדל, להגדיר ממשק משתמש מותאם אישית חדש ולאחר מכן מאכלסים את ממשק המשתמש החדש בפרטי המודעה שהתקבלו מה-SDK. מדריך זה מבוסס על דוגמה ל-Objective-C בסיסי ל-iOS. אפשר להוריד את כל דוגמה לממשק משתמש בהתאמה אישית.

הערה: כדי להפעיל את התכונה הזו, צריך להפעיל את חשבון Google Ad Manager. למידע נוסף, אפשר לפנות למנהל החשבון.

הגדרת רכיבים חדשים בממשק המשתמש

לפני שתכתוב קוד כלשהו, שנה את הסטוריבורד כדי להוסיף רכיבים הלחצן מידע נוסף, הלחצן דילוג על המודעה וטיימר לספירה לאחור. צריך לוודא הלחצן דילוג על מודעה הוא 'בהתאמה אישית' לחצן (כפי שמוצג למטה) כדי למנוע זאת להבהב בזמן שהטיימר לספירה לאחור לדילוג מתעדכן.

לחצן מידע נוסף

הלחצן דילוג על המודעה

תווית ספירה לאחור של מודעות

צריך לוודא שהרכיבים החדשים האלה מקושרים למשתנים ב-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 של תג לדוגמה ולהדביק אותו בהטמעת ה-IMA.

לא ניתן להשבית את ממשק המשתמש שמוגדר כברירת מחדל.

עליך לוודא שהגדרת את adsRenderingSettings.disableUi לערך true ומעבירים את הקלט לgetAdsManager. צריך לוודא שad.isUiDisabled() מחזירה true. בנוסף, כדי להשבית את הרשת צריך להפעיל את הרשת ב-Ad Manager ממשק המשתמש של המודעה. אם המדיניות מופעלת, ה-VAST מכיל Extension נראה כך:

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

אם הבעיה נמשכת, יש לפנות למנהל החשבון כדי לברר האם אתם מופעלים, חלק מסוגי המודעות דורשים ממשק משתמש ספציפי. המודעות האלה מוחזר עם ערך <UiHideable> של 0. אם תיתקלו בבעיה הזו, בצוות ניהול הטראפיק צריך לבצע שינויים כדי להבטיח שסוגי המודעות האלה לא יוצגו.