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

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

Với API WebView cho quảng cáo, bạn có thể kiếm tiền từ quảng cáo trong ứng dụng bằng cách sử dụng WebViewController. Nếu 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 bạn thông qua WebViewController, thì bạn nên sử dụng API này để bật tính năng kiếm tiền từ quảng cáo. Để tìm hiểu thêm, hãy xem Các chính sách của AdSense và Ad Manager.

Kiếm tiền bằng cách tạo 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 tạo các 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 ứng dụng dành 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 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, hãy sử dụng API WebView cho quảng cáo để đăng ký các đối tượng WebViewController bằng SDK quảng cáo trên thiết bị di động của Google. JavaScript trong mã AdSense hoặc Thẻ nhà xuất bản của Google sẽ tạo và gửi yêu cầu quảng cáo, vì vậy, bạn không cần thực hiện bất kỳ yêu cầu quảng cáo nào bằng SDK này. Xin lưu ý rằng hiện chỉ có các định dạng khoảng không quảng cáo web dành cho thiết bị di động và web dành cho máy tính khi sử dụ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 nên sử dụng API này để bảo vệ nhà quảng cáo khỏi nội dung không thích hợp và cải thiện khả năng kiếm tiền cho những 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ững việc sau:

Sử dụng SDK quảng cáo trên thiết bị di động của Google dành cho trình bổ trợ Flutter với 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.
Hãy thêm webview_flutter_android với phiên bản 3.7.0 trở lên trong ứng dụng của bạn.

Bỏ qua bước kiểm tra giá trị nhận dạng ứng dụng

Android

Thêm thẻ <meta-data> sau vào tệp AndroidManifest.xml để bỏ qua việc kiểm tra APPLICATION_ID. Nếu bạn bỏ lỡ bước này, SDK Quảng cáo của Google trên thiết bị di động có thể gửi một 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 giá trị chuỗi và khoá dưới đây để bỏ qua việc kiểm tra GADApplicationIdentifier. Nếu bạn bỏ lỡ bước này, SDK Quảng cáo của Google trên thiết bị di động có thể gửi một 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 trong WebViewController sử dụng mã AdSense hoặc Thẻ nhà xuất bản của Google, hãy làm theo các bước liệt kê bên dưới:

Bật JavaScript trong WebViewController. Nếu bạn không làm như vậy, quảng cáo có thể không tải.
Để cải thiện trải nghiệm quảng cáo của người dùng và để nhất quán với chính sách cookie của Chrome, hãy 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 này

Giờ đây, bạn có thể tải URL và hiển thị nội dung trên web 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 tra vấn đề tích hợp trước khi sử dụng URL của riêng mình. Trang web sẽ hiển thị lỗi nếu JavaScript không được 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 kiểm thử hiển thị các thanh trạng thái màu xanh lục để tích hợp thành công nếu các điều kiện sau áp dụng:

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

Hãy xem mã nguồn của URL kiểm tra của chúng tôi. Sau đó, bạn có thể thay thế URL thử nghiệm bằng URL của mình. Bạn cũng có thể sử dụng một công cụ proxy như Charles để ghi lại 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 cho một tham số &scar=.