إعلانات البانر التكيُّفية الثابتة

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

لاختيار أفضل حجم للإعلان، تستخدِم إعلانات البانر التكيُّفية نِسب عرض إلى ارتفاع ثابتة بدلاً من ارتفاعات ثابتة. يؤدي ذلك إلى ظهور إعلانات بانر تشغل جزءًا أكثر اتساقًا من الشاشة على جميع الأجهزة، كما توفّر فرصًا لتحسين الأداء.

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

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

حالات استخدام إعلانات البانر التكيُّفية

تم تصميم إعلانات البانر التكيُّفية لتكون بديلاً بسهولة

تُستخدم أحجام البانر هذه عادةً كإعلانات بانر ثابتة، ويتم تأمينها عادةً في أعلى الشاشة أو أسفلها.

بالنسبة إلى إعلانات البانر الثابتة هذه، ستكون نسبة العرض إلى الارتفاع عند استخدام إعلانات البانر التكيُّفية مشابهة لنسبة الإعلان العادي مقاس 320×50، كما يتضّح في الأمثلة الثلاثة أدناه:


بانر 320x50
إعلان البانر التكيُّفي
إعلان بانر ذكي

يستفيد إعلان البانر التكيُّفي من حجم الشاشة المتاح بشكلٍ أفضل. بالإضافة إلى ذلك، مقارنةً بإعلان البانر الذكي، يُعد إعلان البانر التكيّفي خيارًا أفضل للأسباب التالية:

  • فهو يستخدم أي عرض تقدّمه، بدلاً من فرض العرض ليكون بملء الشاشة، ما يتيح لك حساب المنطقة الآمنة على نظام التشغيل iOS، وعرض رسومات مقطوعة على Android.

  • يحدد الارتفاع الأمثل للجهاز المحدد، بدلاً من وجود ارتفاع ثابت عبر الأجهزة ذات الأحجام المختلفة، للتخفيف من آثار تقسيم الأجهزة.

ملاحظات التنفيذ

عند تنفيذ إعلانات البانر التكيُّفية في تطبيقك، يُرجى مراعاة النقاط التالية:

  • يجب أن تعرف عرض العرض الذي سيتم وضع الإعلان فيه، ويجب أن يأخذ ذلك في الاعتبار عرض الجهاز وأي مناطق آمنة أو قطع يمكن تطبيقها.
  • تأكَّد من أنّ خلفية عرض الإعلان معتمة بما يتوافق مع سياسات AdMob عندما يتم عرض أحجام إعلانات أصغر لا تملأ الخانة الإعلانية.
  • تأكَّد من استخدام أحدث إصدار من مكوّن Flutter الإضافي لإعلانات Google على الأجهزة الجوّالة.
  • تم تصميم أحجام البانر التكيُّفية لتعمل على أفضل وجه عند استخدام العرض الكامل المتاح. في معظم الحالات، سيكون هذا هو العرض الكامل لشاشة الجهاز المستخدم. تأكَّد من مراعاة المناطق الآمنة السارية.
  • ستعمل حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" على تحديد حجم إعلان البانر بارتفاع إعلان محسّن للعرض المحدّد عند استخدام واجهات برمجة تطبيقات AdSize التكيُّفية.
  • تتوفّر طريقتان للحصول على حجم إعلان تكيُّفي: AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) لطلب اتجاه معيّن وAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) للاتجاه الحالي في وقت التنفيذ.
  • وسيكون الحجم الذي يظهر بعرض معيّن على جهاز معيّن هو نفسه دائمًا، وبالتالي بعد اختبار التنسيق على جهاز معيّن، يمكنك التأكد من أنّ حجم الإعلان لن يتغيّر.
  • لا يكون ارتفاع إعلان البانر الثابت أكبر من القيمة الأقل من ارتفاع 15% في ارتفاع الجهاز أو عن 90 بكسل مستقل للكثافة، ولا يقلّ أبدًا عن 50 وحدة بكسل مستقلة الكثافة.

