Mengintegrasikan WebView API untuk Ads

WebView API untuk Iklan memungkinkan monetisasi iklan dalam aplikasi menggunakan WebViewController Jika Anda menampilkan konten web yang menerapkan iklan dengan Kode AdSense atau Tag Google Publisher di aplikasi Anda melalui WebViewController, Anda harus menggunakan API ini untuk mengaktifkan iklan monetisasi. Untuk mempelajari lebih lanjut, lihat AdSense dan kebijakan Ad Manager.

  1. Memonetisasi dengan membuat permintaan iklan menggunakan Google Mobile Ads SDK

    Anda dapat memonetisasi aplikasi Anda dengan membuat permintaan iklan untuk Ad Manager dengan Google Mobile Ads SDK dengan menerapkan format iklan untuk seluler aplikasi.

    Pelajari lebih lanjut.

  2. Memonetisasi menggunakan WebView API for Ads

    Jika aplikasi Anda menggunakan WebViewController untuk menampilkan konten web yang menayangkan iklan dari Ad Manager atau AdSense, gunakan WebView API untuk Google Ads untuk mendaftar WebViewController dengan Google Mobile Ads SDK. Tujuan JavaScript di kode AdSense atau Tag Google Publisher membuat dan mengirim permintaan iklan sehingga Anda tidak perlu membuat permintaan iklan dengan SDK. Perlu diingat bahwa hanya web seluler dan web desktop format inventaris yang tersedia menggunakan API ini.

    Jika bukan memiliki konten web di WebViewController, Anda masih disarankan untuk menggunakan API ini guna membantu melindungi pengiklan dari spam dan meningkatkan monetisasi untuk penerbit web yang menyediakan konten.

Perhatikan bahwa Anda dapat melakukan salah satu opsi, atau bahkan keduanya, di aplikasi yang sama.

Panduan ini dimaksudkan untuk membantu Anda mengintegrasikan WebView API untuk Iklan ke dalam aplikasi iOS.

Sebelum memulai

Sebelum mulai menggunakan WebView API untuk Iklan, pastikan Anda melakukan hal berikut:

Abaikan pemeriksaan ID aplikasi

Android

Tambahkan tag <meta-data> berikut di file AndroidManifest.xml Anda ke mengabaikan pemeriksaan untuk APPLICATION_ID. Jika Anda melewatkan langkah ini, Google Mobile Ads SDK mungkin menampilkan IllegalStateException saat aplikasi dimulai.

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

iOS

Perbarui file Runner/Info.plist dengan nilai kunci dan string di bawah untuk mengabaikan pemeriksaan untuk GADApplicationIdentifier. Jika Anda melewatkan langkah ini, Google Mobile Ads SDK mungkin menampilkan GADInvalidInitializationException saat aplikasi dimulai.

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

Mendaftarkan WebViewController

Untuk meningkatkan monetisasi iklan dalam aplikasi untuk iklan dalam WebViewController yang menggunakan AdSense code atau Google Publisher Tag, ikuti langkah-langkahnya yang tercantum di bawah ini:

  1. Aktifkan JavaScript di WebViewController. Kegagalan untuk melakukannya dapat menyebabkan sehingga iklan tidak dapat dimuat.

  2. Untuk meningkatkan iklan yang konsisten dan konsisten dengan kebijakan cookie, aktifkan cookie pihak ketiga pada instance AndroidWebViewController Anda.

  3. Daftarkan instance WebViewController dengan memanggil registerWebView() yang disediakan oleh 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);
  }
}

Memuat URL

Sekarang Anda dapat memuat URL dan menampilkan konten web Anda melalui WebViewController. Sebaiknya muat URL pengujian ini: https://webview-api-for-ads-test.glitch.me/ untuk menguji integrasi sebelum menggunakan URL Anda sendiri. Halaman web akan menampilkan error jika JavaScript tidak mengaktifkan pembuatan versi.

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 pengujian akan menampilkan status bar hijau untuk integrasi yang berhasil jika ketentuan berikut berlaku:

  • WebView terhubung ke Google Mobile Ads SDK
  • JavaScript diaktifkan
  • Cookie pihak ketiga berfungsi (tidak diharapkan di perangkat iOS)
  • Cookie pihak pertama berfungsi

Lihat kode sumber URL pengujian kita. Kemudian, Anda dapat mengganti URL pengujian dengan URL Anda. Anda juga dapat gunakan alat proxy seperti Charles untuk merekam traffic HTTPS aplikasi dan memeriksa permintaan iklan untuk parameter &scar=.