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

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

1. สร้างรายได้โดยส่งคำขอโฆษณาด้วย SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google

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

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

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

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

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

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

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

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

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

• ใช้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google สำหรับปลั๊กอิน Flutter เวอร์ชัน 3.0.0 ขึ้นไปในแอป
• เพิ่ม webview_flutter เป็นการขึ้นต่อกัน ในไฟล์ pubspec.yaml
• เพิ่ม webview_flutter_android เวอร์ชัน 3.7.0 ขึ้นไปในแอป

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

Android

เพิ่มแท็ก <meta-data> ต่อไปนี้ในไฟล์ AndroidManifest.xml เพื่อ ข้ามการตรวจสอบ APPLICATION_ID หากคุณพลาดขั้นตอนนี้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google อาจแสดง 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 หากคุณพลาดขั้นตอนนี้ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google อาจแสดงข้อผิดพลาด GADInvalidInitializationException เมื่อเริ่มแอป

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

ลงทะเบียน WebViewController

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

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

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

3. ลงทะเบียนอินสแตนซ์ WebViewController โดยเรียกใช้เมธอด registerWebView() ที่ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google จัดเตรียมไว้

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 SDK
• เปิดใช้ JavaScript แล้ว
• คุกกี้ของบุคคลที่สามทำงาน (ไม่คาดว่าจะเกิดขึ้นในอุปกรณ์ iOS)
• คุกกี้ของบุคคลที่หนึ่งทำงานอย่างไร

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