تحديد أنماط الإعلانات المدمجة مع المحتوى

اختيار النظام الأساسي: Android‏ جديد Android‏ iOS‏ Flutter‏

تتيح إعدادات "الأنماط المدمجة مع المحتوى" لـ "مدير إعلانات Google" معالجة عرض إعلاناتكم المدمجة مع المحتوى استنادًا إلى الأنماط المدمجة مع المحتوى التي تحدّدونها في المنتج. في البداية، حدِّدوا الحجم والاستهداف. بعد ذلك، أضيفوا لغات HTML وCSS وJavaScript لتحديد إعلانات متجاوبة وعرضها بجودة عالية على جميع الشاشات. لستم بحاجة إلى إجراء أي عملية عرض، إذ يطبّق "مدير الإعلانات" تلقائيًا النمط المدمج مع المحتوى المناسب للوجهة. يتم تنفيذ "الأنماط المدمجة مع المحتوى" تمامًا مثل "إعلانات البانر"، باستخدام GAMBannerView. ويمكن استخدامها مع حجم إعلان ثابت يتم تحديده مسبقًا، أو حجم إعلان مرن يتم تحديده في وقت التشغيل.

المتطلبات الأساسية

  • Google Mobile Ads SDK الإصدار 7.14.0 أو الإصدارات الأحدث

يفترض هذا الدليل توفّر بعض المعرفة العملية بـ Google Mobile Ads SDK. إذا لم تفعلوا ذلك بعد، ننصحكم بالاطّلاع على دليل البدء.

الحجم الثابت

تتيح لكم "الأنماط المدمجة مع المحتوى" ذات الحجم الثابت التحكّم في عرض الإعلان المدمج مع المحتوى وارتفاعه. لضبط حجم ثابت، اتّبعوا الخطوات التالية:

  1. أنشئوا عنصر إعلان في واجهة مستخدم "مدير الإعلانات" واختاروا أحد الأحجام المحدّدة مسبقًا من القائمة المنسدلة Size.

  2. في أداة Interface Builder، اضبطوا عرض GAMBannerView وارتفاعه ليطابقا الحجم المحدّد مسبقًا الذي اخترتموه في الخطوة 1. يمكنكم الاطّلاع على قائمة بالأحجام وثوابت GADAdSize المقابلة لها في قسم "حجم البانر ".

إنّ تنفيذ "الأنماط المدمجة مع المحتوى" بحجم ثابت بسيط مثل اتّباع التعليمات الواردة في مقالة طلب البانر الأول، ولكنكم تحصلون على المرونة والتحكّم في لغات HTML وCSS وJavaScript لمنح "إعلان البانر" مظهرًا وشعورًا مدمجَين مع المحتوى بشكل طبيعي في تطبيقكم.

الحجم المرن

في بعض الحالات، قد لا يكون الحجم الثابت مناسبًا. على سبيل المثال، قد تريدون أن يتطابق عرض الإعلان مع محتوى تطبيقكم، ولكنكم تحتاجون إلى تعديل ارتفاعه ديناميكيًا ليناسب محتوى الإعلان. للتعامل مع هذه الحالة، يمكنكم تحديد Fluid كحجم الإعلان في واجهة مستخدم "مدير الإعلانات"، ما يشير إلى أنّ حجم الإعلان يتم تحديده في وقت التشغيل في التطبيق. توفّر حزمة SDK ثابت GADAdSize خاصًا، kGADAdSizeFluid، للتعامل مع هذه الحالة. يتم تحديد ارتفاع حجم الإعلان المرن ديناميكيًا استنادًا إلى العرض الذي يحدّده الناشر، ما يسمح لـ GAMBannerView، بضبط ارتفاعه ليطابق ارتفاع مادة العرض الإبداعية.

الطلب المرن

على عكس أشكال الإعلانات الأخرى، لا يتضمّن حجم الإعلان kGADAdSizeFluid عرضًا محدّدًا مسبقًا، لذا احرصوا على ضبط عرض إطار البانر بشكل صريح في الرمز البرمجي أو في أداة Interface Builder. إذا لم يتم تحديد عرض، تضبط حزمة SDK تلقائيًا ارتفاع البانر استنادًا إلى العرض الكامل للجهاز.

إذا أرسلتم طلبًا متعدد الأحجام يتضمّن kGADAdSizeFluid، يتم دائمًا وضع الإعلان الذي يتم عرضه داخل حاوية مرنة ويتصرف كإعلان مرن. في حال عرض مادة عرض إبداعية غير مرنة في هذه الحاوية المرنة، توسّط حزمة SDK الإعلان في الحاوية حتى لا تضطروا إلى تعديل قيد العرض في كل مرة يتم فيها عرض إعلان جديد.

إنّ عملية تنفيذ طلب مرن بحجم واحد وطلب مرن متعدد الأحجام متشابهة جدًا، والفرق الوحيد هو أنّه بالنسبة إلى الطلب المتعدد الأحجام، يتم ضبط السمة validAdSizes لتحديد أحجام الإعلانات الصالحة لطلب عرض الإعلان:

Swift

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

Objective-C

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

إليكم الشكل الكامل للتنفيذ في الرمز البرمجي:

Swift

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

Objective-C

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

للاطّلاع على مثال على تنفيذ حجم الإعلان المرن في "مدير الإعلانات"، نزِّلوا تطبيق iOS API Demo بلغة Swift أو Objective-C.

تنزيل تطبيق API Demo

البروتوكول GADAdSizeDelegate

قد تحتاجون إلى معرفة ارتفاع البانر قبل تغيير حجم إعلانه. تُعلم الدالة adView:willChangeAdSizeTo: مفوّضها قبل تغيير عرض البانر إلى GADAdSize الجديد. لتلقّي إشعار قبل تغيير عرض البانر إلى حجم الإعلان الجديد، يجب أن يتوافق صفكم مع البروتوكول GADAdSizeDelegate.

في ما يلي نموذج لتنفيذ الدالة adView:willChangeAdSizeTo: التي توضّح كيفية الحصول على العرض والارتفاع الجديدَين للبانر:

Swift

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

Objective-C

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}