การเพิ่มแบนเนอร์ AdMob และโฆษณาเนทีฟแบบอินไลน์ลงในแอป Flutter

1. บทนำ

ใน Codelab นี้ คุณจะได้ติดตั้งใช้งานแบนเนอร์ AdMob และโฆษณาเนทีฟในบรรทัดของ AdMob ในแอป Flutter

สิ่งที่คุณจะสร้าง

Codelab นี้จะแนะนําวิธีใช้โฆษณาแบนเนอร์ในบรรทัดของ AdMob และโฆษณาเนทีฟในบรรทัดของ AdMob ในแอป Flutter โดยใช้ปลั๊กอินโฆษณา Google บนอุปกรณ์เคลื่อนที่สําหรับ Flutter

หากพบปัญหา (ข้อบกพร่องของโค้ด ข้อผิดพลาดทางไวยากรณ์ คำที่ไม่ชัดเจน และอื่นๆ) ขณะทำตาม Codelab นี้ ให้รายงานปัญหาโดยใช้ลิงก์รายงานข้อผิดพลาดที่มุมซ้ายล่างของ Codelab

สิ่งที่คุณจะได้เรียนรู้

  • วิธีกำหนดค่าปลั๊กอิน Flutter สำหรับ Google Mobile Ads
  • วิธีติดตั้งใช้งานโฆษณาแบนเนอร์ในบรรทัดและโฆษณาที่มีการให้รางวัลในแอป Flutter

สิ่งที่คุณต้องมี

  • Android Studio 4.1 ขึ้นไป
  • Xcode 12 ขึ้นไป (สําหรับการพัฒนา iOS)

คุณจะให้คะแนนระดับประสบการณ์การใช้งาน AdMob เท่าใด

ผู้ฝึกหัด ขั้นกลาง ผู้ชำนาญ

คุณจะให้คะแนนระดับประสบการณ์การใช้งาน Flutter เท่าใด

ผู้ฝึกหัด ขั้นกลาง ผู้ชำนาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนา Flutter

คุณต้องมีซอฟต์แวร์ 2 อย่างเพื่อทำแล็บนี้ให้เสร็จสมบูรณ์ ได้แก่ Flutter SDK และโปรแกรมแก้ไข

คุณเรียกใช้ Codelab ได้โดยใช้อุปกรณ์ต่อไปนี้

  • อุปกรณ์ Android หรือ iOS จริงที่เชื่อมต่อกับคอมพิวเตอร์และตั้งค่าเป็นโหมดนักพัฒนาแอป
  • โปรแกรมจำลอง iOS (ต้องติดตั้งเครื่องมือ Xcode)
  • Android Emulator (ต้องตั้งค่าใน Android Studio)
  • เบราว์เซอร์ (ต้องใช้ Chrome สำหรับการแก้ไขข้อบกพร่อง)
  • ในรูปแบบแอปพลิเคชันเดสก์ท็อป Windows, Linux หรือ macOS คุณต้องพัฒนาบนแพลตฟอร์มที่วางแผนจะใช้งาน ดังนั้น หากต้องการพัฒนาแอปเดสก์ท็อป Windows คุณต้องพัฒนาบน Windows เพื่อเข้าถึงห่วงโซ่การสร้างที่เหมาะสม มีข้อกำหนดเฉพาะของระบบปฏิบัติการที่อธิบายไว้โดยละเอียดใน docs.flutter.dev/desktop

ดาวน์โหลดรหัส

หลังจากดาวน์โหลดไฟล์ ZIP แล้ว ให้แตกเนื้อหาของไฟล์ คุณจะมีโฟลเดอร์ชื่อ admob-inline-ads-in-flutter-main

หรือจะโคลนที่เก็บ GitHub จากบรรทัดคำสั่งก็ได้

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

ที่เก็บมี 3 โฟลเดอร์ ได้แก่

  • android_studio_folder.png เริ่มต้น: โค้ดเริ่มต้นที่คุณจะสร้างใน Codelab นี้
  • android_studio_folder.png complete: โค้ดที่เสร็จสมบูรณ์สำหรับ Codelab นี้ (Java และ Objective-C สำหรับโค้ดเนทีฟ)
  • android_studio_folder.png complete_kotlin_swift: โค้ดที่เสร็จสมบูรณ์สำหรับ Codelab นี้ (Kotlin และ Swift สำหรับโค้ดเนทีฟ)

