ใช้ WebView API สำหรับโฆษณา

WebView API สำหรับโฆษณาช่วยให้สร้างรายได้จากโฆษณาในแอปได้โดยใช้ WebViewController หากคุณแสดงเนื้อหาเว็บที่ใช้โฆษณาด้วย โค้ด AdSense หรือ แท็กผู้เผยแพร่โฆษณาผ่าน Google ในแอปผ่าน WebViewController คุณควรใช้ API นี้เพื่อเปิดใช้การสร้างรายได้จากโฆษณา ดูข้อมูลเพิ่มเติมได้ที่ AdSense และ Ad Manager

1. สร้างรายได้โดยส่งคำขอโฆษณาด้วย Google Mobile Ads Flutter Plugin

   คุณสามารถสร้างรายได้จากแอปได้โดยส่งคำขอโฆษณาไปยัง Ad Manager ด้วย Google Mobile Ads Flutter Plugin ด้วยการใช้รูปแบบโฆษณาสำหรับแอปบนอุปกรณ์เคลื่อนที่

   ดูข้อมูลเพิ่มเติม

2. สร้างรายได้โดยใช้ WebView API สำหรับโฆษณา

   หากแอปของคุณใช้ WebViewController เพื่อแสดงเนื้อหาเว็บที่แสดงโฆษณาจาก Ad Manager หรือ AdSense ให้ใช้ WebView API สำหรับโฆษณาเพื่อลงทะเบียนออบเจ็กต์ WebViewController กับ Google Mobile Ads Flutter Plugin JavaScript ใน โค้ด AdSense หรือแท็กผู้เผยแพร่โฆษณาผ่าน Google จะสร้างและส่งคำขอโฆษณา ดังนั้นคุณจึงไม่จำเป็นต้องส่งคำขอโฆษณาด้วย SDK โปรดทราบว่ามีเพียงรูปแบบพื้นที่โฆษณาบนเว็บสำหรับอุปกรณ์เคลื่อนที่และเว็บสำหรับเดสก์ท็อปเท่านั้น ที่พร้อมใช้งาน โดยใช้ API นี้

   หากคุณไม่ได้เป็นเจ้าของเนื้อหาเว็บใน WebViewController เราขอแนะนำให้คุณใช้ API นี้เพื่อช่วยปกป้องผู้ลงโฆษณาจากสแปมและปรับปรุงการสร้างรายได้สำหรับผู้เผยแพร่โฆษณาบนเว็บที่ให้เนื้อหา

โปรดทราบว่าคุณสามารถเลือกใช้ตัวเลือกใดตัวเลือกหนึ่งหรือทั้งสองตัวเลือกในแอปเดียวกันก็ได้

คู่มือนี้มีไว้เพื่อช่วยคุณผสานรวม WebView API สำหรับโฆษณาเข้ากับแอป iOS

ก่อนเริ่มต้น

ก่อนเริ่มใช้ WebView API สำหรับโฆษณา โปรดตรวจสอบว่าคุณได้ทำสิ่งต่อไปนี้แล้ว

• ใช้ Google Mobile Ads Flutter Plugin สำหรับ Flutter Plugin เวอร์ชัน 3.0.0 ขึ้นไปในแอป
• เพิ่ม webview_flutter เป็นการพึ่งพา ในไฟล์ pubspec.yaml
• เพิ่ม webview_flutter_android เวอร์ชัน 3.7.0 ขึ้นไปในแอป

ข้ามการตรวจสอบตัวระบุแอปพลิเคชัน

Android

เพิ่มแท็ก <meta-data> ต่อไปนี้ในไฟล์ AndroidManifest.xml เพื่อ ข้ามการตรวจสอบ APPLICATION_ID หากคุณข้ามขั้นตอนนี้ Google Mobile Ads Flutter Plugin อาจแสดง IllegalStateException เมื่อเริ่มแอป

<!-- Bypass APPLICATION_ID check for WebView API for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview"/>

