Trang này được dịch bởi Cloud Translation API.

Tích hợp API WebView cho quảng cáo

API WebView cho quảng cáo cho phép bạn kiếm tiền từ quảng cáo trong ứng dụng bằng cách sử dụng WebViewController. Nếu bạn hiển thị nội dung trên web sẽ triển khai quảng cáo bằng Mã AdSense hoặc Thẻ nhà xuất bản của Google trong ứng dụng của mình thông qua WebViewController, bạn nên sử dụng API này để bật quảng cáo kiếm tiền. Để tìm hiểu thêm, hãy xem AdSense và Ad Manager.

Kiếm tiền bằng cách thực hiện các yêu cầu quảng cáo thông qua SDK Quảng cáo của Google trên thiết bị di động

Bạn có thể kiếm tiền từ ứng dụng của mình bằng cách đưa ra yêu cầu quảng cáo cho Ad Manager với SDK Quảng cáo của Google trên thiết bị di động bằng cách triển khai định dạng quảng cáo cho thiết bị di động .
Tìm hiểu thêm.
Kiếm tiền bằng cách sử dụng API WebView cho quảng cáo

Nếu ứng dụng của bạn sử dụng WebViewController để hiển thị nội dung trên web phân phát quảng cáo từ Ad Manager hoặc AdSense, sử dụng API WebView cho quảng cáo để đăng ký WebViewController đối tượng có SDK Quảng cáo của Google trên thiết bị di động. Chiến lược phát hành đĩa đơn JavaScript trong mã AdSense hoặc Thẻ nhà xuất bản của Google tạo và gửi yêu cầu quảng cáo, do đó bạn không cần thực hiện bất kỳ yêu cầu quảng cáo nào với SDK. Xin lưu ý rằng chỉ web dành cho thiết bị di động và web dành cho máy tính định dạng khoảng không quảng cáo khả dụng bằng API này.

Nếu không sở hữu nội dung trên web trong một WebViewController, bạn vẫn khuyến khích sử dụng API này để giúp bảo vệ nhà quảng cáo khỏi spam và cải thiện khả năng kiếm tiền cho các nhà xuất bản web đã cung cấp nội dung.

Xin lưu ý rằng bạn có thể làm theo một trong hai cách hoặc thậm chí là cả hai cách trong cùng một ứng dụng.

Hướng dẫn này nhằm giúp bạn tích hợp API WebView cho quảng cáo vào Ứng dụng iOS.

Trước khi bắt đầu

Trước khi bắt đầu sử dụng API WebView cho quảng cáo, hãy nhớ làm như sau:

Sử dụng SDK Quảng cáo của Google trên thiết bị di động dành cho trình bổ trợ Flutter có phiên bản 3.0.0 trở lên trong ứng dụng của bạn.
Thêm webview_flutter làm phần phụ thuộc trong tệp pubspec.yaml.
Thêm webview_flutter_android có phiên bản 3.7.0 trở lên trong ứng dụng của bạn.

Bỏ qua việc kiểm tra mã nhận dạng ứng dụng

Android

Thêm thẻ <meta-data> sau đây trong tệp AndroidManifest.xml của bạn vào bỏ qua việc kiểm tra APPLICATION_ID. Nếu bạn bỏ lỡ bước này, SDK quảng cáo trên thiết bị di động có thể gửi IllegalStateException khi khởi động ứng dụng.

<!-- Bypass APPLICATION_ID check for WebView API for Ads -->
<meta-data
    android:name="com.google.android.gms.ads.INTEGRATION_MANAGER"
    android:value="webview"/>

iOS

Cập nhật tệp Runner/Info.plist bằng khoá và giá trị chuỗi ở bên dưới thành bỏ qua bước kiểm tra GADApplicationIdentifier. Nếu bạn bỏ lỡ bước này, SDK quảng cáo trên thiết bị di động của Google có thể gửi GADInvalidInitializationException khi khởi động ứng dụng.

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

Đăng ký WebViewController

Để cải thiện khả năng kiếm tiền từ quảng cáo trong ứng dụng WebViewController sử dụng AdSense mã hoặc Nhà xuất bản của Google Thẻ, làm theo các bước được liệt kê bên dưới:

Bật JavaScript trong WebViewController. Nếu không, có thể quảng cáo không tải.
Để cải thiện trải nghiệm người dùng trải nghiệm quảng cáo và nhất quán với chính sách cookie, bật cookie của bên thứ ba trên thực thể AndroidWebViewController của bạn.
Đăng ký thực thể WebViewController bằng cách gọi phương thức registerWebView() do SDK quảng cáo trên thiết bị di động của Google cung cấp.

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);
  }
}

Tải URL

Giờ đây, bạn có thể tải URL và hiển thị nội dung trên web của mình thông qua WebViewController. Bạn nên tải URL thử nghiệm này: https://webview-api-for-ads-test.glitch.me/ để kiểm thử quá trình tích hợp trước khi bằng URL của riêng bạn. Trang web sẽ hiển thị lỗi nếu JavaScript không phải là JavaScript bật.

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 thử nghiệm hiển thị thanh trạng thái màu xanh lục cho biết tích hợp thành công nếu các điều kiện sau áp dụng:

WebView đã kết nối với SDK Quảng cáo của Google trên thiết bị di động
Đã bật JavaScript
Cookie của bên thứ ba hoạt động (không được hỗ trợ trên các thiết bị iOS)
Cookie của bên thứ nhất hoạt động

Xem mã nguồn của URL thử nghiệm. Sau đó, bạn có thể thay thế URL thử nghiệm bằng URL của mình. Bạn cũng có thể hãy sử dụng một công cụ proxy như Charles để chụp ảnh lưu lượng truy cập HTTPS của ứng dụng và kiểm tra các yêu cầu quảng cáo để biết thông số &scar=.