הוספה של מודעת באנר של AdMob ומודעות בתוך שורה לאפליקציית Flutter

1. מבוא

ב-Codelab הזה, אתם מטמיעים מודעת באנר של AdMob ומודעה מותאמת של AdMob בתוך אפליקציית Flutter.

מה תפַתחו

בשיעור הזה תלמדו איך להטמיע מודעת באנר מוטבעת ב-AdMob ומודעות מוטבעות ב-AdMob באפליקציית Flutter, באמצעות הפלאגין של Google Mobile Ads ל-Flutter.

אם נתקלתם בבעיות (באגים בקוד, שגיאות דקדוק, ניסוח לא ברור וכן הלאה) במהלך העבודה ב-Codelab הזה, אפשר לדווח על הבעיה באמצעות הקישור דיווח על טעות בפינה הימנית התחתונה של ה-Codelab.

מה תלמדו

  • איך להגדיר את הפלאגין של Google Mobile Ads Flutter
  • איך להטמיע מודעת באנר מוטבעת ומודעות מתגמלות באפליקציית Flutter

מה צריך להכין

  • Android Studio 4.1 ואילך
  • Xcode 12 ואילך (לפיתוח iOS)

איזה דירוג מגיע לדעתך לרמת חוויית השימוש שלך ב-AdMob?

מתחילים בינונית בקיאים

איזה דירוג מגיע לדעתך לרמת החוויה שלך עם Flutter?

מתחילים בינונית בקיאים

2. הגדרת סביבת הפיתוח של Flutter

כדי להשלים את שיעור ה-Lab הזה אתם צריכים שתי תוכנות: Flutter SDK וכלי עריכה.

אפשר להריץ את Codelab באמצעות כל אחד מהמכשירים הבאים:

  • מכשיר פיזי שמשמש ל-Android או ל-iOS שמחובר למחשב ומוגדר ל'מצב פיתוח'.
  • הסימולטור של iOS (צריך להתקין כלים של Xcode).
  • האמולטור של Android (נדרשת הגדרה ב-Android Studio).
  • דפדפן (Chrome נדרש לניפוי באגים).
  • בתור אפליקציית Windows , Linux או macOS למחשב. צריך לפתח בפלטפורמה שבה אתם מתכננים לפרוס. לכן, כדי לפתח אפליקציה למחשב של Windows, צריך לפתח את האפליקציה ב-Windows כדי לגשת לשרשרת ה-build המתאימה. יש דרישות ספציפיות למערכת ההפעלה שמפורטות בהרחבה בכתובת 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 סימן לתחילת פעולה: קוד ההתחלה שתיצרו ב-Codelab הזה.
  • android_studio_folder.png הושלם: הקוד הושלם עבור ה-Codelab הזה. (Java ו-Objective-C לקוד מותאם)
  • android_studio_folder.png complete_kotlin_swift: השלמת הקוד עבור Codelab הזה. (Kotlin ו-Swift לקוד נייטיב)

3. הגדרה של אפליקציות ויחידות של מודעות ב-AdMob

מכיוון ש-Flutter היא SDK בפלטפורמות מרובות, עליכם להוסיף ב-AdMob אפליקציה ויחידות של מודעות גם ל-Android וגם ל-iOS.

הגדרה ל-Android

כדי להגדיר מודעות ל-Android, צריך להוסיף אפליקציה ל-Android וליצור יחידות מודעות.

הוספה של אפליקציה ל-Android

  1. במסוף AdMob, לוחצים על הוספת אפליקציה בתפריט אפליקציות.
  2. כשמוצגת השאלה האם פרסמת את האפליקציה ב-Google Play או ב-App Store?, לוחצים על לא.
  3. מזינים את AdMob inline ads בשדה של שם האפליקציה ובוחרים באפשרות Android בתור הפלטפורמה.

d51828db0e2e4f6c.png

  1. אין צורך להפעיל מדדי משתמשים כדי להשלים את ה-Codelab הזה. עם זאת, מומלץ לעשות זאת כי כך תוכלו להבין את התנהגות המשתמשים בצורה מפורטת יותר. לוחצים על הוספה כדי להשלים את התהליך.

b918bf44362813a9.png

יצירה של יחידות מודעות

כדי להוסיף יחידות של מודעות:

  1. בוחרים באפליקציה מודעות מוטבעות של AdMob בתפריט אפליקציות במסוף AdMob.
  2. לוחצים על התפריט יחידות של מודעות.

