ผสานรวม 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 กับ Google Mobile Ads SDK 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 ขึ้นไปในแอป

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

AndroidiOS

เพิ่มแท็ก <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"/>

อัปเดตไฟล์ 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. หากต้องการปรับปรุงประสบการณ์การใช้งานโฆษณาของผู้ใช้และสอดคล้องกับนโยบายคุกกี้ของ 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://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= ได้ด้วย