افزودن بنر AdMob و تبلیغات داخلی بومی به برنامه Flutter

1. مقدمه

در این کد لبه، شما یک بنر AdMob و یک تبلیغ داخلی AdMob را در یک برنامه Flutter پیاده سازی می کنید.

چیزی که خواهی ساخت

این لبه کد شما را از طریق اجرای یک بنر درون خطی AdMob و تبلیغات داخلی AdMob در یک برنامه Flutter با استفاده از افزونه Google Mobile Ads برای Flutter راهنمایی می کند.

اگر در حین کار در این کدنویسی با مشکلی مواجه شدید (اشکالات کد، خطاهای دستوری، جمله بندی نامشخص و غیره)، مشکل را با استفاده از پیوند گزارش یک اشتباه در گوشه سمت چپ پایین صفحه کد گزارش کنید.

چیزی که یاد خواهید گرفت

  • نحوه پیکربندی افزونه Google Mobile Ads Flutter
  • نحوه پیاده سازی یک بنر درون خطی و تبلیغات پاداش در یک برنامه فلاتر

آنچه شما نیاز دارید

  • اندروید استودیو 4.1 یا بالاتر
  • Xcode 12 یا بالاتر (برای توسعه iOS)

سطح تجربه خود را با AdMob چگونه ارزیابی می کنید؟

تازه کار متوسط مسلط

سطح تجربه خود را با فلاتر چگونه ارزیابی می کنید؟

تازه کار متوسط مسلط

2. محیط توسعه Flutter خود را تنظیم کنید

برای تکمیل این آزمایشگاه به دو نرم افزار نیاز دارید - Flutter SDK و یک ویرایشگر .

شما می توانید کدلب را با استفاده از هر یک از این دستگاه ها اجرا کنید:

  • یک دستگاه فیزیکی Android یا iOS که به رایانه شما متصل شده و روی حالت Developer تنظیم شده است.
  • شبیه ساز iOS (نیاز به نصب ابزار Xcode دارد).
  • شبیه ساز اندروید (نیاز به نصب در Android Studio دارد).
  • یک مرورگر (Chrome برای اشکال زدایی لازم است).
  • به عنوان یک برنامه دسکتاپ Windows ، Linux ، یا macOS . شما باید روی پلتفرمی که قصد استقرار در آن را دارید توسعه دهید. بنابراین، اگر می خواهید یک برنامه دسکتاپ ویندوز توسعه دهید، باید در ویندوز توسعه دهید تا به زنجیره ساخت مناسب دسترسی داشته باشید. الزامات خاص سیستم عامل وجود دارد که به طور مفصل در docs.flutter.dev/desktop پوشش داده شده است.

کد را دانلود کنید

پس از دانلود فایل فشرده، محتویات آن را استخراج کنید. شما یک پوشه به نام admob-inline-ads-in-flutter-main خواهید داشت.

همچنین، می‌توانید مخزن GitHub را از خط فرمان کلون کنید:

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

مخزن شامل سه پوشه است:

  • android_studio_folder.png starter: کد شروعی که در این Codelab خواهید ساخت.
  • android_studio_folder.png کامل: کد تکمیل شده برای این کد لبه. (جاوا و Objective-C برای کد بومی)
  • android_studio_folder.png full_kotlin_swift: کد کامل شده برای این کد لبه. (کاتلین و سوئیفت برای کد بومی)

3. برنامه AdMob و واحدهای تبلیغاتی را تنظیم کنید

از آنجایی که Flutter یک SDK چند پلتفرمی است، باید یک برنامه و واحدهای تبلیغاتی برای Android و iOS در AdMob اضافه کنید.

برای اندروید راه اندازی کنید

برای راه‌اندازی برای Android، باید یک برنامه Android اضافه کنید و واحدهای تبلیغاتی ایجاد کنید.

یک برنامه اندروید اضافه کنید

  1. در کنسول AdMob ، روی ADD APP از منوی Apps کلیک کنید.
  2. وقتی از شما می پرسند آیا برنامه خود را در Google Play یا App Store منتشر کرده اید؟ ، روی NO کلیک کنید.
  3. AdMob inline ads در قسمت نام برنامه وارد کنید و Android را به عنوان پلتفرم انتخاب کنید.

