إضافة إعلان بانر AdMob والإعلانات المضمّنة المدمجة مع المحتوى إلى تطبيق Flutter

1. مقدمة

في هذا الدرس التطبيقي حول الترميز، يمكنك تنفيذ إعلان بانر AdMob وإعلان مضمّن مدمج مع المحتوى من AdMob في تطبيق Flutter.

ما الذي ستقوم ببنائه

يرشدك هذا الدرس التطبيقي حول الترميز خلال تنفيذ إعلان بانر مضمّن في AdMob وإعلانات AdMob المضمّنة في تطبيق Flutter باستخدام المكوّن الإضافي لإعلانات Google على الأجهزة الجوّالة في Flutter.

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

المعلومات التي ستطّلع عليها

  • كيفية إعداد المكوّن الإضافي لبرنامج Flutter لإعلانات Google على الأجهزة الجوّالة
  • كيفية تنفيذ إعلان بانر مضمّن وإعلانات تضم مكافأة في تطبيق Flutter

المتطلبات

  • الإصدار 4.1 من "استوديو Android" أو إصدار أحدث
  • Xcode 12 أو إصدار أحدث (لتطوير iOS)

ما هو تقييمك لمستوى خبرتك في استخدام AdMob؟

حديث متوسط بارع

ما هو تقييمك لمستوى خبرتك باستخدام Flutter؟

حديث متوسط بارع

2. إعداد بيئة تطوير Flutter

لإكمال هذا التمرين، تحتاج إلى برنامجَين، وهما Flutter SDK ومحرِّر.

يمكنك تشغيل الدرس التطبيقي حول الترميز باستخدام أي من الأجهزة التالية:

  • جهاز Android أو iOS فعلي متصل بجهاز الكمبيوتر وتم ضبطه على "وضع مطور البرامج".
  • محاكي iOS (يتطلب تثبيت أدوات Xcode).
  • محاكي Android (يتطلب عملية إعداد في "استوديو Android").
  • متصفّح (يجب توفُّر متصفّح Chrome لتصحيح الأخطاء)
  • كتطبيق سطح المكتب الذي يعمل بنظام التشغيل Windows أو Linux أو macOS. يجب إجراء تطوير على النظام الأساسي الذي تخطّط لنشر الإعلان عليه. لذا، إذا كنت ترغب في تطوير تطبيق سطح مكتب Windows، ينبغي لك تطويره على Windows للوصول إلى سلسلة الإصدار المناسبة. هناك متطلبات خاصة بنظام التشغيل تم تناولها بالتفصيل على docs.flutter.dev/desktop.

تنزيل الرمز

بعد تنزيل ملف ZIP، يمكنك استخراج محتواه. سيكون لديك مجلد باسم "admob-inline-ads-in-flutter-main".

بدلاً من ذلك، يمكنك استنساخ مستودع GitHub من سطر الأوامر:

$ git clone https://github.com/googlecodelabs/admob-inline-ads-in-flutter

يحتوي المستودع على ثلاثة مجلدات:

  • android_studio_folder.png إجراء التفعيل: بدء الرمز البرمجي الذي ستنشئه في هذا الدرس التطبيقي حول الترميز
  • android_studio_folder.png مكتمل: رمز مكتمل لهذا الدرس التطبيقي حول الترميز. (Java وObjective-C للرموز البرمجية الأصلية)
  • android_studio_folder.png complete_kotlin_swift: رمز مكتمل لهذا الدرس التطبيقي حول الترميز. (Kotlin وSwift للرموز البرمجية الأصلية)

3- إعداد تطبيق AdMob ووحداته الإعلانية

بما أنّ Flutter هي حزمة تطوير برامج (SDK) متعدّدة الأنظمة الأساسية، عليك إضافة تطبيق ووحدات إعلانية في AdMob.

الإعداد على جهاز Android

لإجراء عملية الإعداد لنظام التشغيل Android، عليك إضافة تطبيق Android وإنشاء وحدات إعلانية.

إضافة تطبيق Android

  1. في وحدة تحكُّم AdMob، انقر على إضافة تطبيق من قائمة التطبيقات.
  2. عند سؤالك عن هل نشرت تطبيقك على Google Play أو App Store؟، انقر على لا.
  3. أدخل AdMob inline ads في حقل اسم التطبيق، واختر Android كنظام أساسي.

d51828db0e2e4f6c.png

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

b918bf44362813a9.png

إنشاء وحدات إعلانية

لإضافة وحدات إعلانية:

  1. اختَر تطبيق إعلانات AdMob المضمّنة من قائمة التطبيقات في وحدة تحكُّم AdMob.
  2. انقر على قائمة الوحدات الإعلانية.