3. ตั้งค่าแอปและหน่วยโฆษณา AdMob

เนื่องจาก Flutter เป็น SDK แบบหลายแพลตฟอร์ม คุณจึงต้องเพิ่มแอปและหน่วยโฆษณาทั้งสำหรับ Android และ iOS ใน AdMob

ตั้งค่าสำหรับ Android

หากต้องการตั้งค่าสำหรับ Android คุณต้องเพิ่มแอป Android และสร้างหน่วยโฆษณา

เพิ่มแอป Android

  1. ในคอนโซล AdMob ให้คลิกเพิ่มแอปจากเมนูแอป
  2. เมื่อระบบถามว่าคุณได้เผยแพร่แอปบน Google Play หรือ App Store แล้วใช่ไหม ให้คลิกไม่
  3. ป้อน AdMob inline ads ในช่องชื่อแอป แล้วเลือก Android เป็นแพลตฟอร์ม

d51828db0e2e4f6c.png

  1. คุณไม่จำเป็นต้องเปิดใช้เมตริกผู้ใช้เพื่อทำ Codelab นี้ให้เสร็จสมบูรณ์ อย่างไรก็ตาม เราขอแนะนำให้คุณทำเนื่องจากจะช่วยให้คุณเข้าใจพฤติกรรมของผู้ใช้ได้ละเอียดยิ่งขึ้น คลิกเพิ่มเพื่อทำกระบวนการให้เสร็จสมบูรณ์

b918bf44362813a9.png

สร้างหน่วยโฆษณา

วิธีเพิ่มหน่วยโฆษณา

  1. เลือกแอป AdMob Inline Ads จากเมนูแอปในคอนโซล AdMob
  2. คลิกเมนูหน่วยโฆษณา

แบนเนอร์

  1. คลิกเพิ่มหน่วยโฆษณา
  2. เลือกแบนเนอร์เป็นรูปแบบ
  3. ป้อน android-inline-banner ในช่องชื่อหน่วยโฆษณา
  4. คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

เนทีฟ

  1. คลิกเพิ่มหน่วยโฆษณา
  2. เลือกเนทีฟขั้นสูงเป็นรูปแบบ
  3. ป้อน android-inline-native ในช่องชื่อหน่วยโฆษณา
  4. คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โดยปกติแล้ว หน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้

หากต้องการทดสอบลักษณะการทํางานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาทดสอบที่ระบุไว้ในตารางรหัสแอป/รหัสหน่วยโฆษณา Android และรหัสแอป/รหัสหน่วยโฆษณา 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 Inline Ads จากเมนูแอปในคอนโซล AdMob
  2. คลิกเมนูหน่วยโฆษณา

แบนเนอร์

  1. คลิกเพิ่มหน่วยโฆษณา
  2. เลือกแบนเนอร์เป็นรูปแบบ
  3. ป้อน ios-inline-banner ในช่องชื่อหน่วยโฆษณา
  4. คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

เนทีฟ

  1. คลิกเพิ่มหน่วยโฆษณา
  2. เลือกเนทีฟขั้นสูงเป็นรูปแบบ
  3. ป้อน ios-inline-native ในช่องชื่อหน่วยโฆษณา
  4. คลิกสร้างหน่วยโฆษณาเพื่อดำเนินการให้เสร็จสิ้น

โดยปกติแล้ว หน่วยโฆษณาใหม่จะใช้เวลา 2-3 ชั่วโมงจึงจะแสดงโฆษณาได้

หากต้องการทดสอบลักษณะการทํางานของโฆษณาทันที ให้ใช้รหัสแอปทดสอบและรหัสหน่วยโฆษณาทดสอบที่แสดงในตารางต่อไปนี้

ไม่บังคับ: ใช้แอปและหน่วยโฆษณา 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. เพิ่มปลั๊กอิน Flutter สำหรับ Google Mobile Ads

Flutter ใช้ปลั๊กอินเพื่อให้สิทธิ์เข้าถึงบริการเฉพาะแพลตฟอร์มที่หลากหลาย ปลั๊กอินช่วยให้คุณเข้าถึงบริการและ API ในแต่ละแพลตฟอร์มได้