d51828db0e2e4f6c.png

  1. فعال کردن معیارهای کاربر برای تکمیل این کد لبه ضروری نیست. با این حال، توصیه می کنیم این کار را انجام دهید زیرا به شما امکان می دهد رفتار کاربر را با جزئیات بیشتری درک کنید. برای تکمیل فرآیند روی ADD کلیک کنید.

b918bf44362813a9.png

ایجاد واحدهای تبلیغاتی

برای افزودن واحدهای تبلیغاتی:

  1. برنامه تبلیغات درون خطی AdMob را از منوی Apps در کنسول AdMob انتخاب کنید.
  2. روی منوی واحدهای آگهی کلیک کنید.

بنر

  1. روی ADD AD UNIT کلیک کنید.
  2. Banner را به عنوان قالب انتخاب کنید.
  3. android-inline-banner را در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بومی

  1. روی ADD AD UNIT کلیک کنید.
  2. Native advanced را به عنوان قالب انتخاب کنید.
  3. android-inline-native را در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

معمولاً چند ساعت طول می کشد تا یک واحد تبلیغاتی جدید بتواند تبلیغات را ارائه دهد.

اگر می‌خواهید رفتار آگهی را فوراً آزمایش کنید، از شناسه برنامه آزمایشی و شناسه‌های واحد آگهی فهرست‌شده در جدول شناسه برنامه Android/شناسه واحد آگهی و شناسه برنامه iOS/شناسه واحد آگهی استفاده کنید.

برای iOS تنظیم کنید

برای راه‌اندازی برای iOS، باید یک برنامه iOS اضافه کنید و واحدهای تبلیغاتی ایجاد کنید.

یک برنامه iOS اضافه کنید

  1. در کنسول AdMob ، روی ADD APP از منوی Apps کلیک کنید.
  2. وقتی از شما می پرسند آیا برنامه خود را در Google Play یا App Store منتشر کرده اید؟ ، روی NO کلیک کنید.
  3. AdMob inline ads در قسمت نام برنامه وارد کنید و iOS را به عنوان پلتفرم انتخاب کنید.

a4c963c9aa09519.png

  1. فعال کردن معیارهای کاربر برای تکمیل این کد لبه ضروری نیست. با این حال، توصیه می کنیم این کار را انجام دهید زیرا به شما امکان می دهد رفتار کاربر را با جزئیات بیشتری درک کنید. برای تکمیل فرآیند روی ADD کلیک کنید.

b918bf44362813a9.png

ایجاد واحدهای تبلیغاتی

برای افزودن واحدهای تبلیغاتی:

  1. برنامه تبلیغات درون خطی AdMob را از منوی Apps در کنسول AdMob انتخاب کنید.
  2. روی منوی واحدهای آگهی کلیک کنید.

بنر

  1. روی ADD AD UNIT کلیک کنید.
  2. Banner را به عنوان قالب انتخاب کنید.
  3. ios-inline-banner در قسمت نام واحد آگهی وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بومی

  1. روی ADD AD UNIT کلیک کنید.
  2. Native advanced را به عنوان قالب انتخاب کنید.
  3. ios-inline-native را در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

معمولاً چند ساعت طول می کشد تا یک واحد تبلیغاتی جدید بتواند تبلیغات را ارائه دهد.

اگر می‌خواهید رفتار آگهی را فوراً آزمایش کنید، از شناسه برنامه آزمایشی و شناسه‌های واحد آگهی فهرست‌شده در جدول زیر استفاده کنید.

اختیاری: از برنامه آزمایشی 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

برای کسب اطلاعات بیشتر در مورد تبلیغات آزمایشی، به آگهی های آزمایشی اندروید و مستندات توسعه دهنده تبلیغات آزمایشی iOS مراجعه کنید.

4. افزونه Google Mobile Ads Flutter را اضافه کنید

Flutter از پلاگین ها برای دسترسی به طیف گسترده ای از خدمات پلتفرم خاص استفاده می کند. پلاگین ها شما را قادر می سازند به سرویس ها و API ها در هر پلتفرم دسترسی داشته باشید.