بانر

  1. انقر على إضافة وحدة إعلانية.
  2. اختَر بانر كتنسيق.
  3. أدخِل android-inline-banner في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال هذه العملية.

مدمج مع المحتوى

  1. انقر على إضافة وحدة إعلانية.
  2. اختَر الإعلانات المدمجة مع المحتوى (المتقدمة) كتنسيق.
  3. أدخِل android-inline-native في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال هذه العملية.

عادةً ما تستغرِق الوحدة الإعلانية الجديدة بضع ساعات لتتمكّن من عرض الإعلانات.

إذا كنت تريد اختبار سلوك الإعلان على الفور، استخدِم رقم تعريف التطبيق التجريبي وأرقام تعريف الوحدات الإعلانية المُدرجة في جدولَي رقم تعريف تطبيق Android/رقم تعريف الوحدة الإعلانية، ورقم تعريف الوحدة الإعلانية لتطبيق iOS.

الإعداد على جهاز iOS

لإكمال عملية الإعداد لنظام التشغيل iOS، عليك إضافة تطبيق iOS وإنشاء وحدات إعلانية.

إضافة تطبيق iOS

  1. في وحدة تحكُّم AdMob، انقر على إضافة تطبيق من قائمة التطبيقات.
  2. عند سؤالك عن هل نشرت تطبيقك على Google Play أو App Store؟، انقر على لا.
  3. أدخِل AdMob inline ads في حقل اسم التطبيق، واختَر iOS كنظام أساسي.

a4c963c9aa09519.png

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

b918bf44362813a9.png

إنشاء وحدات إعلانية

لإضافة وحدات إعلانية:

  1. اختَر تطبيق إعلانات AdMob المضمّنة من قائمة التطبيقات في وحدة تحكُّم AdMob.
  2. انقر على قائمة الوحدات الإعلانية.

بانر

  1. انقر على إضافة وحدة إعلانية.
  2. اختَر بانر كتنسيق.
  3. أدخِل ios-inline-banner في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال هذه العملية.

مدمج مع المحتوى

  1. انقر على إضافة وحدة إعلانية.
  2. اختَر الإعلانات المدمجة مع المحتوى (المتقدمة) كتنسيق.
  3. أدخِل ios-inline-native في حقل اسم الوحدة الإعلانية.
  4. انقر على إنشاء وحدة إعلانية لإكمال هذه العملية.

عادةً ما تستغرِق الوحدة الإعلانية الجديدة بضع ساعات لتتمكّن من عرض الإعلانات.

إذا كنت تريد اختبار سلوك الإعلان على الفور، استخدِم رقم تعريف التطبيق التجريبي وأرقام تعريف الوحدة الإعلانية المُدرَجة في الجدول التالي.

اختياري: استخدام تطبيق AdMob التجريبي والوحدات الإعلانية التجريبية

إذا كنت تريد اتّباع الدرس التطبيقي حول الترميز بدلاً من إنشاء تطبيق ووحدات إعلانية جديدة بنفسك، يمكنك استخدام رقم تعريف تطبيق AdMob وأرقام تعريف الوحدات الإعلانية التجريبية المُدرَجة في الجداول التالية.

رقم تعريف تطبيق Android/رقم تعريف الوحدة الإعلانية

السلعة

رقم تعريف التطبيق/رقم تعريف الوحدة الإعلانية

رقم تعريف تطبيق AdMob

ca-app-pub-3940256099942544~3347511713

بانر

ca-app-pub-3940256099942544/6300978111

مدمجة مع المحتوى

ca-app-pub-3940256099942544/2247696110

رقم تعريف تطبيق iOS/رقم تعريف الوحدة الإعلانية

السلعة

رقم تعريف التطبيق/رقم تعريف الوحدة الإعلانية

رقم تعريف تطبيق AdMob

ca-app-pub-3940256099942544~1458002511

بانر

ca-app-pub-3940256099942544/2934735716

مدمجة مع المحتوى

ca-app-pub-3940256099942544/3986624511

لمزيد من المعلومات عن الإعلانات الاختبارية، اطّلِع على مستندات مطوّري الإعلانات الاختبارية على Android وإعلانات اختبار iOS.

4. إضافة المكوّن الإضافي لبرنامج Flutter لإعلانات Google على الأجهزة الجوّالة

يستخدم Flutter المكوّنات الإضافية لإتاحة الوصول إلى مجموعة كبيرة من الخدمات الخاصة بالأنظمة الأساسية. تتيح لك المكوّنات الإضافية الوصول إلى الخدمات وواجهات برمجة التطبيقات على كل نظام أساسي.

