Intégrer l'API WebView pour les annonces

L'API WebView pour les annonces permet la monétisation des annonces dans les applications à l'aide de WebViewController Si vous affichez du contenu Web incluant des annonces Code AdSense ou Tag Google Publisher Tag dans votre application via WebViewController, utilisez cette API pour activer les annonces la monétisation. Pour en savoir plus, consultez les AdSense et celles d'Ad Manager.

  1. Monétisez vos annonces en envoyant des demandes d'annonces avec le SDK Google Mobile Ads

    Vous pouvez monétiser votre application en envoyant des demandes d'annonces à d'Ad Manager avec SDK Google Mobile Ads en implémentant des formats d'annonces pour mobile l'application.

    En savoir plus

  2. Monétiser à l'aide de l'API WebView pour les annonces

    Si votre application utilise WebViewController pour afficher du contenu Web diffusant des annonces depuis Ad Manager ou AdSense, utilisez l'API WebView pour vous inscrire à Ads des objets WebViewController avec le SDK Google Mobile Ads. La JavaScript dans le code AdSense ou Google Publisher Tag crée et envoie des demandes d'annonces, de sorte que vous n'avez pas à en envoyer le SDK. N'oubliez pas que seuls les sites Web pour mobile et pour ordinateur formats d'inventaire sont disponibles via cette API.

    Si vous n'êtes pas propriétaire du contenu Web d'une WebViewController, vous restez à utiliser cette API pour protéger les annonceurs contre le spam et améliorer la monétisation pour les éditeurs Web qui ont fourni le contenu.

Notez que vous pouvez utiliser l'une ou l'autre de ces options, ou les deux, dans la même application.

L'objectif de ce guide est de vous aider à intégrer l'API WebView pour les annonces dans votre l'application iOS.

Avant de commencer

Avant de commencer à utiliser l'API WebView pour les annonces, procédez comme suit:

Contourner la vérification de l'identifiant de l'application

Android

Ajoutez la balise <meta-data> suivante dans votre fichier AndroidManifest.xml pour ignorer la vérification de APPLICATION_ID. Si vous ratez cette étape, Le SDK Mobile Ads peut générer une IllegalStateException au démarrage de l'application.

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

iOS

Remplacez la clé et la valeur de chaîne ci-dessous dans le fichier Runner/Info.plist par contourner une vérification pour GADApplicationIdentifier. Si vous ratez cette étape, le SDK Google Mobile Ads peut générer une exception GADInvalidInitializationException au démarrage de l'application.

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

Enregistrer WebViewController

Pour améliorer la monétisation des annonces intégrées à une application WebViewController qui utilise AdSense code ou Google Publisher Tags, suivez les étapes listées ci-dessous:

  1. Activez JavaScript dans WebViewController. Dans le cas contraire, ne se chargent pas.

  2. Pour améliorer les performances expérience publicitaire et être cohérent avec règles relatives aux cookies, activez des cookies tiers sur votre instance AndroidWebViewController.

  3. Enregistrez l'instance WebViewController en appelant la méthode registerWebView() fournie par le SDK Google Mobile Ads.

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

Charger l'URL

Vous pouvez désormais charger une URL et afficher votre contenu Web via WebViewController. Nous vous recommandons de charger cette URL de test: https://webview-api-for-ads-test.glitch.me/ pour tester l'intégration avant en utilisant votre propre URL. La page Web affichera une erreur si JavaScript n'est pas est activé.

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

L'URL de test affiche des barres d'état vertes pour indiquer que l'intégration a réussi si le les conditions suivantes s'appliquent:

  • WebView connecté au SDK Google Mobile Ads
  • JavaScript activé
  • Les cookies tiers fonctionnent (non attendu sur les appareils iOS)
  • Les cookies propriétaires fonctionnent

Afficher le code source de notre URL de test. Vous pouvez alors remplacer l'URL de test par votre URL. Vous pouvez également utilisez un outil de proxy tel que Charles pour capturer le trafic HTTPS de votre application et examiner les demandes d'annonces pour détecter un paramètre &scar=.