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

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

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

   คุณสามารถสร้างรายได้จากแอปด้วยการส่งคำขอโฆษณาสำหรับ Ad Manager ที่มีฟังก์ชัน 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 สําหรับโฆษณา โปรดทําตามขั้นตอนต่อไปนี้

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

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

Android

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

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

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

3. ลงทะเบียนอินสแตนซ์ WebViewController โดยการเรียกใช้ registerWebView() ที่ได้รับจาก Google Mobile Ads SDK

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://webview-api-for-ads-test.glitch.me/ เพื่อทดสอบการผสานรวมก่อน โดยใช้ 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://webview-api-for-ads-test.glitch.me/'));
  }

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

• WebView เชื่อมต่อกับ SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google แล้ว
• เปิดใช้ JavaScript แล้ว
• คุกกี้ของบุคคลที่สามใช้งานได้ (ไม่จำเป็นในอุปกรณ์ iOS)
• คุกกี้ของบุคคลที่หนึ่งใช้งานได้

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