يتيح المكوّن الإضافي google_mobile_ads تحميل إعلانات البانر والإعلانات البينية والإعلانات التي تضم مكافأة والإعلانات المدمجة مع المحتوى وعرضها باستخدام واجهة برمجة تطبيقات AdMob.

بما أنّ Flutter عبارة عن حزمة SDK متعدّدة الأنظمة الأساسية، يمكن استخدام المكوّن الإضافي google_mobile_ads على نظامَي التشغيل iOS وAndroid. وبالتالي، إذا أضفت المكوّن الإضافي إلى تطبيق Flutter، سيتم استخدامه من خلال إصدارَي Android وiOS من تطبيق الإعلانات المضمّنة في AdMob.

إضافة المكوّن الإضافي لإعلانات Google على الأجهزة الجوّالة كمكوّن إضافي

للوصول إلى واجهات برمجة تطبيقات AdMob من مشروع الإعلانات المضمّنة في AdMob، أضِف google_mobile_ads كمستند يعتمد على ملف pubspec.yaml في جذر المشروع.

pubspec.yaml

...
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

انقر على Pub get لتثبيت المكوّن الإضافي في مشروع الإعلانات المضمّنة في AdMob.

93ef6061e58ebc86.png

تحديث ملف AndroidManifest.xml (نظام التشغيل Android)

  1. افتح ملف android/app/src/main/AndroidManifest.xml في "استوديو Android".
  2. أضِف رقم تعريف تطبيق AdMob عن طريق إضافة علامة <meta-data> بالاسم com.google.android.gms.ads.APPLICATION_ID. على سبيل المثال، إذا كان رقم تعريف تطبيق AdMob هو ca-app-pub-3940256099942544~3347511713، عليك إضافة الأسطر التالية إلى ملف AndroidManifest.xml.

ملف AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-3940256099942544~3347511713"/>
    </application>

</manifest>

تعديل ملف Info.plist (لنظام التشغيل iOS)

  1. افتح ملف ios/Runner/Info.plist في "استوديو Android".
  2. أضِف مفتاح GADApplicationIdentifier مع قيمة سلسلة رقم تعريف تطبيق AdMob. على سبيل المثال، إذا كان رقم تعريف تطبيق AdMob هو ca-app-pub-3940256099942544~1458002511، عليك إضافة الأسطر التالية إلى ملف Info.plist.

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

5- إضافة فئة مساعدة للإعلانات

أنشِئ ملفًا جديدًا باسم "ad_helper.dart" ضمن الدليل lib. بعد ذلك، نفِّذ الفئة AdHelper التي توفِّر رقم تعريف تطبيق AdMob وأرقام تعريف الوحدات الإعلانية لنظامَي التشغيل Android وiOS.

تأكَّد من استبدال رقم تعريف تطبيق AdMob (ca-app-pub-xxxxxx~yyyyy) ورقم تعريف الوحدة الإعلانية (ca-app-pub-xxxxxxx/yyyyyyyy) بالأرقام التعريفية التي أنشأتها في الخطوة السابقة.

ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_BANNER_AD_UNIT_ID";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_BANNER_AD_UNIT_ID>";
    } else {
      throw UnsupportedError("Unsupported platform");
    }
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_NATIVE_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_NATIVE_AD_UNIT_ID>";
    } else {
      throw UnsupportedError("Unsupported platform");
    }
  }
}

استخدِم مقتطف الرمز التالي إذا كنت تريد استخدام رقم تعريف تطبيق AdMob التجريبي وأرقام تعريف الوحدة الإعلانية الاختبارية.

ad_helper.dart

import 'dart:io';

class AdHelper {
  
  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    }
    throw UnsupportedError("Unsupported platform");
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/2247696110';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/3986624511';
    }
    throw UnsupportedError("Unsupported platform");
  }
}

6- إعداد حزمة "SDK لإعلانات Google على الأجهزة الجوّالة"

قبل تحميل الإعلانات، يجب إعداد حزمة "SDK لإعلانات Google على الأجهزة الجوّالة". افتح ملف lib/home_page.dart وعدِّل _initGoogleMobileAds() لإعداد حزمة تطوير البرامج (SDK) قبل تحميل الصفحة الرئيسية.

ملاحظة: يجب تغيير نوع إرجاع طريقة _initGoogleMobileAds() من Future<dynamic> إلى Future<InitializationStatus> للحصول على نتيجة إعداد حزمة SDK بعد اكتمال العملية.

home_page.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomePage extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. إضافة إعلان بانر

وفي هذا القسم، يمكنك عرض إعلان بانر في منتصف القائمة، كما هو موضّح في لقطة الشاشة التالية.