באנר

  1. לוחצים על הוספה של יחידת מודעות.
  2. בוחרים את הפורמט באנר.
  3. מזינים android-inline-banner בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירה של יחידת מודעות.

מודעות מותאמות

  1. לוחצים על הוספה של יחידת מודעות.
  2. בוחרים את הפורמט מודעות מותאמות מסוג Advanced.
  3. מזינים android-inline-native בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירה של יחידת מודעות.

בדרך כלל חולפות כמה שעות עד שיחידת מודעות חדשה יכולה להציג מודעות.

אם אתם רוצים לבדוק את התנהגות המודעה באופן מיידי, צריך להשתמש במזהה האפליקציה לבדיקה ובמזהים של יחידות המודעות שמופיעים בטבלאות של מזהה אפליקציה ל-Android/מזהה יחידת המודעות ב-iOS ומזהה האפליקציה/מזהה יחידת המודעות ב-iOS.

הגדרה ל-iOS

כדי להגדיר ב-iOS, צריך להוסיף אפליקציה ל-iOS וליצור יחידות מודעות.

הוספת אפליקציה ל-iOS

  1. במסוף AdMob, לוחצים על הוספת אפליקציה בתפריט אפליקציות.
  2. כשמוצגת השאלה האם פרסמת את האפליקציה ב-Google Play או ב-App Store?, לוחצים על לא.
  3. מזינים את AdMob inline ads בשדה של שם האפליקציה ובוחרים באפשרות iOS בתור הפלטפורמה.

a4c963c9aa09519.png

  1. אין צורך להפעיל מדדי משתמשים כדי להשלים את ה-Codelab הזה. עם זאת, מומלץ לעשות זאת כי כך תוכלו להבין את התנהגות המשתמשים בצורה מפורטת יותר. לוחצים על הוספה כדי להשלים את התהליך.

b918bf44362813a9.png

יצירה של יחידות מודעות

כדי להוסיף יחידות של מודעות:

  1. בוחרים באפליקציה מודעות מוטבעות של AdMob בתפריט אפליקציות במסוף AdMob.
  2. לוחצים על התפריט יחידות של מודעות.

באנר

  1. לוחצים על הוספה של יחידת מודעות.
  2. בוחרים את הפורמט באנר.
  3. מזינים ios-inline-banner בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירה של יחידת מודעות.

מודעות מותאמות

  1. לוחצים על הוספה של יחידת מודעות.
  2. בוחרים את הפורמט מודעות מותאמות מסוג Advanced.
  3. מזינים ios-inline-native בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירה של יחידת מודעות.

בדרך כלל חולפות כמה שעות עד שיחידת מודעות חדשה יכולה להציג מודעות.

אם אתם רוצים לבדוק את התנהגות המודעה באופן מיידי, צריך להשתמש במזהה האפליקציה לבדיקה ובמזהים של יחידות המודעות שמפורטים בטבלה הבאה.

אופציונלי: שימוש באפליקציה וביחידות המודעות של AdMob לבדיקה

אם אתם רוצים לפעול לפי ה-Codelab במקום ליצור אפליקציה חדשה ויחידות מודעות חדשות בעצמך, אפשר להשתמש במזהה האפליקציה לבדיקה ב-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. הוספת הפלאגין של Google Mobile Ads Flutter

Flutter משתמשת ביישומי פלאגין כדי לספק גישה למגוון רחב של שירותים ספציפיים לפלטפורמה. יישומי פלאגין מאפשרים לגשת לשירותים ולממשקי API בכל פלטפורמה.

הפלאגין google_mobile_ads תומך בטעינה ובהצגה של מודעות באנר, מודעות מעברון, מודעות מתגמלות ומודעות מותאמות באמצעות AdMob API.

מכיוון ש-Flutter הוא SDK בפלטפורמות מרובות, הפלאגין google_mobile_ads רלוונטי גם ל-iOS וגם ל-Android. לכן, אם מוסיפים את הפלאגין לאפליקציית Flutter, נעשה בו שימוש גם בגרסאות Android וגם בגרסאות 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

...

לוחצים על Pub get כדי להתקין את הפלאגין בפרויקט מודעות מוטבעות של AdMob.

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 על ידי קריאה ל-method 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).

הטמעת NativeAd שאיתו אפשר להשתמש ב-Android (Java)

  1. פותחים את הקובץ android/build.gradle (או כל קובץ בתיקיית android), ולוחצים על פתיחה לעריכה ב-Android Studio כדי לפתוח פרויקט Android.