افزونه google_mobile_ads از بارگیری و نمایش تبلیغات بنر، بینابینی، پاداش و بومی با استفاده از AdMob API پشتیبانی می کند.

از آنجایی که Flutter یک SDK چند پلتفرمی است، افزونه google_mobile_ads هم برای iOS و هم برای اندروید قابل اجرا است. بنابراین، اگر افزونه را به برنامه Flutter خود اضافه کنید، در هر دو نسخه اندروید و iOS برنامه تبلیغات درون خطی AdMob از آن استفاده می شود.

افزونه Google Mobile Ads را به عنوان یک وابستگی اضافه کنید

برای دسترسی به APIهای 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

...

برای نصب افزونه در پروژه تبلیغات درون خطی AdMob روی Pub get کلیک کنید.

93ef6061e58ebc86.png

به‌روزرسانی AndroidManifest.xml (Android)

  1. فایل android/app/src/main/AndroidManifest.xml را در Android Studio باز کنید.
  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 Studio باز کنید.
  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. Google Mobile Ads SDK را راه اندازی کنید

قبل از بارگیری تبلیغات، باید Google Mobile Ads SDK را مقداردهی اولیه کنید. فایل 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 برای بنر 320x50 ایجاد و بارگذاری کنید ( 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() در متد callback dispose() آزاد کنید.

banner_inline_page.dart

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

  super.dispose();
}

همین! پروژه را اجرا کنید و روی دکمه تبلیغات درون خطی بنر از صفحه اصلی کلیک کنید. پس از بارگذاری یک تبلیغ، یک بنر تبلیغاتی را در وسط لیست خواهید دید.

a5f857a850539fe9.pngc32af50872514224.png

8. یک تبلیغ بومی اضافه کنید

در این بخش، همانطور که در تصویر زیر نشان داده شده است، یک تبلیغ بومی را در وسط لیست نمایش می دهید.

f1671b0fa349ccf8.png

تبلیغات بومی با استفاده از مؤلفه‌های رابط کاربری که در پلتفرم بومی هستند به کاربران ارائه می‌شوند (مثلاً View در Android یا UIView در iOS).

با این حال، با استفاده از ویجت‌های Flutter نمی‌توان مؤلفه‌های رابط کاربری بومی را ایجاد کرد. بنابراین، شما باید یک NativeAdFactory برای هر پلتفرم پیاده‌سازی کنید، که برای ایجاد نمای تبلیغاتی بومی مخصوص پلتفرم ( NativeAdView در Android و GADNativeAdView در iOS) از یک شی تبلیغاتی بومی ( NativeAd در Android و GADNativeAd در iOS) استفاده می‌شود.

پیاده سازی NativeAdFactory برای اندروید (جاوا)

  1. فایل android/build.gradle (یا هر فایلی که در پوشه اندروید است) را باز کنید و روی Open for Editing در Android Studio کلیک کنید تا یک پروژه Android باز شود.

623ad3d2282ccbf8.png

  1. اگر از شما خواسته شد که پنجره ای را برای باز کردن یک پروژه جدید انتخاب کنید، روی New Window کلیک کنید تا پروژه Flutter در زمانی که روی پروژه Android کار می کنید باز بماند.

d188bb51cf7c2d08.png

یک طرح تبلیغاتی بومی ایجاد کنید

  1. با باز شدن پروژه اندروید، روی برنامه از پنجره پروژه در Android Studio کلیک راست کرده و New > Android Resource File را از منوی زمینه انتخاب کنید.

2b629ee277a68fd7.png

  1. در محاوره New Resource File ، list_tile_native_ad.xml را به عنوان نام فایل وارد کنید.
  2. Layout را به عنوان نوع منبع انتخاب کنید و com.google.android.gms.ads.nativead.NativeAdView را به عنوان عنصر ریشه وارد کنید.
  3. برای ایجاد یک فایل طرح بندی جدید روی OK کلیک کنید.

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>

کلاس ListTileNativeAdFactory را ایجاد کنید

  1. در پنجره Project، روی بسته com.codelab.flutter.admobinlineads راست کلیک کرده و New > Java Class را انتخاب کنید.

