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

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

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

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

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

والغرض منها هو وضعها في محتوى قابل للتمرير، على سبيل المثال:

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

قبل البدء

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

  • تأكّد من استخدام أحدث إصدار من حزمة SDK لإعلانات Google على الأجهزة الجوّالة، واستخدام أحدث إصدارات من محوّلات التوسّط في حال استخدام التوسّط.

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

  • قد تحتاج إلى تعديل عناصر أو إنشاء عناصر جديدة للعمل مع الأحجام القابلة للتكيف. مزيد من المعلومات

  • إن طرق الحصول على حجم الإعلان هي

    • AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
    • AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
    • AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
    • AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)

  • عند استخدام واجهات برمجة التطبيقات المضمّنة لإعلانات البانر التكيُّفية، تعرِض حزمة تطوير البرامج (SDK) لإعلانات Google على الأجهزة الجوّالة السمة AdSize بالعرض المحدّد وعلامة مضمّنة. يكون الارتفاع صفرًا أو maxHeight، بناءً على واجهة برمجة التطبيقات التي تستخدمها. ويكون الارتفاع الفعلي للإعلان متاحًا عند عرضه.

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

التنفيذ

اتّبِع الخطوات أدناه لاستخدام إعلان بانر تكيُّفي مضمّن بسيط.

  1. احصل على حجم إعلان بانر تكيُّفي مضمَّن. سيتم استخدام الحجم الذي تحصل عليه لطلب إعلان البانر التكيُّفي. للحصول على حجم الإعلان التكيّفي، يُرجى اتّباع الخطوات التالية:
    1. اطّلِع على عرض الجهاز المستخدم بوحدات بكسل مستقلة للكثافة، أو اضبط عرضك الخاص إذا كنت لا تريد استخدام عرض الشاشة الكامل. يمكنك استخدام MediaQuery.of(context) لمعرفة عرض الشاشة.
    2. استخدِم الطرق الثابتة المناسبة في فئة حجم الإعلان، مثل AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width) للحصول على عنصر AdSize تكيّفي مضمَّن مع الاتجاه الحالي.
    3. إذا كنت تريد وضع حد لارتفاع إعلان البانر، يمكنك استخدام الطريقة الثابتة AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
  2. ويمكنك إنشاء عنصر AdManagerBannerAd باستخدام رقم تعريف الوحدة الإعلانية وحجم الإعلان التكيُّفي وكائن طلب الإعلان.
  3. حمِّل الإعلان.
  4. في استدعاء onAdLoaded، استخدِم AdManagerBannerAd.getPlatformAdSize() للحصول على حجم إعلان النظام الأساسي المعدَّل وتعديل ارتفاع الحاوية AdWidget.

مثال التعليمة البرمجية

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

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

/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
  @override
  _InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}

class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
  static const _insets = 16.0;
  AdManagerBannerAd? _inlineAdaptiveAd;
  bool _isLoaded = false;
  AdSize? _adSize;
  late Orientation _currentOrientation;

  double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _currentOrientation = MediaQuery.of(context).orientation;
    _loadAd();
  }

  void _loadAd() async {
    await _inlineAdaptiveAd?.dispose();
    setState(() {
      _inlineAdaptiveAd = null;
      _isLoaded = false;
    });

    // Get an inline adaptive size for the current orientation.
    AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
        _adWidth.truncate());

    _inlineAdaptiveAd = AdManagerBannerAd(
      // TODO: replace with your own ad unit.
      adUnitId: '<your-ad-unit>',
      size: size,
      request: AdManagerAdRequest(),
      listener: AdManagerBannerAdListener(
        onAdLoaded: (Ad ad) async {
          print('Inline adaptive banner loaded: ${ad.responseInfo}');

          // After the ad is loaded, get the platform ad size and use it to
          // update the height of the container. This is necessary because the
          // height can change after the ad is loaded.
          AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
          final AdSize? size = await bannerAd.getPlatformAdSize();
          if (size == null) {
            print('Error: getPlatformAdSize() returned null for $bannerAd');
            return;
          }

          setState(() {
            _inlineAdaptiveAd = bannerAd;
            _isLoaded = true;
            _adSize = size;
          });
        },
        onAdFailedToLoad: (Ad ad, LoadAdError error) {
          print('Inline adaptive banner failedToLoad: $error');
          ad.dispose();
        },
      ),
    );
    await _inlineAdaptiveAd!.load();
  }

  /// Gets a widget containing the ad, if one is loaded.
  ///
  /// Returns an empty container if no ad is loaded, or the orientation
  /// has changed. Also loads a new ad if the orientation changes.
  Widget _getAdWidget() {
    return OrientationBuilder(
      builder: (context, orientation) {
        if (_currentOrientation == orientation &&
            _inlineAdaptiveAd != null &&
            _isLoaded &&
            _adSize != null) {
          return Align(
              child: Container(
            width: _adWidth,
            height: _adSize!.height.toDouble(),
            child: AdWidget(
              ad: _inlineAdaptiveAd!,
            ),
          ));
        }
        // Reload the ad if the orientation changes.
        if (_currentOrientation != orientation) {
          _currentOrientation = orientation;
          _loadAd();
        }
        return Container();
      },
    );
  }

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(
        title: Text('Inline adaptive banner example'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: _insets),
          child: ListView.separated(
            itemCount: 20,
            separatorBuilder: (BuildContext context, int index) {
              return Container(
                height: 40,
              );
            },
            itemBuilder: (BuildContext context, int index) {
              if (index == 10) {
                return _getAdWidget();
              }
              return Text(
                'Placeholder text',
                style: TextStyle(fontSize: 24),
              );
            },
          ),
        ),
      ));

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