التشغيل السريع

اتّبِع الخطوات التالية لتنفيذ إعلان بانر تكيُّفي بسيط مثبّت على الشاشة.

  1. احصل على حجم إعلان بانر تكيُّفي. سيُستخدم الحجم الذي تحصل عليه لطلب إعلان البانر التكيّفي. للحصول على حجم الإعلان التكيُّفي، يُرجى التأكُّد ممّا يلي:
    1. اطّلِع على عرض الجهاز المستخدَم بوحدات بكسل مستقلة الكثافة، أو اضبط عرضك الخاص إذا لم تكن تريد استخدام عرض الشاشة الكامل. يمكنك استخدام "MediaQuery.of(context)" للحصول على عرض الشاشة.
    2. استخدِم الطرق الثابتة المناسبة لفئة حجم الإعلان، مثل AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)للحصول على كائن AdSize تكيُّفي للاتجاه الحالي.
  2. أنشئ عنصر BannerAd باستخدام رقم تعريف وحدتك الإعلانية وحجم الإعلان التكيّفي وكائن طلب الإعلان.
  3. حمِّل الإعلان مثلما تفعل مع إعلان بانر عادي، واعرضه من AdWidget تمامًا كما تفعل في عرض الإعلان العادي.

مثال الرمز البرمجي

في ما يلي مثال على تطبيق مصغّر يعرض إعلان بانر تكيُّفي ثابتًا يتناسب مع عرض الشاشة:

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
  @override
  _AnchoredAdaptiveExampleState createState() =>
      _AnchoredAdaptiveExampleState();
}

class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
  BannerAd? _anchoredAdaptiveAd;
  bool _isLoaded = false;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _loadAd();
  }

  Future<void> _loadAd() async {
    // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
    final AnchoredAdaptiveBannerAdSize? size =
        await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
            MediaQuery.of(context).size.width.truncate());

    if (size == null) {
      print('Unable to get height of anchored banner.');
      return;
    }

    _anchoredAdaptiveAd = BannerAd(
      // TODO: replace these test ad units with your own ad unit.
      adUnitId: Platform.isAndroid
          ? 'ca-app-pub-3940256099942544/6300978111'
          : 'ca-app-pub-3940256099942544/2934735716',
      size: size,
      request: AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (Ad ad) {
          print('$ad loaded: ${ad.responseInfo}');
          setState(() {
            // When the ad is loaded, get the ad size and use it to set
            // the height of the ad container.
            _anchoredAdaptiveAd = ad as BannerAd;
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Anchored adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    return _anchoredAdaptiveAd!.load();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('Anchored adaptive banner example'),
        ),
        body: Center(
          child: Stack(
            alignment: AlignmentDirectional.bottomCenter,
            children: <Widget>[
              ListView.separated(
                  padding: const EdgeInsets.symmetric(horizontal: 16.0),
                  itemBuilder: (context, index) {
                    return Text(
                      'Placeholder text',
                      style: TextStyle(fontSize: 24),
                    );
                  },
                  separatorBuilder: (context, index) {
                    return Container(height: 40);
                  },
                  itemCount: 20),
              if (_anchoredAdaptiveAd != null && _isLoaded)
                Container(
                  color: Colors.green,
                  width: _anchoredAdaptiveAd!.size.width.toDouble(),
                  height: _anchoredAdaptiveAd!.size.height.toDouble(),
                  child: AdWidget(ad: _anchoredAdaptiveAd!),
                )
            ],
          ),
        ),
      );

  @override
  void dispose() {
    super.dispose();
    _anchoredAdaptiveAd?.dispose();
  }
}

تُستخدم هنا الدالة AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSizeللحصول على حجم إعلان البانر في موضع ثابت لاتجاه الواجهة الحالية. لتحميل بانر ثابت مسبقًا في اتجاه معيّن، استخدِم علامة AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width) ومرِّر الاتجاه المطلوب.

مثال كامل على GitHub

إعلان البانر التكيُّفي