9f3f111dd207a9b4.png

  1. ListTileNativeAdFactory به عنوان نام وارد کنید و Class را از لیست انتخاب کنید.

47ff82d92676e26.png

  1. پس از ظاهر شدن کادر گفتگوی New Class ، همه چیز را خالی بگذارید و روی OK کلیک کنید.

خواهید دید که کلاس ListTileNativeAdFactory در بسته com.codelab.flutter.admobinlineads ایجاد شده است.

e4ed232c358ffb19.png

  1. کلاس ListTileNativeAdFactory را به صورت زیر پیاده سازی کنید. توجه داشته باشید که کلاس متد createNativeAd() در رابط GoogleMobileAdsPlugin.NativeAdFactory پیاده سازی می کند.

کلاس factory مسئول ایجاد یک شیء view برای رندر کردن یک تبلیغ بومی است. همانطور که از کد می بینید، کلاس کارخانه یک 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;
    }
}

کلاس ListTileNativeAdFactory را ثبت کنید

یک نمونه از NativeAdFactory باید قبل از استفاده از Flutter در GoogleMobileAdsPlugin ثبت شود.

  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 برای ارائه تبلیغات بومی در اندروید هستید.

پیاده سازی NativeAdFactory برای اندروید (Kotlin)

  1. فایل android/build.gradle (یا هر فایلی که در پوشه اندروید است) را باز کنید و روی Open for Editing در Android Studio کلیک کنید تا یک پروژه Android باز شود.

623ad3d2282ccbf8.png

  1. اگر از شما خواسته شد که پنجره ای را برای باز کردن یک پروژه جدید انتخاب کنید، روی New Window کلیک کنید تا پروژه Flutter در زمانی که روی پروژه Android کار می کنید باز بماند.

d188bb51cf7c2d08.png

یک طرح تبلیغاتی بومی ایجاد کنید

  1. با باز شدن پروژه اندروید، روی برنامه از پنجره پروژه در Android Studio کلیک راست کرده و New > Android Resource File را از منوی زمینه انتخاب کنید.

2b629ee277a68fd7.png

  1. در محاوره New Resource File ، list_tile_native_ad.xml را به عنوان نام فایل وارد کنید.
  2. Layout را به عنوان نوع منبع انتخاب کنید و com.google.android.gms.ads.nativead.NativeAdView را به عنوان عنصر ریشه وارد کنید.
  3. برای ایجاد یک فایل طرح بندی جدید روی OK کلیک کنید.

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>

کلاس ListTileNativeAdFactory را ایجاد کنید

  1. در پنجره Project، روی بسته com.codelab.flutter.admobinlineads راست کلیک کرده و New > Kotlin File/Class را انتخاب کنید.

7311744cb97cad75.png

  1. ListTileNativeAdFactory به عنوان نام وارد کنید و Class را از لیست انتخاب کنید.

25691151b5814867.png

  1. خواهید دید که کلاس ListTileNativeAdFactory در بسته com.codelab.flutter.admobinlineads ایجاد شده است.
  2. کلاس ListTileNativeAdFactory را به صورت زیر پیاده سازی کنید. توجه داشته باشید که کلاس متد createNativeAd() در رابط GoogleMobileAdsPlugin.NativeAdFactory پیاده سازی می کند.

کلاس factory مسئول ایجاد یک شیء view برای رندر کردن یک تبلیغ بومی است. همانطور که از کد می بینید، کلاس کارخانه یک 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
    }
}

کلاس ListTileNativeAdFactory را ثبت کنید

یک نمونه از NativeAdFactory باید قبل از استفاده از Flutter در GoogleMobileAdsPlugin ثبت شود.

  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 برای ارائه تبلیغات بومی در اندروید هستید.

پیاده سازی NativeAdFactory برای iOS (Objective-C)

فایل ios/Podfile (یا هر فایل زیر پوشه ios ) را باز کنید و روی Open iOS module در Xcode کلیک کنید تا پروژه iOS باز شود.

62aa12c10e6d671f.png

یک طرح تبلیغاتی بومی تهیه کنید

برای چیدمان دارایی های تبلیغاتی بومی باید یک نمای سفارشی ( *.xib ) داشته باشید. در این کد لبه، نمای از پیش تنظیم شده برای به حداقل رساندن تلاش شما استفاده می شود.