623ad3d2282ccbf8.png

  1. אם תתבקשו לבחור חלון לפתיחת פרויקט חדש, לוחצים על New window (חלון חדש) כדי שפרויקט Flutter יישאר פתוח בזמן העבודה על הפרויקט ב-Android.

d188bb51cf7c2d08.png

יצירת פריסה של מודעות מותאמות

  1. כשפרויקט Android פתוח, לוחצים לחיצה ימנית על האפליקציה מחלונית הפרויקט ב-Android Studio ובוחרים באפשרות חדש > קובץ משאב של Android מתפריט ההקשר.

2b629ee277a68fd7.png

  1. בתיבת הדו-שיח קובץ משאב חדש, מזינים list_tile_native_ad.xml בתור שם הקובץ.
  2. בוחרים את Layout בתור סוג המשאב ומזינים 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>

יוצרים את המחלקה ListTileNativeAdConfiguration

  1. בחלונית 'פרויקט', לוחצים לחיצה ימנית על החבילה com.codelab.flutter.admobinlineads ובוחרים באפשרות חדש > Java Class.

9f3f111dd207a9b4.png

  1. מזינים את השם ListTileNativeAdFactory ובוחרים באפשרות כיתה מהרשימה.

47ff82d92676e26.png

  1. כשמופיעה תיבת הדו-שיח כיתה חדשה, משאירים את כל הפרטים ריקים ולוחצים על אישור.

אפשר לראות שהמחלקה ListTileNativeAdFactory נוצרה בחבילה com.codelab.flutter.admobinlineads.

e4ed232c358ffb19.png

  1. מטמיעים את המחלקה ListTileNativeAdFactory באופן הבא. שימו לב שהמחלקה מממשת את השיטה createNativeAd() בממשק GoogleMobileAdsPlugin.NativeAdFactory.

סיווג המפעל אחראי ליצירת אובייקט 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;
    }
}

רישום המחלקה ListTileNativeAdמפעל

מופע של NativeAdFactory צריך להיות רשום ב-GoogleMobileAdsPlugin לפני שאפשר יהיה להשתמש בו מהצד של Flutter.

  1. פותחים את הקובץ MainActivity.java ומשנים את השיטה configureFlutterEngine() ואת ה-method cleanUpFlutterEngine().
  2. רושמים את המחלקה ListTileNativeAdFactory עם מזהה מחרוזת ייחודי (listTile) ב-method 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.

הטמעה של NativeAdמפעל ל-Android (Kotlin)

  1. פותחים את הקובץ android/build.gradle (או כל קובץ בתיקיית android), ולוחצים על פתיחה לעריכה ב-Android Studio כדי לפתוח פרויקט Android.

623ad3d2282ccbf8.png

  1. אם תתבקשו לבחור חלון לפתיחת פרויקט חדש, לוחצים על New window (חלון חדש) כדי שפרויקט Flutter יישאר פתוח בזמן העבודה על הפרויקט ב-Android.

d188bb51cf7c2d08.png

יצירת פריסה של מודעות מותאמות

  1. כשפרויקט Android פתוח, לוחצים לחיצה ימנית על האפליקציה מחלונית הפרויקט ב-Android Studio ובוחרים באפשרות חדש > קובץ משאב של Android מתפריט ההקשר.

2b629ee277a68fd7.png

  1. בתיבת הדו-שיח קובץ משאב חדש, מזינים list_tile_native_ad.xml בתור שם הקובץ.
  2. בוחרים את Layout בתור סוג המשאב ומזינים 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>

יוצרים את המחלקה ListTileNativeAdConfiguration

  1. בחלונית 'פרויקט', לוחצים לחיצה ימנית על החבילה com.codelab.flutter.admobinlineads ובוחרים באפשרות חדש > קובץ/סיווג של Kotlin.

7311744cb97cad75.png

  1. מזינים את השם ListTileNativeAdFactory ובוחרים באפשרות כיתה מהרשימה.

25691151b5814867.png

  1. אפשר לראות שהמחלקה ListTileNativeAdFactory נוצרה בחבילה com.codelab.flutter.admobinlineads.
  2. מטמיעים את המחלקה ListTileNativeAdFactory באופן הבא. שימו לב שהמחלקה מממשת את השיטה createNativeAd() בממשק GoogleMobileAdsPlugin.NativeAdFactory.

סיווג המפעל אחראי ליצירת אובייקט 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
    }
}

רישום המחלקה ListTileNativeAdמפעל

