ผสานรวม WebView API สำหรับโฆษณา

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

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

   คุณสามารถสร้างรายได้จากแอปได้โดยส่งคำขอโฆษณาไปยัง AdMob ด้วย 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 เวอร์ชัน 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. เปิดใช้คุกกี้ของบุคคลที่สามในอินสแตนซ์ AndroidWebViewController เพื่อปรับปรุงประสบการณ์การใช้งานโฆษณาของผู้ใช้และให้สอดคล้องกับ นโยบายคุกกี้ของ Chrome

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= ได้ด้วย