با باز شدن پروژه iOS در Xcode، تأیید کنید که ListTileNativeAdView.xib در پروژه Runner وجود دارد.

a5f04a32f1868d4f.png

کلاس ListTileNativeAdFactory را ایجاد کنید

  1. از ناوبر پروژه، روی گروه Runner کلیک راست کرده و New File را انتخاب کنید تا یک فایل هدر برای کلاس جدید ایجاد شود.

6455aab9e9881ca.png

  1. در گفتگوی الگو، فایل Header را انتخاب کنید و نام آن را 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. با انتخاب New File از گروه Runner یک فایل Objective-C ایجاد کنید.
  2. در گفتگوی بعدی، ListTileNativeAdFactory در قسمت File وارد کنید و Empty File را به عنوان نوع فایل انتخاب کنید.

2c9c998c48db3a0.png

  1. بعد از اینکه روی Next کلیک کردید، از شما خواسته می شود که پوشه ای را انتخاب کنید که فایل جدید باید در آن ایجاد شود. همه چیز را بدون تغییر رها کنید و روی ایجاد کلیک کنید.

8635ffe502d1f4ab.png

  1. کلاس ListTileNativeFactory را به صورت زیر پیاده سازی کنید. توجه داشته باشید که کلاس متد createNativeAd() در پروتکل FLTNativeAdFactory پیاده سازی می کند.

کلاس factory مسئول ایجاد یک شیء view برای رندر کردن یک تبلیغ بومی است. همانطور که از کد می بینید، کلاس کارخانه یک 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 باید قبل از استفاده از Flutter در FLTGoogleMobileAdsPlugin ثبت شود.

فایل 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 هستید.

پیاده سازی NativeAdFactory برای iOS (Swift)

فایل ios/Podfile (یا هر فایل زیر پوشه ios ) را باز کنید و روی Open iOS module در Xcode کلیک کنید تا پروژه iOS باز شود.

62aa12c10e6d671f.png

یک طرح تبلیغاتی بومی تهیه کنید

برای چیدمان دارایی های تبلیغاتی بومی باید یک نمای سفارشی ( *.xib ) داشته باشید. در این کد لبه، نمای از پیش تنظیم شده برای به حداقل رساندن تلاش شما استفاده می شود.

با باز شدن پروژه iOS در Xcode، تأیید کنید که ListTileNativeAdView.xib در پروژه Runner وجود دارد.

a5f04a32f1868d4f.png

کلاس ListTileNativeAdFactory را ایجاد کنید

  1. از ناوبر پروژه، روی گروه Runner کلیک راست کرده و New File را انتخاب کنید تا یک فایل هدر برای کلاس جدید ایجاد شود.

9115c92543345ef1.png

  1. در گفتگوی الگو، فایل Swift را انتخاب کنید و نام آن را ListTileNativeAdFactory بگذارید.
  2. پس از ایجاد فایل ListTileNativeAdFactory.swift ، کلاس ListNativeAdFactory را پیاده سازی کنید.

توجه داشته باشید که کلاس متد createNativeAd() در پروتکل FLTNativeAdFactory پیاده سازی می کند.

کلاس factory مسئول ایجاد یک شیء view برای رندر کردن یک تبلیغ بومی است. همانطور که از کد می بینید، کلاس کارخانه یک 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 باید قبل از استفاده از Flutter در FLTGoogleMobileAdsPlugin ثبت شود.

فایل 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() در روش callback dispose() آزاد کنید.

native_inline_page.dart

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

  super.dispose();
}

همین! پروژه را اجرا کنید و روی دکمه Native inline ad از صفحه اصلی کلیک کنید. پس از بارگذاری یک تبلیغ، یک آگهی بومی در وسط لیست خواهید دید.

f1671b0fa349ccf8.png5ead873222c800eb.png

9. همه چیز تمام شد!

شما برنامه کد را تکمیل کردید. شما می توانید کد تکمیل شده برای این آزمایشگاه کد را در آدرس زیر بیابید android_studio_folder.png کامل یا android_studio_folder.png پوشه full_kotlin_swift .