מופע של NativeAdFactory צריך להיות רשום ב-GoogleMobileAdsPlugin לפני שאפשר יהיה להשתמש בו מהצד של Flutter.

  1. פותחים את הקובץ MainActivity.kt ומשנים את השיטה configureFlutterEngine() ואת ה-method cleanUpFlutterEngine().
  2. רושמים את המחלקה ListTileNativeAdFactory עם מזהה מחרוזת ייחודי (listTile) ב-method 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 (Objective-C)

פותחים את הקובץ ios/Podfile (או קובץ כלשהו בתיקייה ios), ולוחצים על פתיחת מודול iOS ב-Xcode כדי לפתוח פרויקט ב-iOS.

62aa12c10e6d671f.png

הכנת פריסה של מודעות מותאמות

כדי לפרוס את הנכסים שמצורפים למודעות מותאמות, צריכה להיות לך תצוגה מותאמת אישית (*.xib). ב-Codelab הזה, התצוגה המוגדרת מראש משמשת כדי למזער את המאמצים שלכם.

בפרויקט iOS שנפתח ב-Xcode, מוודאים ש-ListTileNativeAdView.xib קיים בפרויקט Runner.

a5f04a32f1868d4f.png

יוצרים את המחלקה ListTileNativeAdConfiguration

  1. בניווט בפרויקט, לוחצים לחיצה ימנית על הקבוצה 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, בוחרים באפשרות New File (קובץ חדש) בקבוצה Runner.
  2. בתיבת הדו-שיח הבאה מזינים ListTileNativeAdFactory בשדה קובץ ובוחרים באפשרות ריק קובץ בתור סוג הקובץ.

2c9c998c48db3a0.png

  1. אחרי הלחיצה על הבא, תתבקשו לבחור תיקייה שבה יש ליצור את הקובץ החדש. משאירים את כל הפרטים ללא שינוי ולוחצים על יצירה.

8635ffe502d1f4ab.png

  1. מטמיעים את המחלקה ListTileNativeFactory באופן הבא. שימו לב שהמחלקה מממשת את השיטה createNativeAd() בפרוטוקול FLTNativeAdFactory.

סיווג המפעל אחראי ליצירת אובייקט 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 צריכה להיות רשומה ב-FLTGoogleMobileAdsPlugin לפני שאפשר יהיה להשתמש בו מהצד של Flutter.

פותחים את הקובץ AppDelegate.m ורושמים את ה-ListTileNativeAdFactory עם מזהה מחרוזת ייחודי (listTile) באמצעות קריאה ל-method [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). ב-Codelab הזה, התצוגה המוגדרת מראש משמשת כדי למזער את המאמצים שלכם.

בפרויקט iOS שנפתח ב-Xcode, מוודאים ש-ListTileNativeAdView.xib קיים בפרויקט Runner.

a5f04a32f1868d4f.png

יוצרים את המחלקה ListTileNativeAdConfiguration

  1. בניווט בפרויקט, לוחצים לחיצה ימנית על הקבוצה Runner ובוחרים באפשרות New File (קובץ חדש) כדי ליצור קובץ כותרת לכיתה החדשה.

9115c92543345ef1.png

  1. בתיבת הדו-שיח של התבנית, בוחרים בקובץ SWIFT ונותנים לו את השם ListTileNativeAdFactory.
  2. אחרי שיוצרים את הקובץ ListTileNativeAdFactory.swift, מטמיעים את המחלקה ListNativeAdFactory.

שימו לב שהמחלקה מממשת את השיטה createNativeAd() בפרוטוקול FLTNativeAdFactory.

סיווג המפעל אחראי ליצירת אובייקט 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 צריכה להיות רשומה ב-FLTGoogleMobileAdsPlugin לפני שאפשר יהיה להשתמש בו מהצד של Flutter.

פותחים את הקובץ AppDelegate.m ורושמים את ה-ListTileNativeAdFactory עם מזהה מחרוזת ייחודי (listTile) באמצעות קריאה ל-method 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 על ידי קריאה ל-method NativeAd.dispose() בשיטת הקריאה החוזרת dispose().

native_inline_page.dart

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

  super.dispose();
}

זהו! מפעילים את הפרויקט ולוחצים על הלחצן מודעה מותאמת מוטבעת בדף הבית. לאחר שהמודעה תיטען, תופיע מודעה מותאמת במרכז הרשימה.

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. הכול מוכן!

סיימתם את ה-Codelab. הקוד שהושלם עבור ה-Codelab הזה מופיע בתיקייה android_studio_folder.pngcomplete או בתיקייה android_studio_folder.png complete_kotlin_swift.