62c405c962909fd3.png

  1. افتح ملف lib/banner_inline_page.dart.
  2. استيراد ad_helper.dart وgoogle_mobile_ads.dart عن طريق إضافة السطرين التاليين:
...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerInlinePage extends StatefulWidget {
  ...
}
  1. في الفئة _BannerInlinePageState، أضِف الأعضاء والطرق التالية لإعلان بانر.

يُرجى العلم أنّ القيمة _kAdIndex تشير إلى الفهرس الذي سيتم عرض إعلان البانر فيه، ويتم استخدامها لاحتساب مؤشر العناصر من خلال الطريقة _getDestinationItemIndex().

banner_inline_page.dart

class _BannerInlinePageState extends State<BannerInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a banner ad instance
  BannerAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. في الطريقة initState()، أنشئ وحمِّل BannerAd لإعلان البانر مقاس 320×50 (AdSize.banner). يُرجى العلم أنّه يتم ضبط أداة معالجة أحداث الإعلان لتعديل واجهة المستخدم (setState()) عند تحميل إعلان.

banner_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');
      },
    ),
  ).load();
}
  1. تعديل طريقة build() لعرض إعلان بانر عند توفّره
  2. يُرجى تحديث itemCount, لاحتساب إدخال إعلان بانر، وتعديل itemBuilder, لعرض إعلان بانر في فهرس الإعلانات (_kAdIndex) عند تحميل ذلك الإعلان.
  3. عدِّل الرمز البرمجي لاستخدام طريقة _getDestinationItemIndex() لاسترداد فهرس لعنصر المحتوى.

banner_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            width: _ad!.size.width.toDouble(),
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. حرر المورد المرتبط بالكائن BannerAd من خلال استدعاء طريقة BannerAd.dispose() في طريقة معاودة الاتصال dispose().

banner_inline_page.dart

@override
void dispose() {
  // TODO: Dispose a BannerAd object
  _ad?.dispose();

  super.dispose();
}

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

a5f857a850539fe9.png c32af50872514224.png

8. إضافة إعلان مدمج مع المحتوى

في هذا القسم، ستعرِض إعلانًا مدمجًا مع المحتوى في منتصف القائمة، كما هو موضّح في لقطة الشاشة التالية.

f1671b0fa349ccf8.png

يتم عرض الإعلانات المدمجة مع المحتوى للمستخدمين باستخدام مكونات واجهة المستخدم المدمجة مع النظام الأساسي (على سبيل المثال، View على Android أو UIView على iOS).

مع ذلك، لا يمكن إنشاء مكوّنات واجهة المستخدم الأصلية مباشرةً باستخدام تطبيقات Flutter المصغّرة. ولذلك يجب تنفيذ NativeAdFactory لكل نظام أساسي، والذي يُستخدم لإنشاء طريقة عرض إعلان مدمج مع المحتوى مخصص لنظام أساسي (NativeAdView على Android وGADNativeAdView على iOS) من عنصر إعلان مدمج مع المحتوى (NativeAd على Android وGADNativeAd على iOS).

تنفيذ NativeAdFound لنظام Android (Java)

  1. افتح ملف android/build.gradle (أو أي ملف ضمن مجلد android)، وانقر على فتح للتعديل في "استوديو Android" لفتح مشروع Android.

623ad3d2282ccbf8.png

  1. إذا طُلِب منك اختيار نافذة لفتح مشروع جديد، انقر على نافذة جديدة ليظل مشروع Flutter مفتوحًا أثناء العمل على مشروع Android.

d188bb51cf7c2d08.png

إنشاء تنسيق إعلان مدمج مع المحتوى

  1. بعد فتح مشروع Android، انقر بزر الماوس الأيمن على تطبيق من لوحة المشروع في "استوديو Android"، واختَر جديد > ملف موارد Android من قائمة السياقات

2b629ee277a68fd7.png

  1. في مربّع الحوار ملف مورد جديد، أدخِل list_tile_native_ad.xml كاسم للملف.
  2. اختَر التنسيق كنوع المورد، وأدخِل com.google.android.gms.ads.nativead.NativeAdView كعنصر جذر.
  3. انقر على حسنًا لإنشاء ملف تنسيق جديد.

575f126dd018bc0.png

  1. نفِّذ تخطيط الإعلان على النحو التالي. لاحظ أن التخطيط يجب أن يتطابق مع التصميم المرئي لتجربة المستخدم للمنصة المخصصة له.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

إنشاء فئة ListTileNativeAdFound

  1. في جزء "المشروع"، انقر بزر الماوس الأيمن على الحزمة com.codelab.flutter.admobinlineads واختَر جديد > فئة Java

