تشغل إعلانات البانر مساحةً داخل تنسيق التطبيق، إما في أعلى شاشة الجهاز أو أسفلها. تبقى على الشاشة أثناء تفاعل المستخدمين مع التطبيق، ويمكن تحديثها تلقائيًا بعد فترة زمنية معينة. إذا كنت مبتدئًا في مجال الإعلان على الأجهزة الجوّالة، ستكون بمثابة نقطة بداية رائعة.
يوضّح لك هذا الدليل كيفية دمج إعلانات البانر منAd Manager في أحد تطبيقات iOS. وبالإضافة إلى مقتطفات الرموز والتعليمات، يتضمّن التقرير معلومات حول تحديد حجم إعلانات البانر بشكلٍ صحيح وروابط تؤدي إلى موارد إضافية.
المتطلبات الأساسية
- املأ دليل البدء.
الاختبار دائمًا مع الإعلانات الاختبارية
عند إنشاء تطبيقاتك واختبارها، تأكّد من استخدام إعلانات اختبارية بدلاً من إعلانات مباشرة وإنتاجية. وقد يؤدي عدم إجراء ذلك إلى تعليق حسابك.
تتمثل أسهل طريقة لتحميل الإعلانات الاختبارية في استخدام رقم تعريف الوحدة الإعلانية التجريبية المخصّص
لإعلانات البانر لنظام التشغيل iOS:
/6499/example/banner
وقد تم ضبطه خصيصًا لعرض إعلانات اختبارية لكل طلب، ويمكنك استخدامه في تطبيقاتك الخاصة أثناء الترميز والاختبار وتصحيح الأخطاء. ما عليك سوى التأكد من استبداله برقم تعريف وحدتك الإعلانية قبل نشر تطبيقك.
لمزيد من المعلومات عن آلية عمل الإعلانات الاختبارية في "SDK لإعلانات الأجهزة الجوّالة"، اطّلع على الإعلانات الاختبارية.
إنشاء GAMBannerView
يتم عرض إعلانات البانر في عناصر
GAMBannerView
،
لذا فإنّ الخطوة الأولى نحو دمج إعلانات البانر هي تضمين
GAMBannerView
في التسلسل الهرمي لطريقة العرض. يتم ذلك عادةً باستخدام "أداة إنشاء الواجهة" أو بشكل آلي.
أداة إنشاء الواجهة
يمكن إضافة GAMBannerView
إلى مخطط القصة أو ملف xib
كأي طريقة عرض عادية. عند استخدام هذه الطريقة، احرص على إضافة قيود العرض والارتفاع
لتتناسب مع حجم الإعلان الذي تريد عرضه. على سبيل المثال،
عند عرض بانر (320×50)، استخدِم قيدًا للعرض يبلغ 320 نقطة وقيدًا للارتفاع يبلغ 50 نقطة.
آليًا
يمكن أيضًا إنشاء مثيل GAMBannerView
مباشرةً.
في ما يلي مثال على كيفية إنشاء GAMBannerView
،
بالمحاذاة إلى وسط الجزء السفلي من المنطقة الآمنة على الشاشة، وبحجم بانر 320×50:
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController { var bannerView: GAMBannerView! override func viewDidLoad() { super.viewDidLoad() // In this case, we instantiate the banner with desired ad size. bannerView = GAMBannerView(adSize: GADAdSizeBanner) 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) ]) } }
Objective-C
@import GoogleMobileAds; @interface ViewController () @property(nonatomic, strong) GAMBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // In this case, we instantiate the banner with desired ad size. self.bannerView = [[GAMBannerView alloc] initWithAdSize:GADAdSizeBanner]; [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
تجدر الإشارة إلى أنّنا لا نضع قيودًا على العرض أو الارتفاع في هذه الحالة، لأنّ حجم الإعلان المقدّم سيمنح البانر حجمًا أساسيًا للمحتوى بحجم طريقة العرض.
إذا كنت لا تريد استخدام حجم عادي محدّد باستخدام حجم ثابت، يمكنك ضبط
حجم مخصّص باستخدام
GADAdSizeFromCGSize
.
راجِع قسم حجم البانر للحصول على مزيد من المعلومات.
ضبط GAMBannerView المواقع
لتحميل الإعلانات وعرضها، يتطلب GAMBannerView
ضبط بعض الخصائص.
rootViewController
- تُستخدَم وحدة التحكم في العرض هذه لتقديم تراكب عند النقر على الإعلان. يجب عادةً ضبطها على وحدة التحكّم في طريقة العرض التي تتضمّنGAMBannerView
.adUnitID
- رقم تعريف الوحدة الإعلانية الذي يجب أن يتم من خلالهGAMBannerView
تحميل الإعلانات.
إليك مثال على رمز يوضّح كيفية ضبط السمتَين المطلوبتَين في طريقة viewDidLoad
في UIViewController:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "/6499/example/banner" bannerView.rootViewController = self }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"/6499/example/banner"; self.bannerView.rootViewController = self; }
تحميل إعلان
وبعد ضبط GAMBannerView
وضبط خصائصه، يحين وقت تحميل الإعلان. ويتم ذلك من خلال استدعاء loadRequest:
على كائن
GAMRequest
:
Swift
override func viewDidLoad() { super.viewDidLoad() ... bannerView.adUnitID = "/6499/example/banner" bannerView.rootViewController = self bannerView.load(GAMRequest()) }
Objective-C
- (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.adUnitID = @"/6499/example/banner"; self.bannerView.rootViewController = self; [self.bannerView loadRequest:[GAMRequest request]]; }
GAMRequest تمثل الكائنات طلب إعلان واحدًا، وتحتوي على خصائص لأشياء مثل معلومات الاستهداف.
إذا تعذّر تحميل إعلانك، لن تحتاج إلى طلب إعلان آخر بوضوح طالما كنت قد أعددت وحدتك الإعلانية لإعادة التحميل، وذلك لأنّ حزمة تطوير البرامج (SDK) لإعلانات Google على الأجهزة الجوّالة تلتزم بأي معدّل تحديث حدّدته في واجهة المستخدم فيAd Manager . في حال عدم تفعيل إعادة التحميل، ستحتاج إلى إصدار طلب جديد.
أحداث الإعلانات
من خلال استخدام GADBannerViewDelegate
، يمكنك الاطّلاع على أحداث مراحل النشاط، مثل إغلاق إعلان أو مغادرة المستخدم التطبيق.
التسجيل لأحداث البانر
للتسجيل في أحداث إعلانات البانر، اضبط السمة delegate
في GAMBannerView
على عنصر ينفّذ بروتوكول GADBannerViewDelegate
. بشكل عام، تكون الفئة التي تنفّذ إعلانات البانر
هي الفئة المفوَّضة، وفي هذه الحالة، يمكن ضبط السمة delegate
على self
.
Swift
import GoogleMobileAds import UIKit class ViewController: UIViewController, GADBannerViewDelegate { var bannerView: GAMBannerView! override func viewDidLoad() { super.viewDidLoad() ... bannerView.delegate = self } }
Objective-C
@import GoogleMobileAds; @interface ViewController () <GADBannerViewDelegate> @property(nonatomic, strong) GAMBannerView *bannerView; @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; ... self.bannerView.delegate = self; }
تنفيذ أحداث إعلانات البانر
تمّ وضع علامة على كلّ طريقة في GADBannerViewDelegate
باعتبارها اختيارية، لذا ما عليك سوى تنفيذ الطُرق التي تريدها. ينفذ هذا المثال كل طريقة ويسجل رسالة إلى وحدة التحكم:
Swift
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") }
Objective-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.
حالات الاستخدام
في ما يلي بعض الأمثلة على حالات الاستخدام لطرق أحداث الإعلانات هذه.
إضافة إعلان بانر إلى التسلسل الهرمي لطريقة العرض بعد استلام الإعلان
يمكنك تأخير إضافة GAMBannerView
إلى التدرّج الهرمي لطريقة العرض إلى أن يتم عرض الإعلان. يمكنك إجراء ذلك من خلال الاستماع إلى حدث bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { // Add banner to view and add constraints as above. addBannerViewToView(bannerView) }
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView { // Add bannerView to view and add constraints as above. [self addBannerViewToView:self.bannerView]; }
إضافة تأثيرات حركية إلى إعلان بانر
يمكنك أيضًا استخدام الحدث bannerViewDidReceiveAd:
لتحريك إعلان بانر
بعد عرضه، كما هو موضّح في المثال التالي:
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) { bannerView.alpha = 0 UIView.animate(withDuration: 1, animations: { bannerView.alpha = 1 }) }
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView { bannerView.alpha = 0; [UIView animateWithDuration:1.0 animations:^{ bannerView.alpha = 1; }]; }
إيقاف التطبيق مؤقتًا واستئنافه
يتضمّن بروتوكول GADBannerViewDelegate
طرقًا لإشعارك بالأحداث، مثلاً
عندما تؤدي نقرة إلى عرض عنصر مركّب أو رفضه.
إذا كنت تريد تتبُّع ما إذا كانت هذه الأحداث ناتجة عن إعلانات،
عليك تسجيل طرق GADBannerViewDelegate
هذه.
لرصد جميع أنواع العروض التقديمية التي تظهر على سطح الفيديو أو استدعاءات المتصفِّحات الخارجية،
وليس فقط تلك التي تنشأ من النقرات على الإعلانات، من الأفضل أن يستمع تطبيقك إلى الطرق المكافئة على UIViewController
أو UIApplication
. إليك جدول يعرض طُرق iOS المكافئة التي يتم استدعاؤها في الوقت نفسه مع طرق GADBannerViewDelegate
:
طريقة GADBannerView بدقة | طريقة iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: في UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: في UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: في UIViewController |
أحجام البانر
يسرد الجدول التالي أحجام البانر العادية.
الحجم بالنقاط (عرض × ارتفاع) | الوصف | مدى التوفّر | ثابت حجم الإعلان |
---|---|---|---|
320x50 | بانر | الهواتف والأجهزة اللوحية | GADAdSizeBanner |
320×100 | بانر كبير | الهواتف والأجهزة اللوحية | GADAdSizeLargeBanner |
300 × 250 | إعلان مستطيل متوسط من مكتب الإعلانات التفاعلية (IAB) | الهواتف والأجهزة اللوحية | GADAdSizeMediumRectangle |
468×60 | بانر بالحجم الكامل لمكتب الإعلانات التفاعلية | الأجهزة اللوحية | GADAdSizeFullBanner |
728×90 | قائمة صدارة IAB | الأجهزة اللوحية | GADAdSizeLeaderboard |
العرض الذي تم إدخاله × الارتفاع التكيُّفي | إعلان البانر التكيُّفي | الهواتف والأجهزة اللوحية | لا ينطبق |
أحجام إعلانات مخصصة
لتحديد حجم بانر مخصّص، اضبط الحجم المطلوب باستخدام
GADAdSizeFromCGSize
، كما هو موضّح
هنا:
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
حجم إعلان مخصص
بالإضافة إلى الوحدات الإعلانية العادية، يسمح لك "مدير إعلانات Google" بعرض أيّ
وحدة إعلانية في التطبيق. ويجب أن يتطابق حجم الإعلان (العرض والارتفاع) المحدّد لطلب إعلان
مع أبعاد عرض الإعلان (GAMBannerView
) المعروض في
التطبيق. لضبط حجم مخصّص، استخدِم
GADAdSizeFromCGSize
.
Swift
// Define custom GADAdSize of 250x250 for GAMBannerView. let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250)) bannerView = GAMBannerView(adSize: customAdSize)
Objective-C
// Define custom GADAdSize of 250x250 for GAMBannerView GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250)); self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];
شاهد مثال "أحجام إعلانات متعددة" في "مدير الإعلانات" لتنفيذ حجم إعلان مخصّص في التطبيق التجريبي لواجهة برمجة تطبيقات iOS.
أحجام إعلانات متعددة
يسمح لك "مدير الإعلانات" بتحديد أحجام إعلانات متعددة قد تكون مؤهَّلة للعرض في GAMBannerView
. هناك ثلاث خطوات مطلوبة
لاستخدام هذه الميزة:
في واجهة مستخدم "مدير الإعلانات"، يمكنك إنشاء عنصر يستهدف الوحدة الإعلانية نفسها المرتبطة بتصميمات إعلانات ذات أحجام مختلفة.
في تطبيقك، اضبط سمة
validAdSizes
علىGAMBannerView
:Swift
// Define an optional array of GADAdSize to specify all valid sizes that are appropriate // for this slot. Never create your own GADAdSize directly. Use one of the // predefined standard ad sizes (such as GADAdSizeBanner), or create one using // the GADAdSizeFromCGSize method. // // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note // that all desired sizes should be included in the validAdSizes array. bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner), NSValueFromGADAdSize(GADAdSizeMediumRectangle), NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]
Objective-C
// Define an optional array of GADAdSize to specify all valid sizes that are appropriate // for this slot. Never create your own GADAdSize directly. Use one of the // predefined standard ad sizes (such as GADAdSizeBanner), or create one using // the GADAdSizeFromCGSize method. // // Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note // that all desired sizes should be included in the validAdSizes array. self.bannerView.validAdSizes = @[ NSValueFromGADAdSize(GADAdSizeBanner), NSValueFromGADAdSize(GADAdSizeMediumRectangle), NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20))) ];
يمكنك تطبيق طريقة
GADAdSizeDelegate
لرصد أي تغيير في حجم الإعلان.Swift
public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)
Objective-C
- (void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;
تذكّر تحديد المفوَّض قبل تقديم طلب إنشاء إعلان.
Swift
bannerView.adSizeDelegate = self
Objective-C
self.bannerView.adSizeDelegate = self;
شاهد مثال "أحجام إعلانات متعددة" في "مدير الإعلانات" لتنفيذ حجم إعلان مخصّص في التطبيق التجريبي لواجهة برمجة تطبيقات iOS.
احتساب عدد مرات الظهور يدويًا
يمكنك إرسال إشعارات مرات الظهور يدويًا إلى "مدير الإعلانات" إذا كانت لديك شروط خاصة
لوقت تسجيل مرة ظهور. يمكن تنفيذ ذلك من خلال تفعيل GAMBannerView
أولاً لمرات الظهور اليدوية قبل تحميل إعلان:
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
عندما تكتشف أنّ أحد الإعلانات قد تم عرضه بنجاح ويظهر على الشاشة، يمكنك تنشيط مرة الظهور يدويًا:
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
أحداث التطبيقات
تتيح لك أحداث التطبيقات إنشاء إعلانات يمكنها إرسال رسائل إلى رمز التطبيق. ويمكن للتطبيق بعد ذلك اتخاذ إجراءات بناءً على هذه الرسائل.
يمكنك الاطّلاع على أحداث التطبيقات الخاصة بـ "مدير إعلانات Google" باستخدام GADAppEventDelegate
.
قد تقع هذه الأحداث في أيّ وقت خلال مراحل نشاط الإعلان، حتى
قبل طلب bannerViewDidReceiveAd:
لكائن GADBannerViewDelegate
.
Swift
// 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?)
Objective-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;
يمكن تنفيذ طرق أحداث التطبيق في وحدة تحكُّم في الملف الشخصي:
Swift
import GoogleMobileAds class ViewController: UIViewController, GADAppEventDelegate { }
Objective-C
@import GoogleMobileAds; @interface ViewController : UIViewController <GADAppEventDelegate> { } @end
تذكّر إعداد المفوَّض باستخدام السمة appEventDelegate
قبل تقديم طلب إنشاء إعلان.
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
في ما يلي مثال يوضّح كيفية تغيير لون خلفية تطبيقك عن طريق تحديد اللون من خلال حدث في التطبيق:
Swift
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 } } }
Objective-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 التجريبي.
مراجع إضافية
أمثلة على GitHub
برامج تعليمية للفيديو في "إعلانات Google" على الأجهزة الجوّالة
الخطوات التالية
مزيد من المعلومات عن خصوصية المستخدم