تبلیغات بنری

پلتفرم مورد نظر: اندروید، iOS، یونیتی، فلاتر

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

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

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

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

پیش‌نیازها

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

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

ساده‌ترین راه برای بارگذاری تبلیغات آزمایشی، استفاده از شناسه واحد تبلیغات آزمایشی اختصاصی ما برای بنرهای iOS است:

/21775744923/example/adaptive-banner

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

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

ایجاد یک GAMBannerView

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

از نظر برنامه‌نویسی

یک GAMBannerView همچنین می‌تواند مستقیماً نمونه‌سازی شود. مثال زیر یک GAMBannerView ایجاد می‌کند:

سویفت 

// Initialize the banner view.
bannerView = AdManagerBannerView()

bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
  // Align the banner's bottom edge with the safe area's bottom edge
  bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
  // Center the banner horizontally in the view
  bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
BannerSnippets.swift

سویفت‌یو‌آی

برای استفاده از AdManagerBannerView ، یک UIViewRepresentable ایجاد کنید:

private struct BannerViewContainer: UIViewRepresentable {
  typealias UIViewType = BannerView
  let adSize: AdSize

  init(_ adSize: AdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> BannerView {
    let banner = BannerView(adSize: adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(Request())
    banner.delegate = context.coordinator
    return banner
  }

  func updateUIView(_ uiView: BannerView, context: Context) {}

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

UIViewRepresentable خود را به سلسله مراتب نما اضافه کنید و مقادیر height و width را مشخص کنید:

var body: some View {
  Spacer()
  // Request an anchored adaptive banner with a width of 375.
  let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
  BannerViewContainer(adSize)
    .frame(width: adSize.size.width, height: adSize.size.height)
}
BannerContentView.swift

هدف-سی 

// Initialize the banner view.
self.bannerView = [[GAMBannerView alloc] init];

self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];

// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
    // Align the banner's bottom edge with the safe area's bottom edge
    [self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
    // Center the banner horizontally in the view
    [self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
BannerSnippets.m

رابط کاربری سازنده

می‌توانید یک GAMBannerView به یک فایل storyboard یا xib اضافه کنید. هنگام استفاده از این روش، مطمئن شوید که فقط محدودیت‌های موقعیت را روی بنر اضافه می‌کنید. برای مثال، هنگام نمایش یک بنر تطبیقی ​​در پایین صفحه، پایین نمای بنر را برابر با بالای Bottom Layout Guide تنظیم کنید و محدودیت centerX را برابر با centerX نمای بالا قرار دهید.

اندازه تبلیغ را تنظیم کنید

ساختار GADSize را روی یک نوع بنر تطبیقی ​​متصل با عرض مشخص تنظیم کنید:

سویفت 

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

هدف-سی 

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

بارگذاری یک تبلیغ

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

سویفت 

bannerView.load(AdManagerRequest())
ViewController.swift

سویفت‌یو‌آی 

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

هدف-سی 

[self.bannerView loadRequest:[GAMRequest request]];
ViewController.m

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

تازه کردن یک آگهی

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

مدیریت تغییرات جهت گیری

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

سویفت 

override func viewWillTransition(
  to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
  coordinator.animate(alongsideTransition: { _ in
    // Load a new ad for the new orientation.
  })
}
BannerSnippets.swift

هدف-سی 

- (void)viewWillTransitionToSize:(CGSize)size
       withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
  [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
    // Load a new ad for the new orientation.
  } completion:nil];
}
BannerSnippets.m

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

با استفاده از GADBannerViewDelegate ، می‌توانید به رویدادهای چرخه عمر، مانند زمانی که یک تبلیغ بسته می‌شود یا کاربر برنامه را ترک می‌کند، گوش دهید.

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

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

سویفت 

bannerView.delegate = self
ViewController.swift

سویفت‌یو‌آی 

banner.delegate = context.coordinator
BannerContentView.swift

هدف-سی 

self.bannerView.delegate = self;
ViewController.m

رویدادهای بنری را پیاده‌سازی کنید

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

سویفت 

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  print(#function)
}

func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
  print(#function + ": " + error.localizedDescription)
}

func bannerViewDidRecordClick(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidRecordImpression(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillPresentScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewWillDismissScreen(_ bannerView: BannerView) {
  print(#function)
}

func bannerViewDidDismissScreen(_ bannerView: BannerView) {
  print(#function)
}
ViewController.swift

هدف-سی 

- (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");
}
ViewController.m

برای پیاده‌سازی متدهای نماینده بنر در برنامه iOS API Demo، به مثال نماینده تبلیغات مراجعه کنید.

سوئیفت آبجکتیو-سی

موارد استفاده

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

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

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

سویفت 

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

هدف-سی 

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

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

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

سویفت 

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

هدف-سی 

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

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

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

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

متد GADBannerViewDelegate روش iOS
bannerViewWillPresentScreen: viewWillDisappear:
bannerViewWillDismissScreen: viewWillAppear:
bannerViewDidDismissScreen: viewDidAppear:

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

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

سویفت 

bannerView.enableManualImpressions = true

هدف-سی 

self.bannerView.enableManualImpressions = YES;

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

سویفت 

bannerView.recordImpression()

هدف-سی 

[self.bannerView recordImpression];

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

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

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

سویفت 

// 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: AdManagerBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

هدف-سی 

// 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, AppEventDelegate {}

هدف-سی 

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

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

سویفت 

bannerView.appEventDelegate = self

هدف-سی 

self.bannerView.appEventDelegate = self;

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

سویفت 

func bannerView(_ banner: AdManagerBannerView, 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
    }
  }
}

هدف-سی 

- (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>

برای پیاده‌سازی رویدادهای برنامه در برنامه آزمایشی API iOS، به مثال رویدادهای برنامه مدیریت تبلیغات مراجعه کنید.

سوئیفت آبجکتیو-سی

منابع اضافی

مثال‌ها در گیت‌هاب

مراحل بعدی

بنرهای تاشو

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

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

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

کاوش در موضوعات دیگر