تبلیغات بنری

تبلیغات بنری، تبلیغات مستطیلی هستند که بخشی از طرح‌بندی برنامه را اشغال می‌کنند. آنها در حالی که کاربران در حال تعامل با برنامه هستند، روی صفحه می مانند، یا در بالا یا پایین صفحه لنگر انداخته می شوند یا در هنگام حرکت کاربر با محتوا در ارتباط هستند. بنرهای تبلیغاتی می توانند پس از مدت زمان مشخصی به طور خودکار به روز شوند. برای اطلاعات بیشتر به نمای کلی تبلیغات بنری مراجعه کنید.

این راهنما به شما نشان می‌دهد که چگونه با تبلیغات بنری تطبیقی ​​لنگردار شروع کنید، که با بهینه‌سازی اندازه آگهی برای هر دستگاه با استفاده از عرض تبلیغی که مشخص می‌کنید، عملکرد را به حداکثر می‌رساند.

بنر تطبیقی ​​لنگردار

تبلیغات بنری تطبیقی ​​لنگر، تبلیغات با نسبت ابعاد ثابت هستند تا تبلیغات با اندازه ثابت معمولی. نسبت تصویر مشابه استاندارد صنعتی 320*50 است. هنگامی که عرض کامل موجود را مشخص کردید، تبلیغی با ارتفاع بهینه برای آن عرض به شما برمی‌گرداند. ارتفاع بهینه در درخواست‌های یک دستگاه تغییر نمی‌کند، و نماهای اطراف نیازی به جابجایی در هنگام بازخوانی آگهی ندارند.

پیش نیازها

همیشه با تبلیغات آزمایشی تست کنید

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

ساده ترین راه برای بارگیری تبلیغات آزمایشی استفاده از شناسه واحد آگهی آزمایشی اختصاصی ما برای بنرهای iOS است: /6499/example/adaptive-banner

این به‌طور ویژه پیکربندی شده است تا تبلیغات آزمایشی را برای هر درخواست بازگرداند، و شما می‌توانید هنگام کدنویسی، آزمایش و اشکال‌زدایی از آن در برنامه‌های خود استفاده کنید. فقط مطمئن شوید که قبل از انتشار برنامه خود، آن را با شناسه واحد تبلیغاتی خود جایگزین کنید.

برای کسب اطلاعات بیشتر در مورد نحوه عملکرد تبلیغات آزمایشی SDK Ads Mobile، به Test Ads مراجعه کنید.

یک GAMBannerView ایجاد کنید

تبلیغات بنری در اشیاء GAMBannerView نمایش داده می شوند، بنابراین اولین قدم برای یکپارچه سازی تبلیغات بنری این است که یک GAMBannerView در سلسله مراتب مشاهده خود قرار دهید. این معمولاً به صورت برنامه‌نویسی یا از طریق Interface Builder انجام می‌شود.

به صورت برنامه ای

یک GAMBannerView همچنین می تواند مستقیماً نمونه سازی شود. در اینجا مثالی از نحوه ایجاد GAMBannerView ، تراز شده در مرکز پایین ناحیه امن صفحه آورده شده است:

سریع

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    let viewWidth = view.frame.inset(by: view.safeAreaInsets).width

    // Here the current interface orientation is used. Use
    // GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
    // GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
    // particular orientation,
    let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
    bannerView = GAMBannerView(adSize: adaptiveSize)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

هدف-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // Here safe area is taken into account, hence the view frame is used after the
  // view has been laid out.
  CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
  CGFloat viewWidth = frame.size.width;

  // Here the current interface orientation is used. If the ad is being preloaded
  // for a future orientation change or different orientation, the function for the
  // relevant orientation should be used.
  GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeBottom
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  
@end

توجه داشته باشید که در این مورد ما محدودیت عرض یا ارتفاع قائل نمی‌شویم، زیرا اندازه آگهی ارائه شده به بنر یک اندازه محتوای ذاتی برای اندازه‌گیری نمایش می‌دهد.

رابط ساز

یک GAMBannerView می توان به استوری بورد یا فایل xib اضافه کرد. هنگام استفاده از این روش، مطمئن شوید که فقط محدودیت های موقعیت را روی بنر اضافه کنید. به عنوان مثال، هنگام نمایش یک بنر تطبیقی ​​در پایین صفحه، قسمت پایین نمای بنر را برابر با بالای راهنمای چیدمان پایین قرار دهید و مرکز X را برابر با مرکز X superview قرار دهید.