ปลั๊กอิน google_mobile_ads รองรับการโหลดและแสดงโฆษณาแบนเนอร์ โฆษณาคั่นระหว่างหน้า โฆษณาที่มีการให้รางวัล และโฆษณาเนทีฟโดยใช้ AdMob API

เนื่องจาก Flutter เป็น SDK แบบหลายแพลตฟอร์ม ปลั๊กอิน google_mobile_ads จึงใช้ได้ทั้งกับ iOS และ Android ดังนั้น หากคุณเพิ่มปลั๊กอินลงในแอป Flutter ทั้งเวอร์ชัน Android และ iOS ของแอปโฆษณา AdMob ในบรรทัดก็จะใช้ปลั๊กอินนี้

เพิ่มปลั๊กอิน Google Mobile Ads เป็นการขึ้นต่อกัน

หากต้องการเข้าถึง AdMob API จากโปรเจ็กต์โฆษณาในบรรทัดของ 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. เริ่มต้นใช้งาน SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google

ก่อนที่จะโหลดโฆษณา คุณต้องเริ่มต้น SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เปิดไฟล์ lib/home_page.dart แล้วแก้ไข _initGoogleMobileAds() เพื่อเริ่มต้น SDK ก่อนที่จะโหลดหน้าแรก

โปรดทราบว่าคุณต้องเปลี่ยนประเภทการคืนค่าของเมธอด _initGoogleMobileAds() จาก Future<dynamic> เป็น Future<InitializationStatus> เพื่อรับผลการเริ่มต้น SDK หลังจากที่ดำเนินการเสร็จสมบูรณ์

home_page.dart

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

import 'package:flutter/material.dart';

...

class HomePage extends StatelessWidget {

  ...

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

7. เพิ่มโฆษณาแบนเนอร์

ในส่วนนี้ คุณจะแสดงโฆษณาแบนเนอร์ตรงกลางรายการ ดังที่แสดงในภาพหน้าจอต่อไปนี้

62c405c962909fd3.png

  1. เปิดไฟล์ lib/banner_inline_page.dart
  2. นำเข้า ad_helper.dart และ google_mobile_ads.dart โดยเพิ่มบรรทัดต่อไปนี้
...

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

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

class BannerInlinePage extends StatefulWidget {
  ...
}
  1. ในคลาส _BannerInlinePageState ให้เพิ่มสมาชิกและเมธอดต่อไปนี้สำหรับโฆษณาแบนเนอร์

โปรดทราบว่า _kAdIndex ระบุดัชนีที่จะแสดงโฆษณาแบนเนอร์ และใช้เพื่อคำนวณดัชนีรายการจากวิธีการ _getDestinationItemIndex()

banner_inline_page.dart

class _BannerInlinePageState extends State<BannerInlinePage> {

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

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

  ...

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