9f3f111dd207a9b4.png

  1. أدخِل ListTileNativeAdFactory كاسم، ثم اختَر الصف من القائمة.

47ff82d92676e26.png

  1. بعد ظهور مربّع الحوار صف جديد، اترك كل الحقول فارغة وانقر على حسنًا.

سترى أنّه تمّ إنشاء الفئة ListTileNativeAdFactory في الحزمة com.codelab.flutter.admobinlineads.

e4ed232c358ffb19.png

  1. نفِّذ الفئة ListTileNativeAdFactory على النحو التالي. تجدر الإشارة إلى أنّ الفئة تنفِّذ الطريقة createNativeAd() في واجهة GoogleMobileAdsPlugin.NativeAdFactory.

وتكون فئة المصنع مسؤولة عن إنشاء عنصر عرض لعرض إعلان مدمج مع المحتوى. كما ترون من الرمز، تُنشئ فئة المصنع UnifiedNativeAdView وتعبئتها بالكائن NativeAd.

ListTileNativeAdFactory.java

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Map;

import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

class ListTileNativeAdFactory implements GoogleMobileAdsPlugin.NativeAdFactory {

    private final Context context;

    ListTileNativeAdFactory(Context context) {
        this.context = context;
    }

    @Override
    public NativeAdView createNativeAd(
            NativeAd nativeAd, Map<String, Object> customOptions) {
        NativeAdView nativeAdView = (NativeAdView) LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null);

        TextView attributionViewSmall = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_small);
        TextView attributionViewLarge = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_large);

        ImageView iconView = nativeAdView.findViewById(R.id.iv_list_tile_native_ad_icon);
        NativeAd.Image icon = nativeAd.getIcon();
        if (icon != null) {
            attributionViewSmall.setVisibility(View.VISIBLE);
            attributionViewLarge.setVisibility(View.INVISIBLE);
            iconView.setImageDrawable(icon.getDrawable());
        } else {
            attributionViewSmall.setVisibility(View.INVISIBLE);
            attributionViewLarge.setVisibility(View.VISIBLE);
        }
        nativeAdView.setIconView(iconView);

        TextView headlineView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_headline);
        headlineView.setText(nativeAd.getHeadline());
        nativeAdView.setHeadlineView(headlineView);

        TextView bodyView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_body);
        bodyView.setText(nativeAd.getBody());
        bodyView.setVisibility(nativeAd.getBody() != null ? View.VISIBLE : View.INVISIBLE);
        nativeAdView.setBodyView(bodyView);

        nativeAdView.setNativeAd(nativeAd);

        return nativeAdView;
    }
}

تسجيل فئة ListTileNativeAdFound

يجب تسجيل نسخة افتراضية من NativeAdFactory في GoogleMobileAdsPlugin لتتمكّن من استخدامه من جانب Flutter.

  1. افتح ملف MainActivity.java، وألغِ الطريقة configureFlutterEngine() والطريقة cleanUpFlutterEngine().
  2. سجِّل الفئة ListTileNativeAdFactory باستخدام معرّف السلسلة الفريد (listTile) في طريقة configureFlutterEngine().

MainActivity.java

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "listTile",
                new ListTileNativeAdFactory(getContext()));
    }

    ...
}
  1. يجب إلغاء تسجيل كل مثيل من NativeAdFactory أثناء عملية الإزالة. ألغِ تسجيل الفئة ListTileNativeAdFactory باستخدام الطريقة cleanUpFlutterEngine().

MainActivity.java

public class MainActivity extends FlutterActivity {

    ...

    @Override
    public void cleanUpFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine);

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile");
    }
}

أصبحت الآن مستعدًا لاستخدام فئة ListTileNativeAdFactory لعرض إعلانات مدمجة مع المحتوى على Android.

تنفيذ مشروع NativeAdFound لنظام Android (Kotlin)

  1. افتح ملف android/build.gradle (أو أي ملف ضمن مجلد android)، وانقر على فتح للتعديل في "استوديو Android" لفتح مشروع Android.

623ad3d2282ccbf8.png

  1. إذا طُلِب منك اختيار نافذة لفتح مشروع جديد، انقر على نافذة جديدة ليظل مشروع Flutter مفتوحًا أثناء العمل على مشروع Android.

d188bb51cf7c2d08.png

إنشاء تنسيق إعلان مدمج مع المحتوى

  1. بعد فتح مشروع Android، انقر بزر الماوس الأيمن على تطبيق من لوحة المشروع في "استوديو Android"، واختَر جديد > ملف موارد Android من قائمة السياقات