اندازه آگهی بنر هنوز به صورت برنامه‌ریزی تنظیم می‌شود:

سریع

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

هدف-C

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

یک تبلیغ را بارگیری کنید

هنگامی که GAMBannerView در جای خود قرار گرفت و ویژگی های آن پیکربندی شد، زمان بارگذاری آگهی فرا می رسد. این کار با فراخوانی loadRequest: روی یک شی GAMRequest انجام می شود:

سریع

override func viewDidLoad() {
  super.viewDidLoad()
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  bannerView.adUnitID = "/6499/example/adaptive-banner"
  bannerView.rootViewController = self

  bannerView.load(GAMRequest())
}

هدف-C

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  
  //  Set the ad unit ID and view controller that contains the GAMBannerView.
  self.bannerView.adUnitID = @"/6499/example/adaptive-banner";
  self.bannerView.rootViewController = self;

  [self.bannerView loadRequest:[GAMRequest request]];
}

اشیاء GAMRequest یک درخواست آگهی واحد را نشان می‌دهند و حاوی ویژگی‌هایی مانند اطلاعات هدف‌یابی هستند.

اگر تبلیغ شما بارگیری نشد، تا زمانی که واحد تبلیغات خود را برای بازخوانی پیکربندی کرده باشید، نیازی به درخواست صریح آگهی دیگری ندارید. Google Mobile Ads SDK به نرخ تازه‌سازی که در رابط کاربری Ad Manager مشخص کرده‌اید احترام می‌گذارد. اگر بازخوانی را فعال نکرده اید، باید درخواست جدیدی صادر کنید.

رویدادهای تبلیغاتی

از طریق استفاده از GADBannerViewDelegate ، می‌توانید به رویدادهای چرخه حیات گوش دهید، مانند زمانی که آگهی بسته می‌شود یا کاربر برنامه را ترک می‌کند.

ثبت نام برای رویدادهای بنر

برای ثبت نام در رویدادهای تبلیغات بنری، ویژگی delegate را در GAMBannerView روی شی ای تنظیم کنید که پروتکل GADBannerViewDelegate را پیاده سازی می کند. به طور کلی، کلاسی که تبلیغات بنری را پیاده سازی می کند، به عنوان کلاس delegate نیز عمل می کند، در این صورت، ویژگی delegate را می توان روی self تنظیم کرد.

سریع

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GAMBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

هدف-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

اجرای رویدادهای بنر

هر یک از متدها در GADBannerViewDelegate به‌عنوان اختیاری علامت‌گذاری شده‌اند، بنابراین شما فقط باید روش‌هایی را که می‌خواهید پیاده‌سازی کنید. این مثال هر روش را پیاده سازی می کند و یک پیام را به کنسول ثبت می کند:

سریع

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewDidDismissScreen")
}

هدف-C

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidReceiveAd");
}

-   (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
  NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}

-   (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidRecordImpression");
}

-   (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillPresentScreen");
}

-   (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewWillDismissScreen");
}

-   (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
  NSLog(@"bannerViewDidDismissScreen");
}

برای پیاده‌سازی روش‌های نمایندگی بنر در برنامه آزمایشی iOS API به مثال Ad Delegate مراجعه کنید.

Swift Objective-C

موارد استفاده کنید

در اینجا چند نمونه از موارد استفاده برای این روش های رویداد تبلیغاتی آورده شده است.

پس از دریافت آگهی، یک بنر به سلسله مراتب مشاهده اضافه کنید

ممکن است بخواهید اضافه کردن GAMBannerView به سلسله مراتب مشاهده را تا زمانی که آگهی دریافت کنید به تأخیر بیاندازید. می توانید این کار را با گوش دادن به رویداد bannerViewDidReceiveAd: انجام دهید:

سریع

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

هدف-C

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

متحرک سازی یک بنر تبلیغاتی

همچنین می توانید از رویداد bannerViewDidReceiveAd: برای متحرک سازی یک آگهی تبلیغاتی پس از بازگرداندن آن استفاده کنید، همانطور که در مثال زیر نشان داده شده است:

سریع

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

هدف-C

