این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

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

۱. مقدمه

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

آنچه خواهید ساخت

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

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

آنچه یاد خواهید گرفت

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

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

اندروید استودیو ۴.۱ یا بالاتر
Xcode نسخه ۱۲ یا بالاتر (برای توسعه iOS)

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

تازه کار

متوسط

ماهر

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

تازه کار

متوسط

ماهر

۲. محیط توسعه فلاتر خود را تنظیم کنید

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

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

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

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

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

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

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

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

شروع کننده: کد اولیه‌ای که در این آزمایشگاه کد خواهید ساخت.
کامل: کد تکمیل‌شده برای این آزمایشگاه کد. (جاوا و Objective-C برای کد بومی)
complete_kotlin_swift: کد تکمیل‌شده برای این آزمایشگاه کد. (کاتلین و سوئیفت برای کد بومی)

۳. اپلیکیشن ادموب و واحدهای تبلیغاتی را تنظیم کنید

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

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

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

اضافه کردن اپلیکیشن اندروید

در کنسول AdMob ، از منوی برنامه‌ها ، روی «افزودن برنامه» کلیک کنید.
وقتی از شما پرسیده شد که آیا برنامه خود را در گوگل پلی یا اپ استور منتشر کرده‌اید؟، روی خیر کلیک کنید.
در قسمت نام برنامه، AdMob inline ads وارد کنید و اندروید را به عنوان پلتفرم انتخاب کنید.

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

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

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

در کنسول AdMob، از منوی برنامه‌ها ، برنامه تبلیغات درون‌خطی AdMob را انتخاب کنید.
روی منوی واحدهای تبلیغاتی کلیک کنید.

بنر

روی افزودن واحد تبلیغات کلیک کنید.
بنر را به عنوان قالب انتخاب کنید.
android-inline-banner در فیلد نام واحد تبلیغات وارد کنید.
برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بومی

روی افزودن واحد تبلیغات کلیک کنید.
به عنوان فرمت، گزینه Native advanced را انتخاب کنید.
در فیلد نام واحد تبلیغات، android-inline-native را وارد کنید.
برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

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

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

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

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

اضافه کردن اپلیکیشن iOS

در کنسول AdMob ، از منوی برنامه‌ها ، روی «افزودن برنامه» کلیک کنید.
وقتی از شما پرسیده شد که آیا برنامه خود را در گوگل پلی یا اپ استور منتشر کرده‌اید؟، روی خیر کلیک کنید.
AdMob inline ads در فیلد نام برنامه وارد کنید و iOS را به عنوان پلتفرم انتخاب کنید.

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

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

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

در کنسول AdMob، از منوی برنامه‌ها ، برنامه تبلیغات درون‌خطی AdMob را انتخاب کنید.
روی منوی واحدهای تبلیغاتی کلیک کنید.

بنر

روی افزودن واحد تبلیغات کلیک کنید.
بنر را به عنوان قالب انتخاب کنید.
ios-inline-banner در فیلد نام واحد تبلیغات وارد کنید.
برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بومی

روی افزودن واحد تبلیغات کلیک کنید.
به عنوان فرمت، گزینه Native advanced را انتخاب کنید.
در فیلد نام واحد تبلیغات، ios-inline-native را وارد کنید.
برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

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

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

اختیاری: از برنامه آزمایشی AdMob و واحدهای تبلیغاتی استفاده کنید

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

شناسه برنامه اندروید/شناسه واحد تبلیغات

مورد	شناسه برنامه/شناسه واحد تبلیغات
شناسه برنامه 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 مراجعه کنید.

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

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

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

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

افزونه تبلیغات موبایلی گوگل را به عنوان یک وابستگی اضافه کنید

برای دسترسی به 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 کلیک کنید.

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

فایل android/app/src/main/AndroidManifest.xml را در اندروید استودیو باز کنید.
شناسه برنامه 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)

فایل ios/Runner/Info.plist را در اندروید استودیو باز کنید.
یک کلید GADApplicationIdentifier با مقدار رشته‌ای شناسه برنامه AdMob خود اضافه کنید. برای مثال، اگر شناسه برنامه AdMob شما ca-app-pub-3940256099942544~1458002511 باشد، باید خطوط زیر را به فایل Info.plist اضافه کنید.

ios/Runner/Info.plist

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

۵. یک کلاس کمکی برای تبلیغات اضافه کنید

یک فایل جدید با نام ad_helper.dart در پوشه lib ایجاد کنید. سپس، کلاس AdHelper را پیاده‌سازی کنید که یک شناسه برنامه AdMob و شناسه‌های واحد تبلیغاتی برای اندروید و 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");
  }
}

۶. کیت توسعه نرم‌افزار تبلیغات موبایلی گوگل (Google Mobile Ads SDK) را راه‌اندازی کنید

