การเพิ่มแบนเนอร์ 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 (ต้องตั้งค่าใน 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 เสร็จสมบูรณ์: โค้ดสำหรับ 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 จากเมนูแอปในคอนโซล 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 จากเมนูแอปในคอนโซล 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 แอปโฆษณาแบบอินไลน์ของ AdMob ทั้งเวอร์ชัน Android และ iOS จะใช้ปลั๊กอินดังกล่าว

เพิ่มปลั๊กอินโฆษณาในอุปกรณ์เคลื่อนที่ของ Google เป็นทรัพยากร Dependency

หากต้องการเข้าถึง AdMob API จากโปรเจ็กต์โฆษณาในบรรทัดของ AdMob ให้เพิ่ม google_mobile_ads เป็นทรัพยากร Dependency ไปยังไฟล์ 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) โปรดทราบว่า Listener เหตุการณ์โฆษณามีการกำหนดค่าให้อัปเดต 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 แล้ว ให้คลิกขวาที่แอปจากแผงโปรเจ็กต์ใน Android Studio แล้วเลือกใหม่ > ไฟล์ทรัพยากร Android จากเมนูตามบริบท

2b629ee277a68fd7.png

  1. ในกล่องโต้ตอบไฟล์ทรัพยากรใหม่ ให้ป้อน list_tile_native_ad.xml เป็นชื่อไฟล์
  2. เลือกเลย์เอาต์เป็นประเภททรัพยากร แล้วป้อน com.google.android.gms.ads.nativead.NativeAdView เป็นองค์ประกอบรูท
  3. คลิกตกลงเพื่อสร้างไฟล์เลย์เอาต์ใหม่

575f126dd018bc0.png

  1. ใช้การจัดวางโฆษณาดังนี้ โปรดทราบว่าเค้าโครงควรตรงกับการออกแบบประสบการณ์ของผู้ใช้สำหรับแพลตฟอร์มของแพลตฟอร์มนั้น

list_tile_native_ad.xml

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

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

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

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

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

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

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

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

        </LinearLayout>

    </FrameLayout>

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

สร้างคลาส ListTileNativeAdfactor

  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

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

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

ควรลงทะเบียนอินสแตนซ์ของ 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 แล้ว ให้คลิกขวาที่แอปจากแผงโปรเจ็กต์ใน Android Studio แล้วเลือกใหม่ > ไฟล์ทรัพยากร Android จากเมนูตามบริบท

2b629ee277a68fd7.png

  1. ในกล่องโต้ตอบไฟล์ทรัพยากรใหม่ ให้ป้อน list_tile_native_ad.xml เป็นชื่อไฟล์
  2. เลือกเลย์เอาต์เป็นประเภททรัพยากร แล้วป้อน com.google.android.gms.ads.nativead.NativeAdView เป็นองค์ประกอบรูท
  3. คลิกตกลงเพื่อสร้างไฟล์เลย์เอาต์ใหม่

575f126dd018bc0.png

  1. ใช้การจัดวางโฆษณาดังนี้ โปรดทราบว่าเค้าโครงควรตรงกับการออกแบบประสบการณ์ของผู้ใช้สำหรับแพลตฟอร์มของแพลตฟอร์มนั้น

list_tile_native_ad.xml

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

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

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

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

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

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

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

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

        </LinearLayout>

    </FrameLayout>

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

สร้างคลาส ListTileNativeAdfactor

  1. ในแผงโปรเจ็กต์ ให้คลิกขวาที่แพ็กเกจ com.codelab.flutter.admobinlineads แล้วเลือกใหม่ > ไฟล์/คลาส Kotlin

7311744cb97cad75.png

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

25691151b5814867.png

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

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

ListTileNativeAdFactory.kt

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads

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

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

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

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

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

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

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

            setNativeAd(nativeAd)
        }

        return nativeAdView
    }
}

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

ควรลงทะเบียนอินสแตนซ์ของ 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 แล้ว

ใช้งาน NativeAdMan สำหรับ iOS (Objective-C)

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

62aa12c10e6d671f.png

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

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

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

a5f04a32f1868d4f.png

สร้างคลาส ListTileNativeAdfactor

  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

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

ใช้งาน NativeAdfactor สำหรับ iOS (Swift)

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

62aa12c10e6d671f.png

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

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

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

a5f04a32f1868d4f.png

สร้างคลาส ListTileNativeAdfactor

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

9115c92543345ef1.png

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

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

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

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

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

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

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

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

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

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

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

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

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

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

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

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

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

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

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

native_inline_page.dart

...

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

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

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

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

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

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

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

  ...

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

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

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

native_inline_page.dart

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

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

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

native_inline_page.dart

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

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