iOS

อัปเดตไฟล์ Runner/Info.plist ด้วยคีย์และค่าสตริงด้านล่างเพื่อข้ามการตรวจสอบ GADApplicationIdentifier หากคุณข้ามขั้นตอนนี้ Google Mobile Ads Flutter Plugin อาจแสดง GADInvalidInitializationException เมื่อเริ่มแอป

<!-- Bypass GADApplicationIdentifier check for WebView API for Ads -->
<key>GADIntegrationManager</key>
<string>webview</string>

ลงทะเบียน WebViewController

หากต้องการปรับปรุงการสร้างรายได้จากโฆษณาในแอปของโฆษณาภายใน WebViewController ที่ใช้ AdSense โค้ด หรือ แท็กผู้เผยแพร่โฆษณาผ่าน Google ให้ทำตามขั้นตอน ที่ระบุไว้ด้านล่าง:

1. เปิดใช้ JavaScript ใน WebViewController หากไม่ทำเช่นนั้น โฆษณาอาจไม่โหลด

2. หากต้องการปรับปรุงประสบการณ์การใช้งานโฆษณาของผู้ใช้และให้สอดคล้องกับ นโยบายคุกกี้ของ Chrome ให้เปิดใช้ คุกกี้ของบุคคลที่สามในอินสแตนซ์ AndroidWebViewController

3. ลงทะเบียนอินสแตนซ์ WebViewController โดยเรียกใช้ registerWebView() เมธอดที่ Google Mobile Ads Flutter Plugin มีให้

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

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

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);
  }
}

โหลด URL

ตอนนี้คุณสามารถโหลด URL และแสดงเนื้อหาเว็บผ่าน WebViewController ได้แล้ว เราขอแนะนำให้คุณโหลด URL ทดสอบนี้ https://google.github.io/webview-ads/test/ เพื่อทดสอบการผสานรวมก่อนที่จะใช้ URL ของคุณเอง หน้าเว็บจะแสดงข้อผิดพลาดหากไม่ได้เปิดใช้ JavaScript

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';

@override
class WebViewExampleState extends State<WebViewExample> {
  late final WebViewController controller;

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

    createWebView();
  }

  void createWebView() async {
    controller = WebViewController();
    // 1. Enable JavaScript in the web view.
    await controller.setJavaScriptMode(JavaScriptMode.unrestricted);

    // 2. Enable third-party cookies for Android.
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewCookieManager cookieManager = AndroidWebViewCookieManager(
        const PlatformWebViewCookieManagerCreationParams());
      await cookieManager.setAcceptThirdPartyCookies(
        controller.platform as AndroidWebViewController, true);
    }

    // 3. Register the web view.
    await MobileAds.instance.registerWebView(controller);

    // 4. Load the URL.
    await controller.loadRequest(Uri.parse('https://google.github.io/webview-ads/test/'));
  }

URL ทดสอบจะแสดงแถบสถานะสีเขียวสำหรับการผสานรวมที่สำเร็จหากเป็นไปตามเงื่อนไขต่อไปนี้

• WebView เชื่อมต่อกับ Google Mobile Ads Flutter Plugin
• เปิดใช้ JavaScript แล้ว
• คุกกี้ของบุคคลที่สามใช้งานได้ (ไม่คาดว่าจะเกิดขึ้นในอุปกรณ์ iOS)
• คุกกี้ของบุคคลที่หนึ่งใช้งานได้

ดูซอร์สโค้ด ของ URL ทดสอบ จากนั้นคุณสามารถแทนที่ URL ทดสอบด้วย URL ของคุณได้ นอกจากนี้ คุณยัง ใช้เครื่องมือพร็อกซี เช่น Charles เพื่อบันทึกการรับส่งข้อมูล HTTPS ของแอปและตรวจสอบคำขอโฆษณาสำหรับพารามิเตอร์ &scar= ได้ด้วย