-   (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

مکث و از سرگیری برنامه

پروتکل GADBannerViewDelegate روش هایی دارد که شما را از رویدادها مطلع می کند، مانند زمانی که یک کلیک باعث ارائه یا رد شدن یک پوشش می شود. اگر می خواهید ردیابی کنید که آیا این رویدادها به دلیل تبلیغات بوده است یا خیر، برای این روش های GADBannerViewDelegate ثبت نام کنید.

برای مشاهده همه انواع ارائه‌های همپوشانی یا فراخوان‌های مرورگر خارجی، نه فقط مواردی که از کلیک‌های تبلیغاتی می‌آیند، برنامه شما بهتر است به روش‌های مشابه در UIViewController یا UIApplication گوش دهد. در اینجا جدولی وجود دارد که روش‌های معادل iOS را نشان می‌دهد که همزمان با متدهای GADBannerViewDelegate فراخوانی می‌شوند:

روش GADBannerViewDelegate روش iOS
bannerViewWillPresentScreen: viewWillDisappear:
bannerViewWillDismissScreen: نمای UIViewController viewWillAppear:
bannerViewDidDismissScreen: viewDidAppear:

شمارش برداشت دستی

اگر شرایط خاصی برای زمان ثبت یک نمایش دارید، می‌توانید به صورت دستی پینگ‌های نمایش را به Ad Manager ارسال کنید. این کار را می‌توان با فعال کردن یک GAMBannerView برای نمایش‌های دستی قبل از بارگیری آگهی انجام داد:

سریع

bannerView.enableManualImpressions = true

هدف-C

self.bannerView.enableManualImpressions = YES;

وقتی تشخیص دادید که یک تبلیغ با موفقیت بازگردانده شده است و روی صفحه نمایش داده می شود، می توانید به صورت دستی یک نمایش ارسال کنید:

سریع

bannerView.recordImpression()

هدف-C

[self.bannerView recordImpression];

رویدادهای برنامه

رویدادهای برنامه به شما امکان می دهد تبلیغاتی ایجاد کنید که می تواند به کد برنامه آنها پیام ارسال کند. سپس برنامه می تواند بر اساس این پیام ها اقداماتی را انجام دهد.

می‌توانید با استفاده از GADAppEventDelegate به رویدادهای برنامه مخصوص Ad Manager گوش دهید. این رویدادها ممکن است در هر زمانی در طول چرخه حیات تبلیغ رخ دهند، حتی قبل از فراخوانی شی GADBannerViewDelegate bannerViewDidReceiveAd:

سریع

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

هدف-C

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

روش‌های رویداد برنامه شما را می‌توان در یک کنترل‌کننده مشاهده پیاده‌سازی کرد:

سریع

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

هدف-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

به یاد داشته باشید که قبل از درخواست تبلیغ، نماینده را با استفاده از ویژگی appEventDelegate تنظیم کنید.

سریع

bannerView.appEventDelegate = self

هدف-C

self.bannerView.appEventDelegate = self;

در اینجا یک مثال نشان می دهد که چگونه رنگ پس زمینه برنامه خود را با تعیین رنگ از طریق یک رویداد برنامه تغییر دهید:

سریع

func bannerView(_ banner: GAMBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

هدف-C

-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

و، در اینجا خلاقیت مربوطه است که پیام های رویداد برنامه رنگی را به appEventDelegate ارسال می کند:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

برای اجرای رویدادهای برنامه در برنامه آزمایشی iOS API به مثال Ad Manager App Events مراجعه کنید.

Swift Objective-C

منابع اضافی

نمونه هایی در GitHub

مراحل بعدی

بنرهای جمع شونده

بنرهای جمع‌شونده، بنری‌هایی هستند که در ابتدا به صورت یک پوشش بزرگ‌تر ارائه می‌شوند و دکمه‌ای برای جمع کردن آگهی به اندازه کوچک‌تر وجود دارد. استفاده از آن را برای بهینه سازی بیشتر عملکرد خود در نظر بگیرید. برای جزئیات بیشتر به بنرهای تاشو مراجعه کنید.

بنرهای تطبیقی ​​درون خطی

بنرهای تطبیقی ​​درون خطی در مقایسه با بنرهای تطبیقی ​​لنگردار، بنرهای بزرگتر و بلندتری هستند. ارتفاع آنها متغیر است و می توانند به اندازه صفحه نمایش دستگاه باشند. بنرهای تطبیقی ​​درون خطی برای برنامه‌هایی که آگهی‌های بنر را در محتوای قابل پیمایش قرار می‌دهند، بیش از بنرهای تطبیقی ​​لنگردار توصیه می‌شوند. برای جزئیات بیشتر به بنرهای تطبیقی ​​درون خطی مراجعه کنید.

موضوعات دیگر را بررسی کنید