2b629ee277a68fd7.png

  1. في مربّع الحوار ملف مورد جديد، أدخِل list_tile_native_ad.xml كاسم للملف.
  2. اختَر التنسيق كنوع المورد، وأدخِل com.google.android.gms.ads.nativead.NativeAdView كعنصر جذر.
  3. انقر على حسنًا لإنشاء ملف تنسيق جديد.

575f126dd018bc0.png

  1. نفِّذ تخطيط الإعلان على النحو التالي. لاحظ أن التخطيط يجب أن يتطابق مع التصميم المرئي لتجربة المستخدم للمنصة المخصصة له.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

إنشاء فئة ListTileNativeAdFound

  1. في جزء "المشروع"، انقر بزر الماوس الأيمن على الحزمة com.codelab.flutter.admobinlineads واختَر جديد > ملف/فئة Kotlin:

7311744cb97cad75.png

  1. أدخِل ListTileNativeAdFactory كاسم، ثم اختَر الصف من القائمة.

25691151b5814867.png

  1. سترى أنّه تمّ إنشاء الفئة ListTileNativeAdFactory في الحزمة com.codelab.flutter.admobinlineads.
  2. نفِّذ الفئة ListTileNativeAdFactory على النحو التالي. تجدر الإشارة إلى أنّ الفئة تنفِّذ الطريقة createNativeAd() في واجهة GoogleMobileAdsPlugin.NativeAdFactory.

وتكون فئة المصنع مسؤولة عن إنشاء عنصر عرض لعرض إعلان مدمج مع المحتوى. كما ترون من الرمز، تُنشئ فئة المصنع NativeAdView وتعبئتها بالكائن NativeAd.

ListTileNativeAdFactory.kt

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin

class ListTileNativeAdFactory(val context: Context) : GoogleMobileAdsPlugin.NativeAdFactory {

    override fun createNativeAd(
            nativeAd: NativeAd,
            customOptions: MutableMap<String, Any>?
    ): NativeAdView {
        val nativeAdView = LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null) as NativeAdView

        with(nativeAdView) {
            val attributionViewSmall =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_small)
            val attributionViewLarge =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_large)

            val iconView = findViewById<ImageView>(R.id.iv_list_tile_native_ad_icon)
            val icon = nativeAd.icon
            if (icon != null) {
                attributionViewSmall.visibility = View.VISIBLE
                attributionViewLarge.visibility = View.INVISIBLE
                iconView.setImageDrawable(icon.drawable)
            } else {
                attributionViewSmall.visibility = View.INVISIBLE
                attributionViewLarge.visibility = View.VISIBLE
            }
            this.iconView = iconView

            val headlineView = findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
            headlineView.text = nativeAd.headline
            this.headlineView = headlineView

            val bodyView = findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
            with(bodyView) {
                text = nativeAd.body
                visibility = if (nativeAd.body.isNotEmpty()) View.VISIBLE else View.INVISIBLE
            }
            this.bodyView = bodyView

            setNativeAd(nativeAd)
        }

        return nativeAdView
    }
}

تسجيل فئة ListTileNativeAdFound

يجب تسجيل نسخة افتراضية من NativeAdFactory في GoogleMobileAdsPlugin لتتمكّن من استخدامه من جانب Flutter.

  1. افتح ملف MainActivity.kt، وألغِ الطريقة configureFlutterEngine() والطريقة cleanUpFlutterEngine().
  2. سجِّل الفئة ListTileNativeAdFactory باستخدام معرّف السلسلة الفريد (listTile) في طريقة configureFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(
                flutterEngine, "listTile", ListTileNativeAdFactory(context))
    }

    ...
}
  1. يجب إلغاء تسجيل كل مثيل من NativeAdFactory أثناء عملية الإزالة. ألغِ تسجيل الفئة ListTileNativeAdFactory باستخدام الطريقة cleanUpFlutterEngine().

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile")
    }
}

أصبحت الآن مستعدًا لاستخدام فئة ListTileNativeAdFactory لعرض إعلانات مدمجة مع المحتوى على Android.

تنفيذ NativeAd كلمة المرور لنظام iOS (الهدف-C)

افتح ملف ios/Podfile (أو أي ملف ضمن مجلد ios)، وانقر على فتح وحدة iOS في Xcode لفتح مشروع iOS.

62aa12c10e6d671f.png

إعداد تنسيق إعلان مدمج مع المحتوى

ستحتاج إلى طريقة عرض مخصّصة (*.xib) لتصميم مواد عرض الإعلانات المدمجة مع المحتوى. في هذا الدرس التطبيقي حول الترميز، تُستخدَم طريقة العرض المُعدّة مسبقًا لتقليل جهودك.

بعد فتح مشروع iOS في Xcode، تأكَّد من توفُّر ListTileNativeAdView.xib في مشروع Runner.