  ...
}
  1. ในเมธอด initState() ให้สร้างและโหลด BannerAd สำหรับแบนเนอร์ขนาด 320x50 (AdSize.banner) โปรดทราบว่ามีการกำหนดค่าเครื่องมือจัดการเหตุการณ์โฆษณาเพื่ออัปเดต UI (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.png c32af50872514224.png

8. เพิ่มโฆษณาเนทีฟ

ในส่วนนี้ คุณจะแสดงโฆษณาเนทีฟตรงกลางรายการ ดังที่แสดงในภาพหน้าจอด้านล่าง

f1671b0fa349ccf8.png

โฆษณาเนทีฟจะแสดงต่อผู้ใช้โดยใช้คอมโพเนนต์ UI ที่เป็นของแพลตฟอร์มนั้นๆ (เช่น View ใน Android หรือ UIView ใน iOS)

อย่างไรก็ตาม คุณไม่สามารถสร้างคอมโพเนนต์ UI ดั้งเดิมได้โดยตรงโดยใช้วิดเจ็ต Flutter ดังนั้น คุณต้องใช้ NativeAdFactory สำหรับแต่ละแพลตฟอร์ม ซึ่งใช้เพื่อสร้างมุมมองโฆษณาเนทีฟเฉพาะแพลตฟอร์ม (NativeAdView ใน Android และ GADNativeAdView ใน iOS) จากออบเจ็กต์โฆษณาเนทีฟ (NativeAd ใน Android และ GADNativeAd ใน iOS)

ติดตั้งใช้งาน NativeAdFactory สำหรับ Android (Java)

  1. เปิดไฟล์ android/build.gradle (หรือไฟล์ใดก็ได้ในโฟลเดอร์ android) แล้วคลิกเปิดเพื่อแก้ไขใน Android Studio เพื่อเปิดโปรเจ็กต์ Android

623ad3d2282ccbf8.png

  1. หากระบบขอให้คุณเลือกหน้าต่างเพื่อเปิดโปรเจ็กต์ใหม่ ให้คลิกหน้าต่างใหม่เพื่อให้โปรเจ็กต์ Flutter เปิดอยู่ขณะที่คุณทำงานในโปรเจ็กต์ Android

d188bb51cf7c2d08.png

สร้างเลย์เอาต์โฆษณาเนทีฟ

  1. เมื่อเปิดโปรเจ็กต์ Android แล้ว ให้คลิกขวาที่ app จากบานหน้าต่างโปรเจ็กต์ใน Android Studio แล้วเลือก New > Android Resource File จากเมนูบริบท

2b629ee277a68fd7.png

  1. ในกล่องโต้ตอบไฟล์ทรัพยากรใหม่ ให้ป้อน list_tile_native_ad.xml เป็นชื่อไฟล์
  2. เลือกเลย์เอาต์เป็นประเภททรัพยากร แล้วป้อน 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. ในแผงโปรเจ็กต์ ให้คลิกขวาที่แพ็กเกจ com.codelab.flutter.admobinlineads แล้วเลือกใหม่ > คลาส Java

9f3f111dd207a9b4.png

  1. ป้อน ListTileNativeAdFactory เป็นชื่อ แล้วเลือกชั้นเรียนจากรายการ

47ff82d92676e26.png

  1. หลังจากกล่องโต้ตอบชั้นเรียนใหม่ปรากฏขึ้น ให้ปล่อยทุกอย่างว่างไว้ แล้วคลิกตกลง

คุณจะเห็นว่าระบบสร้างListTileNativeAdFactoryชั้นเรียนcom.codelab.flutter.admobinlineadsในแพ็กเกจแล้ว

e4ed232c358ffb19.png

  1. ใช้คลาส ListTileNativeAdFactory ดังนี้ โปรดทราบว่าคลาสจะใช้เมธอด createNativeAd() ในอินเทอร์เฟซ GoogleMobileAdsPlugin.NativeAdFactory

คลาส Factory มีหน้าที่สร้างออบเจ็กต์มุมมองสําหรับการแสดงโฆษณาเนทีฟ ดังที่เห็นจากโค้ด คลาส 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

คุณควรลงทะเบียนอินสแตนซ์ของ NativeAdFactory กับ GoogleMobileAdsPlugin ก่อนจึงจะใช้จากฝั่ง Flutter ได้

  1. เปิดไฟล์ MainActivity.java แล้วลบล้างเมธอด configureFlutterEngine() และเมธอด cleanUpFlutterEngine()
  2. ลงทะเบียนคลาส ListTileNativeAdFactory ด้วยรหัสสตริงที่ไม่ซ้ำกัน (listTile) ในเมธอด configureFlutterEngine()

MainActivity.java

public class MainActivity extends FlutterActivity {

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

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

    ...
}
  1. ควรยกเลิกการลงทะเบียนอินสแตนซ์ NativeAdFactory ทุกรายการในระหว่างกระบวนการล้างข้อมูล ยกเลิกการลงทะเบียนคลาส ListTileNativeAdFactory ในเมธอด cleanUpFlutterEngine()

MainActivity.java

public class MainActivity extends FlutterActivity {

    ...

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

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

ตอนนี้คุณพร้อมที่จะใช้คลาส ListTileNativeAdFactory เพื่อแสดงโฆษณาเนทีฟใน Android แล้ว

ใช้ NativeAdFactory สำหรับ Android (Kotlin)

  1. เปิดไฟล์ android/build.gradle (หรือไฟล์ใดก็ได้ในโฟลเดอร์ android) แล้วคลิกเปิดเพื่อแก้ไขใน Android Studio เพื่อเปิดโปรเจ็กต์ Android

623ad3d2282ccbf8.png

  1. หากระบบขอให้คุณเลือกหน้าต่างเพื่อเปิดโปรเจ็กต์ใหม่ ให้คลิกหน้าต่างใหม่เพื่อให้โปรเจ็กต์ Flutter เปิดอยู่ขณะที่คุณทำงานในโปรเจ็กต์ Android

d188bb51cf7c2d08.png

สร้างเลย์เอาต์โฆษณาเนทีฟ

  1. เมื่อเปิดโปรเจ็กต์ Android แล้ว ให้คลิกขวาที่ app จากบานหน้าต่างโปรเจ็กต์ใน Android Studio แล้วเลือก New > Android Resource File จากเมนูบริบท

2b629ee277a68fd7.png

  1. ในกล่องโต้ตอบไฟล์ทรัพยากรใหม่ ให้ป้อน list_tile_native_ad.xml เป็นชื่อไฟล์
  2. เลือกเลย์เอาต์เป็นประเภททรัพยากร แล้วป้อน 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. ในแผงโปรเจ็กต์ ให้คลิกขวาที่แพ็กเกจ com.codelab.flutter.admobinlineads แล้วเลือกใหม่ > ไฟล์/คลาส Kotlin

7311744cb97cad75.png

  1. ป้อน ListTileNativeAdFactory เป็นชื่อ แล้วเลือกชั้นเรียนจากรายการ

25691151b5814867.png

  1. คุณจะเห็นว่าระบบสร้างListTileNativeAdFactoryชั้นเรียนcom.codelab.flutter.admobinlineadsในแพ็กเกจแล้ว
  2. ใช้คลาส ListTileNativeAdFactory ดังนี้ โปรดทราบว่าคลาสจะใช้เมธอด createNativeAd() ในอินเทอร์เฟซ GoogleMobileAdsPlugin.NativeAdFactory

คลาส Factory มีหน้าที่สร้างออบเจ็กต์มุมมองสําหรับการแสดงโฆษณาเนทีฟ ดังที่เห็นจากโค้ด คลาส 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

คุณควรลงทะเบียนอินสแตนซ์ของ NativeAdFactory กับ GoogleMobileAdsPlugin ก่อนจึงจะใช้จากฝั่ง Flutter ได้

  1. เปิดไฟล์ MainActivity.kt แล้วลบล้างเมธอด configureFlutterEngine() และเมธอด cleanUpFlutterEngine()
  2. ลงทะเบียนคลาส ListTileNativeAdFactory ด้วยรหัสสตริงที่ไม่ซ้ำกัน (listTile) ในเมธอด configureFlutterEngine()

MainActivity.kt

class MainActivity: FlutterActivity() {

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

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

    ...
}
  1. ควรยกเลิกการลงทะเบียนอินสแตนซ์ NativeAdFactory ทุกรายการในระหว่างกระบวนการล้างข้อมูล ยกเลิกการลงทะเบียนคลาส ListTileNativeAdFactory ในเมธอด cleanUpFlutterEngine()

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

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

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

ตอนนี้คุณพร้อมที่จะใช้คลาส ListTileNativeAdFactory เพื่อแสดงโฆษณาเนทีฟใน Android แล้ว

ติดตั้งใช้งาน NativeAdFactory สำหรับ iOS (Objective-C)

เปิดไฟล์ ios/Podfile (หรือไฟล์ใดก็ได้ในโฟลเดอร์ ios) แล้วคลิกเปิดโมดูล iOS ใน Xcode เพื่อเปิดโปรเจ็กต์ iOS

62aa12c10e6d671f.png

เตรียมเลย์เอาต์โฆษณาเนทีฟ

คุณจะต้องมีมุมมองที่กำหนดเอง (*.xib) สำหรับการจัดวางชิ้นงานโฆษณาเนทีฟ ในโค้ดแล็บนี้ เราจะใช้มุมมองที่กำหนดค่าไว้ล่วงหน้าเพื่อลดความพยายามของคุณ

เมื่อเปิดโปรเจ็กต์ iOS ใน Xcode แล้ว ให้ตรวจสอบว่ามี ListTileNativeAdView.xib อยู่ในโปรเจ็กต์ Runner

a5f04a32f1868d4f.png

สร้างคลาส ListTileNativeAdFactory

  1. จากแถบนำทางโปรเจ็กต์ ให้คลิกขวาที่กลุ่ม Runner แล้วเลือกไฟล์ใหม่เพื่อสร้างไฟล์ส่วนหัวสำหรับคลาสใหม่

6455aab9e9881ca.png

  1. ในกล่องโต้ตอบเทมเพลต ให้เลือกไฟล์ส่วนหัว แล้วตั้งชื่อเป็น ListTileNativeAdFactory
  2. หลังจากสร้างไฟล์ ListTileNativeAdFactory.h แล้ว ให้กำหนดคลาส ListNativeAdFactory ดังนี้

ListTileNativeAdFactory.h

#ifndef ListTileNativeAdFactory_h
#define ListTileNativeAdFactory_h

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

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

@end


#endif /* ListTileNativeAdFactory_h */
  1. สร้างไฟล์ Objective-C โดยเลือกไฟล์ใหม่จากกลุ่ม Runner
  2. ในกล่องโต้ตอบถัดไป ให้ป้อน ListTileNativeAdFactory ในช่องไฟล์ แล้วเลือกไฟล์ว่างเป็นประเภทไฟล์

2c9c998c48db3a0.png

  1. หลังจากคลิกถัดไปแล้ว ระบบจะขอให้คุณเลือกโฟลเดอร์ที่จะสร้างไฟล์ใหม่ ปล่อยให้ทุกอย่างเหมือนเดิม แล้วคลิกสร้าง

8635ffe502d1f4ab.png

  1. ใช้คลาส ListTileNativeFactory ดังนี้ โปรดทราบว่าคลาสจะใช้เมธอด createNativeAd() ในโปรโตคอล FLTNativeAdFactory

คลาส Factory มีหน้าที่สร้างออบเจ็กต์มุมมองสําหรับการแสดงโฆษณาเนทีฟ ดังที่เห็นจากโค้ด คลาส 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 กับ FLTGoogleMobileAdsPlugin ก่อนจึงจะใช้งานจากฝั่ง Flutter ได้

เปิดไฟล์ AppDelegate.m แล้วลงทะเบียน ListTileNativeAdFactory ด้วยรหัสสตริงที่ไม่ซ้ำกัน (listTile) โดยเรียกใช้เมธอด [FLTGoogleMobileAdsPlugin registerNativeAdFactory]

AppDelegate.m

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

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

@implementation AppDelegate

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

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

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

@end

ตอนนี้คุณพร้อมที่จะใช้ ListTileNativeAdFactory เพื่อแสดงโฆษณาเนทีฟใน iOS แล้ว

ติดตั้งใช้งาน NativeAdFactory สำหรับ iOS (Swift)

เปิดไฟล์ ios/Podfile (หรือไฟล์ใดก็ได้ในโฟลเดอร์ ios) แล้วคลิกเปิดโมดูล iOS ใน Xcode เพื่อเปิดโปรเจ็กต์ iOS

62aa12c10e6d671f.png

เตรียมเลย์เอาต์โฆษณาเนทีฟ

คุณจะต้องมีมุมมองที่กำหนดเอง (*.xib) สำหรับการจัดวางชิ้นงานโฆษณาเนทีฟ ในโค้ดแล็บนี้ เราจะใช้มุมมองที่กำหนดค่าไว้ล่วงหน้าเพื่อลดความพยายามของคุณ

เมื่อเปิดโปรเจ็กต์ iOS ใน Xcode แล้ว ให้ตรวจสอบว่ามี ListTileNativeAdView.xib อยู่ในโปรเจ็กต์ Runner

a5f04a32f1868d4f.png

สร้างคลาส ListTileNativeAdFactory

  1. จากแถบนำทางโปรเจ็กต์ ให้คลิกขวาที่กลุ่ม Runner แล้วเลือกไฟล์ใหม่เพื่อสร้างไฟล์ส่วนหัวสำหรับคลาสใหม่

9115c92543345ef1.png

  1. ในกล่องโต้ตอบเทมเพลต ให้เลือกไฟล์ Swift แล้วตั้งชื่อเป็น ListTileNativeAdFactory
  2. หลังจากสร้างไฟล์ ListTileNativeAdFactory.swift แล้ว ให้ใช้คลาส ListNativeAdFactory

โปรดทราบว่าคลาสจะใช้เมธอด createNativeAd() ในโปรโตคอล FLTNativeAdFactory

คลาส Factory มีหน้าที่สร้างออบเจ็กต์มุมมองสําหรับการแสดงโฆษณาเนทีฟ ดังที่เห็นจากโค้ด คลาส Factory จะสร้าง GADNativeAdView และป้อนข้อมูลด้วยออบเจ็กต์ GADNativeAd

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

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

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

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

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

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

ลงทะเบียนคลาส ListTileNativeAdFacotry

คุณควรลงทะเบียนการใช้งาน FLTNativeAdFactory กับ FLTGoogleMobileAdsPlugin ก่อนจึงจะใช้งานจากฝั่ง Flutter ได้

เปิดไฟล์ AppDelegate.m แล้วลงทะเบียน ListTileNativeAdFactory ด้วยรหัสสตริงที่ไม่ซ้ำกัน (listTile) โดยเรียกใช้เมธอด FLTGoogleMobileAdsPlugin.registerNativeAdFactory()

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

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

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

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

ตอนนี้คุณพร้อมที่จะใช้ ListTileNativeAdFactory เพื่อแสดงโฆษณาเนทีฟใน iOS แล้ว

ผสานรวมโฆษณาเนทีฟกับวิดเจ็ต Flutter

  1. เปิดไฟล์ lib/native_inline_page.dart จากนั้นนำเข้า ad_helper.dart และ google_mobile_ads.dart โดยเพิ่มบรรทัดต่อไปนี้

native_inline_page.dart

...

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

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

class NativeInlinePage extends StatefulWidget {
  ...
}
  1. ใน _NativeInlinePageState class ให้เพิ่มสมาชิกและเมธอดต่อไปนี้สำหรับโฆษณาเนทีฟ

โปรดทราบว่า _kAdIndex ระบุดัชนีที่จะแสดงโฆษณาแบนเนอร์ และใช้เพื่อคำนวณดัชนีรายการจากวิธีการ _getDestinationItemIndex()

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

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

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

  ...

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

  ...
}
  1. ในinitState()วิธีนี้ ให้สร้างและโหลด NativeAd ที่ใช้ ListTileNativeAdFactory เพื่อสร้างมุมมองโฆษณาเนทีฟ

โปรดทราบว่าระบบจะใช้รหัสโรงงาน (listTile) เดียวกันกับที่ใช้ลงทะเบียนโรงงานกับปลั๊กอิน

native_inline_page.dart

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

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

  _ad.load();
}
  1. แก้ไขเมธอด build() เพื่อแสดงโฆษณาแบนเนอร์เมื่อพร้อมใช้งาน
  2. อัปเดต itemCount, เพื่อให้นับรายการโฆษณาแบนเนอร์ และอัปเดต itemBuilder, เพื่อแสดงโฆษณาแบนเนอร์ที่ดัชนีโฆษณา (_kAdIndex) เมื่อโหลดโฆษณา
  3. อัปเดตโค้ดเพื่อใช้วิธี _getDestinationItemIndex() ในการดึงข้อมูลดัชนีสำหรับรายการเนื้อหา

native_inline_page.dart

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

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. ปล่อยทรัพยากรที่เชื่อมโยงกับออบเจ็กต์ NativeAd โดยเรียกใช้เมธอด NativeAd.dispose() ในเมธอดเรียกกลับ dispose()

native_inline_page.dart

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

  super.dispose();
}

เท่านี้ก็เรียบร้อย เรียกใช้โปรเจ็กต์ แล้วคลิกปุ่มโฆษณาเนทีฟในบรรทัดจากหน้าแรก หลังจากโหลดโฆษณาแล้ว คุณจะเห็นโฆษณาเนทีฟอยู่ตรงกลางรายการ

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. เสร็จเรียบร้อย

คุณทำ Codelab เสร็จแล้ว คุณดูโค้ดที่เสร็จสมบูรณ์สำหรับ Codelab นี้ได้ในโฟลเดอร์ android_studio_folder.pngcomplete หรือ android_studio_folder.png complete_kotlin_swift