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

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

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

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

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

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 เป็นทรัพยากร Dependency ในไฟล์ 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 ให้ทำตามขั้นตอนที่ระบุไว้ด้านล่าง

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

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

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://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= ได้อีกด้วย