a5f04a32f1868d4f.png

إنشاء فئة ListTileNativeAdFound

  1. من أداة التنقّل في المشروع، انقر بزر الماوس الأيمن على مجموعة Runner (Runner)، واختَر New File (ملف جديد) لإنشاء ملف عنوان للفئة الجديدة.

6455aab9e9881ca.png

  1. في مربّع حوار النموذج، اختَر ملف العنوان، وأدخِل اسمًا له ListTileNativeAdFactory.
  2. بعد إنشاء ملف ListTileNativeAdFactory.h، حدِّد الفئة ListNativeAdFactory على النحو التالي:

ListTileNativeAdFactory.h

#ifndef ListTileNativeAdFactory_h
#define ListTileNativeAdFactory_h

// TODO: Import FLTGoogleMobileAdsPlugin.h
#import "FLTGoogleMobileAdsPlugin.h"

// TODO: Declare ListTileNativeAdFactory
@interface ListTileNativeAdFactory : NSObject<FLTNativeAdFactory>

@end


#endif /* ListTileNativeAdFactory_h */
  1. أنشئ ملف Objective-C باختيار ملف جديد من المجموعة Runner (تشغيل).
  2. في مربع الحوار التالي، أدخِل ListTileNativeAdFactory في الحقل ملف، واختَر إفراغ الملف كنوع الملف.

2c9c998c48db3a0.png

  1. بعد النقر على التالي، سيُطلب منك اختيار مجلد تريد إنشاء الملف الجديد فيه. اترك كل شيء بدون تغيير، ثم انقر على إنشاء.

8635ffe502d1f4ab.png

  1. نفِّذ الفئة ListTileNativeFactory على النحو التالي. يُرجى العلم أنّ الفئة تنفّذ الطريقة createNativeAd() في بروتوكول FLTNativeAdFactory.

وتكون فئة المصنع مسؤولة عن إنشاء عنصر عرض لعرض إعلان مدمج مع المحتوى. كما ترون من الرمز، تُنشئ فئة المصنع GADNativeAdView وتعبئتها بالكائن GADNativeAd.

ListTileNativeAdFactory.m

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

// TODO: Implement ListTileNativeAdFactory
@implementation ListTileNativeAdFactory

- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  GADNativeAdView *nativeAdView =
    [[NSBundle mainBundle] loadNibNamed:@"ListTileNativeAdView" owner:nil options:nil].firstObject;

  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  nativeAdView.callToActionView.userInteractionEnabled = NO;

  nativeAdView.nativeAd = nativeAd;

  return nativeAdView;
}

@end

تسجيل فئة ListTileNativeAdFacotry

يجب تسجيل تنفيذ FLTNativeAdFactory في FLTGoogleMobileAdsPlugin للتمكّن من استخدامه من جانب Flutter.

افتح ملف AppDelegate.m، وسجِّل ListTileNativeAdFactory باستخدام رقم تعريف السلسلة الفريد (listTile) عن طريق استدعاء طريقة [FLTGoogleMobileAdsPlugin registerNativeAdFactory].

