Как интегрировать WebView API for Ads

WebView API for Ads позволяет монетизировать приложения с помощью WebViewController. Если вы показываете в приложении веб-контент, в котором реализованы объявления с помощью кода AdSense или тега Google Publisher Tag, используя WebViewController, вам следует использовать этот API, чтобы включить монетизацию объявлений. Подробнее о правилах AdMob…

  1. Монетизируйте контент, отправляя запросы объявлений с помощью Google Mobile Ads Flutter Plugin

    Вы можете монетизировать приложение, отправляя запросы объявлений в AdMob с помощью Google Mobile Ads Flutter Plugin и форматов объявлений для мобильных приложений.

    Подробнее…

  2. Монетизация с помощью WebView API for Ads

    Если в вашем приложении используется WebViewController для показа веб-контента, в котором размещаются объявления из Менеджера рекламы или AdSense, зарегистрируйте объекты WebViewController в Google Mobile Ads Flutter Plugin с помощью WebView API for Ads. Скрипт JavaScript в коде AdSense или теге Google Publisher Tag создает и отправляет запросы объявлений, поэтому вам не нужно делать это с помощью SDK. Обратите внимание, что с помощью этого API можно работать только с форматами инвентаря для мобильных и обычных сайтов.

    Если вы не являетесь владельцем веб-контента в WebViewController, мы все равно рекомендуем использовать этот API, чтобы защитить рекламодателей от спама и повысить доход от рекламы для издателей, предоставивших контент.

Обратите внимание, что в одном приложении можно использовать оба варианта.

Это руководство поможет вам интегрировать WebView API for Ads в приложение для iOS.

Подготовка

Прежде чем начать использовать WebView API for Ads, сделайте следующее:

Пропускать проверку идентификатора приложения

Android

Чтобы пропустить проверку на наличие файла APPLICATION_ID, добавьте в файл AndroidManifest.xml следующий тег <meta-data>: Если вы пропустите этот шаг, при запуске приложения Google Mobile Ads Flutter Plugin может выдать ошибку 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

Чтобы пропустить проверку GADApplicationIdentifier, добавьте в файл Runner/Info.plist ключ и строковое значение, указанные ниже. Если вы пропустите этот шаг, при запуске приложения Google Mobile Ads Flutter Plugin может выдать ошибку GADInvalidInitializationException.

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

Зарегистрируйте WebViewController

Чтобы повысить эффективность монетизации объявлений в приложенииWebViewController, в котором используется код AdSense или теги Google Publisher, выполните следующие действия:

  1. Включите JavaScript в WebViewController. В противном случае реклама может не загружаться.

  2. Чтобы улучшить качество рекламы для пользователей и соблюдать правила использования файлов cookie в Chrome, включите сторонние файлы cookie в экземпляре AndroidWebViewController.

  3. Зарегистрируйте экземпляр WebViewController, вызвав метод registerWebView(), предоставленный Google Mobile Ads Flutter Plugin.

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://google.github.io/webview-ads/test/, чтобы проверить интеграцию, прежде чем использовать собственный 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://google.github.io/webview-ads/test/'));
  }

Если интеграция прошла успешно, рядом с тестовым URL показываются зеленые полосы статуса. Это происходит при следующих условиях:

  • WebView подключено к Google Mobile Ads Flutter Plugin
  • Поддержка JavaScript включена
  • Сторонние файлы cookie работают (не ожидается на устройствах iOS)
  • Как работают собственные файлы cookie

Посмотреть исходный код тестового URL. После этого вы сможете заменить тестовый URL своим. Вы также можете использовать прокси-сервер, например Charles, чтобы перехватывать HTTPS-трафик приложения и проверять запросы объявлений на наличие параметра &scar=.