قبل از بارگذاری تبلیغات، باید SDK تبلیغات موبایلی گوگل را مقداردهی اولیه کنید. فایل lib/home_page.dart را باز کنید و _initGoogleMobileAds() را برای مقداردهی اولیه SDK قبل از بارگذاری صفحه اصلی تغییر دهید.

توجه داشته باشید که برای دریافت نتیجه مقداردهی اولیه SDK پس از تکمیل، باید نوع بازگشتی متد _initGoogleMobileAds() را از Future<dynamic> به Future<InitializationStatus> تغییر دهید.

صفحه_خانه.دارت

// 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();
  }
}

۷. یک بنر تبلیغاتی اضافه کنید

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

فایل lib/banner_inline_page.dart را باز کنید.
با اضافه کردن خطوط زیر ad_helper.dart و google_mobile_ads.dart را وارد کنید:

banner_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 BannerInlinePage extends StatefulWidget {
  ...
}

در کلاس _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;
  }

  ...
}

در متد initState() ، یک BannerAd برای بنر 320x50 ( AdSize.banner ) ایجاد و بارگذاری کنید. توجه داشته باشید که یک شنونده رویداد تبلیغ (ad event listener) طوری پیکربندی شده است که هنگام بارگذاری یک تبلیغ، رابط کاربری ( 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();
}

متد build() را طوری تغییر دهید که در صورت وجود، بنر تبلیغاتی نمایش داده شود.
برای شمارش ورودی بنر تبلیغاتی itemCount, به‌روزرسانی کنید و برای رندر کردن یک بنر تبلیغاتی در فهرست تبلیغات ( _kAdIndex ) هنگام بارگذاری تبلیغ، itemBuilder, را به‌روزرسانی کنید.
کد را به‌روزرسانی کنید تا از متد _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(
            ...
          );
        }
      },
    ),
  );
}

منبع مرتبط با شیء BannerAd را با فراخوانی متد BannerAd.dispose() در متد فراخوانی dispose() آزاد کنید.

banner_inline_page.dart

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

  super.dispose();
}

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

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

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

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

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

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

فایل android/build.gradle (یا هر فایلی که در پوشه android قرار دارد) را باز کنید و برای باز کردن یک پروژه اندروید، روی گزینه Open for Editing in Android Studio کلیک کنید.

اگر از شما خواسته شد پنجره‌ای را برای باز کردن یک پروژه جدید انتخاب کنید، روی «پنجره جدید» کلیک کنید تا پروژه فلاتر در حین کار روی پروژه اندروید باز بماند.

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

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

در پنجره‌ی «فایل منبع جدید» ، list_tile_native_ad.xml به عنوان نام فایل وارد کنید.
نوع منبع را Layout انتخاب کنید و com.google.android.gms.ads.nativead.NativeAdView را به عنوان عنصر ریشه وارد کنید.
برای ایجاد یک فایل طرح‌بندی جدید، روی تأیید کلیک کنید.

طرح‌بندی تبلیغ را به شرح زیر پیاده‌سازی کنید. توجه داشته باشید که طرح‌بندی باید با طراحی بصری تجربه کاربری پلتفرمی که برای آن در نظر گرفته شده است، مطابقت داشته باشد.

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 را ایجاد کنید.

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

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

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

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

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

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

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

فایل MainActivity.java را باز کنید و متدهای configureFlutterEngine() و cleanUpFlutterEngine() را بازنویسی (override) کنید.
کلاس 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()));
    }

    ...
}

هر نمونه 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 برای اندروید (کاتلین)

فایل android/build.gradle (یا هر فایلی که در پوشه android قرار دارد) را باز کنید و برای باز کردن یک پروژه اندروید، روی گزینه Open for Editing in Android Studio کلیک کنید.

اگر از شما خواسته شد پنجره‌ای را برای باز کردن یک پروژه جدید انتخاب کنید، روی «پنجره جدید» کلیک کنید تا پروژه فلاتر در حین کار روی پروژه اندروید باز بماند.

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

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

در پنجره‌ی «فایل منبع جدید» ، list_tile_native_ad.xml به عنوان نام فایل وارد کنید.
نوع منبع را Layout انتخاب کنید و com.google.android.gms.ads.nativead.NativeAdView را به عنوان عنصر ریشه وارد کنید.
برای ایجاد یک فایل طرح‌بندی جدید، روی تأیید کلیک کنید.

طرح‌بندی تبلیغ را به شرح زیر پیاده‌سازی کنید. توجه داشته باشید که طرح‌بندی باید با طراحی بصری تجربه کاربری پلتفرمی که برای آن در نظر گرفته شده است، مطابقت داشته باشد.

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 را ایجاد کنید.

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

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

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

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

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

فایل MainActivity.kt را باز کنید و متدهای configureFlutterEngine() و cleanUpFlutterEngine() را بازنویسی کنید.
کلاس ListTileNativeAdFactory را با یک شناسه رشته‌ای منحصر به فرد ( listTile ) در متد configureFlutterEngine() ثبت کنید.

