Integrar a API WebView para anúncios

A API WebView para anúncios permite a monetização de anúncios no aplicativo usando WebViewController Se você exibir conteúdo da Web que implementa anúncios com Código do AdSense ou Tag do editor do Google no seu app usando WebViewController, use essa API para ativar anúncios monetização. Para saber mais, consulte a políticas da AdMob.

  1. Gerar receita fazendo solicitações de anúncios com o SDK dos anúncios para dispositivos móveis do Google

    Você pode gerar receita com seu app fazendo solicitações de anúncios para a AdMob com a SDK dos anúncios para celular do Google implementando formatos de anúncios para celular app.

    Saiba mais.

  2. Gerar receita usando a API WebView para anúncios

    Caso seu app use WebViewController para mostrar conteúdo da Web que veicula anúncios de Ad Manager ou AdSense, use a API WebView para anúncios para fazer o registro WebViewController com o SDK dos anúncios para dispositivos móveis do Google. A JavaScript no código do AdSense ou a Tag do editor do Google cria e envia solicitações de anúncios para que você não precise fazer solicitações de anúncios com pelo SDK. Apenas a Web para dispositivos móveis e a Web para computadores formatos de inventário estão disponíveis usando essa API.

    Se você não for o proprietário do conteúdo da Web em um WebViewController, ainda será são incentivados a usar esta API para ajudar a proteger os anunciantes contra spam e melhorar a monetização para os editores da Web que forneceram o conteúdo.

É possível usar qualquer uma das opções ou ambas no mesmo app.

O objetivo deste guia é ajudar você a integrar a API WebView para anúncios ao seu App iOS.

Antes de começar

Antes de começar a usar a API WebView para anúncios, faça o seguinte:

Ignorar a verificação do identificador do aplicativo

Android

Adicione a seguinte tag <meta-data> no seu arquivo AndroidManifest.xml para ignorar a verificação do APPLICATION_ID. Se você pular essa etapa, o console do Google SDK de anúncios para dispositivos móveis pode gerar uma IllegalStateException na inicialização do app.

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

iOS

Atualize o arquivo Runner/Info.plist com a chave e o valor da string abaixo para ignorar a verificação de GADApplicationIdentifier. Se você pular essa etapa, o SDK dos anúncios para dispositivos móveis do Google pode gerar uma GADInvalidInitializationException na inicialização do app.

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

Registrar o WebViewController

Para melhorar a monetização de anúncios em um app WebViewController que usa o Google AdSense ou Editor do Google tags, siga as etapas. listadas abaixo:

  1. Ative o JavaScript no WebViewController. Não fazer isso pode causar que os anúncios não carreguem.

  2. Para melhorar do anúncio e ser consistente com a política de cookies, ativar cookies de terceiros na instância do AndroidWebViewController.

  3. Registre a instância WebViewController chamando registerWebView() fornecido pelo SDK dos anúncios para dispositivos móveis do 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);
  }
}

Carregar o URL

Agora você pode carregar um URL e exibir seu conteúdo da Web pelo WebViewController. Recomendamos que você carregue este URL de teste: https://webview-api-for-ads-test.glitch.me/ para testar a integração antes da usando seu próprio URL. A página da Web mostra um erro se o JavaScript não está ativado.

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

O URL de teste mostrará barras de status verdes para uma integração bem-sucedida se o as seguintes condições se aplicam:

  • WebView conectado ao SDK dos anúncios para dispositivos móveis do Google
  • JavaScript ativado
  • Cookies de terceiros funcionam (isso não é esperado em dispositivos iOS)
  • Cookies primários funcionam

Veja o código-fonte. do URL de teste. Em seguida, substitua o URL de teste pelo seu URL. Você também pode use uma ferramenta de proxy como Charles para capturar suas tráfego HTTPS do app e inspecionar as solicitações de anúncios para um parâmetro &scar=.