AppDelegate.m

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // TODO: Register ListTileNativeAdFactory
  ListTileNativeAdFactory *listTileFactory = [[ListTileNativeAdFactory alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"listTile"
                                  nativeAdFactory:listTileFactory];

  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

أصبحت الآن مستعدًا لاستخدام ListTileNativeAdFactory لعرض الإعلانات المدمجة مع المحتوى على iOS.

تنفيذ NativeAd ينتج لنظام التشغيل iOS (Swift)

افتح ملف ios/Podfile (أو أي ملف ضمن مجلد ios)، وانقر على فتح وحدة iOS في Xcode لفتح مشروع iOS.

62aa12c10e6d671f.png

إعداد تنسيق إعلان مدمج مع المحتوى

ستحتاج إلى طريقة عرض مخصّصة (*.xib) لتصميم مواد عرض الإعلانات المدمجة مع المحتوى. في هذا الدرس التطبيقي حول الترميز، تُستخدَم طريقة العرض المُعدّة مسبقًا لتقليل جهودك.

بعد فتح مشروع iOS في Xcode، تأكَّد من توفُّر ListTileNativeAdView.xib في مشروع Runner.

a5f04a32f1868d4f.png

إنشاء فئة ListTileNativeAdFound

  1. من أداة التنقّل في المشروع، انقر بزر الماوس الأيمن على مجموعة Runner (Runner)، واختَر New File (ملف جديد) لإنشاء ملف عنوان للفئة الجديدة.

9115c92543345ef1.png

  1. في مربّع حوار النموذج، اختَر Swift File (ملف Swift) وأدخِل اسمًا له ListTileNativeAdFactory.
  2. بعد إنشاء ملف ListTileNativeAdFactory.swift، يمكنك تنفيذ الفئة ListNativeAdFactory.

يُرجى العلم أنّ الفئة تنفّذ الطريقة createNativeAd() في بروتوكول FLTNativeAdFactory.

وتكون فئة المصنع مسؤولة عن إنشاء عنصر عرض لعرض إعلان مدمج مع المحتوى. كما ترون من الرمز، تُنشئ فئة المصنع GADNativeAdView وتعبئتها بالكائن GADNativeAd.

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

    func createNativeAd(_ nativeAd: GADNativeAd,
                        customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
        let nibView = Bundle.main.loadNibNamed("ListTileNativeAdView", owner: nil, options: nil)!.first
        let nativeAdView = nibView as! GADNativeAdView

        (nativeAdView.headlineView as! UILabel).text = nativeAd.headline

        (nativeAdView.bodyView as! UILabel).text = nativeAd.body
        nativeAdView.bodyView!.isHidden = nativeAd.body == nil

        (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
        nativeAdView.iconView!.isHidden = nativeAd.icon == nil

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

تسجيل فئة ListTileNativeAdFacotry

يجب تسجيل تنفيذ FLTNativeAdFactory في FLTGoogleMobileAdsPlugin للتمكّن من استخدامه من جانب Flutter.

افتح ملف AppDelegate.m، وسجِّل ListTileNativeAdFactory باستخدام رقم تعريف السلسلة الفريد (listTile) عن طريق استدعاء طريقة FLTGoogleMobileAdsPlugin.registerNativeAdFactory().

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Register ListTileNativeAdFactory
    let listTileFactory = ListTileNativeAdFactory()
    FLTGoogleMobileAdsPlugin.registerNativeAdFactory(
        self, factoryId: "listTile", nativeAdFactory: listTileFactory)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

أصبحت الآن مستعدًا لاستخدام ListTileNativeAdFactory لعرض الإعلانات المدمجة مع المحتوى على iOS.

دمج الإعلانات المدمجة مع المحتوى مع تطبيقات Flutter المصغّرة

  1. افتح ملف lib/native_inline_page.dart. بعد ذلك، يمكنك استيراد ad_helper.dart وgoogle_mobile_ads.dart عن طريق إضافة السطرين التاليين:

native_inline_page.dart

...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class NativeInlinePage extends StatefulWidget {
  ...
}
  1. في فئة واحدة (_NativeInlinePageState)، أضِف الأعضاء والطرق التالية لإعلان مدمج مع المحتوى.

يُرجى العلم أنّ القيمة _kAdIndex تشير إلى الفهرس الذي سيتم عرض إعلان البانر فيه، ويتم استخدامها لحساب فهرس العناصر من خلال الطريقة _getDestinationItemIndex().

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a native ad instance
  NativeAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. في طريقة initState()، أنشئ وتحميل NativeAd يستخدم ListTileNativeAdFactory لإنشاء مشاهدة إعلان مدمج مع المحتوى.

يُرجى العلم أنّه يتم استخدام رقم تعريف المصنع نفسه (listTile) المستخدَم لتسجيل المصنع في المكوّن الإضافي.

native_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Create a NativeAd instance
  _ad = NativeAd(
    adUnitId: AdHelper.nativeAdUnitId,
    factoryId: 'listTile',
    request: AdRequest(),
    listener: NativeAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as NativeAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');       },
    ),
  );

  _ad.load();
}
  1. تعديل طريقة build() لعرض إعلان بانر عند توفّره
  2. يُرجى تعديل itemCount, لاحتساب إدخال إعلان بانر، وتعديل itemBuilder, لعرض إعلان بانر في فهرس الإعلانات (_kAdIndex) عند تحميل الإعلان.
  3. عدِّل الرمز البرمجي لاستخدام طريقة _getDestinationItemIndex() لاسترداد فهرس لعنصر المحتوى.

native_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. حرر المورد المرتبط بالكائن NativeAd من خلال استدعاء طريقة NativeAd.dispose() في طريقة معاودة الاتصال dispose().

native_inline_page.dart

@override
void dispose() {
  // TODO: Dispose a NativeAd object
  _ad?.dispose();

  super.dispose();
}

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

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. أكملت كل الإجراءات

لقد أكملت الدرس التطبيقي حول الترميز. يمكنك العثور على الرمز المكتمل لهذا الدرس التطبيقي حول الترميز في المجلد android_studio_folder.pngcomplete أو مجلد android_studio_folder.png complete_kotlin_swift.