فعالیت اصلی.kt

class MainActivity: FlutterActivity() {

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

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

    ...
}

هر نمونه NativeAdFactory باید در طول فرآیند پاکسازی از حالت ثبت خارج شود. کلاس ListTileNativeAdFactory را در متد cleanUpFlutterEngine() از حالت ثبت خارج کنید.

فعالیت اصلی.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 قرار دارد) را باز کنید و برای باز کردن یک پروژه iOS، روی گزینه Open iOS module in Xcode کلیک کنید.

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

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

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

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

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

در پنجره‌ی قالب، فایل هدر (Header File) را انتخاب کنید و نام آن را ListTileNativeAdFactory بگذارید.
پس از ایجاد فایل 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 */

با انتخاب New File از گروه Runner، یک فایل Objective-C ایجاد کنید.
در پنجره‌ی بعدی، در فیلد File عبارت ListTileNativeAdFactory را وارد کنید و نوع فایل را Empty File انتخاب کنید.

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

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

کلاس factory مسئول ایجاد یک شیء view برای رندر کردن یک تبلیغ native است. همانطور که از کد می‌بینید، کلاس factory یک 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 در Xcode، تأیید کنید که ListTileNativeAdView.xib در پروژه Runner وجود دارد.

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

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

۹۱۱۵c۹۲۵۴۳۳۴۵ef۱.png

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

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

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

ادغام تبلیغات بومی با ویجت‌های فلاتر

فایل 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 {
  ...
}

در کلاس _NativeInlinePageState ، اعضا و متدهای زیر را برای یک تبلیغ native اضافه کنید.

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;
  }

  ...
}

در متد initState() ، یک NativeAd ایجاد و بارگذاری کنید که ListTileNativeAdFactory برای تولید یک نمای تبلیغ native استفاده می‌کند.

توجه داشته باشید که از همان شناسه کارخانه ( 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();
}

متد build() را طوری تغییر دهید که در صورت وجود، بنر تبلیغاتی نمایش داده شود.
برای شمارش ورودی بنر تبلیغاتی itemCount, به‌روزرسانی کنید و itemBuilder, را به‌روزرسانی کنید تا هنگام بارگذاری تبلیغ، بنر تبلیغاتی را در فهرست تبلیغ ( _kAdIndex ) رندر کند.
کد را به‌روزرسانی کنید تا از متد _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(
            ...
          );
        }
      },
    ),
  );
}

منبع مرتبط با شیء NativeAd را با فراخوانی متد NativeAd.dispose() در متد فراخوانی dispose() آزاد کنید.

native_inline_page.dart

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

  super.dispose();
}

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

۹. کار تمام است!

شما آزمایشگاه کد را تکمیل کردید. می‌توانید کد تکمیل‌شده برای این آزمایشگاه کد را در پوشه android_studio.png کامل یا پوشه‌ی complete_kotlin_swift .

افزودن بنر AdMob و تبلیغات داخلی بومی به برنامه Flutter با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

۱. مقدمه

آنچه خواهید ساخت

آنچه یاد خواهید گرفت

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

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

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

۲. محیط توسعه فلاتر خود را تنظیم کنید

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

۳. اپلیکیشن ادموب و واحدهای تبلیغاتی را تنظیم کنید

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

اضافه کردن اپلیکیشن اندروید

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

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

اضافه کردن اپلیکیشن iOS

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

اختیاری: از برنامه آزمایشی AdMob و واحدهای تبلیغاتی استفاده کنید

شناسه برنامه اندروید/شناسه واحد تبلیغات

شناسه برنامه iOS/شناسه واحد تبلیغات

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

افزونه تبلیغات موبایلی گوگل را به عنوان یک وابستگی اضافه کنید

pubspec.yaml

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

فایل AndroidManifest.xml

به‌روزرسانی Info.plist (iOS)

ios/Runner/Info.plist

۵. یک کلاس کمکی برای تبلیغات اضافه کنید

ad_helper.dart

۶. کیت توسعه نرم‌افزار تبلیغات موبایلی گوگل (Google Mobile Ads SDK) را راه‌اندازی کنید

صفحه_خانه.دارت

۷. یک بنر تبلیغاتی اضافه کنید

banner_inline_page.dart

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

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

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

list_tile_native_ad.xml

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

ListTileNativeAdFactory.java

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

MainActivity.java

MainActivity.java

پیاده‌سازی NativeAdFactory برای اندروید (کاتلین)

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

list_tile_native_ad.xml

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

ListTileNativeAdFactory.kt

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

فعالیت اصلی.kt

فعالیت اصلی.kt

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

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

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

ListTileNativeAdFactory.h

ListTileNativeAdFactory.m

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

AppDelegate.m

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

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

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

ListTileNativeAdFactory.swift

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

AppDelegate.swift

ادغام تبلیغات بومی با ویجت‌های فلاتر

۹. کار تمام است!

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