Premiers pas

Vue d’ensemble

Plugin de la communauté Capacitor pour AdMob natif. Il encapsule le SDK Google Mobile Ads pour iOS et Android afin d’afficher des bannières, des annonces interstitielles, récompensées, interstitielles récompensées et à l’ouverture dans les applications Capacitor. Il prend également en charge le consentement Google User Messaging Platform (UMP) et les utilitaires App Tracking Transparency sur iOS.

Installation

Ce plugin inclut déjà le SDK Google Mobile Ads. Installez le package, puis ajoutez votre identifiant d’application AdMob dans AndroidManifest / Info.plist. Les guides de démarrage Google pour Android et iOS expliquent les identifiants d’application et les identifiants SKAdNetwork (identifiants de conversion publicitaire d’Apple) ; n’ajoutez pas une seconde dépendance Mobile Ads.

Ce plugin vise @capacitor-community/admob v8 et Capacitor 8. Il prend en charge iOS 15 ou une version ultérieure et Android API 24 ou une version ultérieure.

npm install @capacitor-community/admob
npx cap sync

Si vous utilisez encore Capacitor 7, installez @capacitor-community/admob@7.

Versions du SDK Google Mobile Ads

Cette version majeure fixe le SDK Google Mobile Ads à 25.4.x sur Android et 13.6.0 sur iOS (Swift Package Manager et CocoaPods). Conservez ces versions sauf besoin particulier. Le SDK Next-Gen pour Android de Google attendra la prochaine version majeure du plugin. Consultez Migration pour connaître la politique de fixation des versions.

Configuration Android

Dans android/app/src/main/AndroidManifest.xml, ajoutez ceci sous <application> :

<meta-data
  android:name="com.google.android.gms.ads.APPLICATION_ID"
  android:value="@string/admob_app_id" />

Dans android/app/src/main/res/values/strings.xml :

<string name="admob_app_id">[APP_ID]</string>

Remplacez [APP_ID] par votre identifiant d’application AdMob, pas par un identifiant de bloc d’annonces.

Variables

Vous pouvez laisser ces valeurs non définies. Redéfinissez-les dans le fichier variables.gradle de votre application uniquement si vous avez besoin d’une version particulière d’un artefact :

Configuration iOS

Ajoutez ce qui suit dans le <dict> le plus externe de ios/App/App/Info.plist :

<key>GADIsAdManagerApp</key>
<true/>
<key>GADApplicationIdentifier</key>
<string>[APP_ID]</string>
<key>SKAdNetworkItems</key>
<array>
  <dict>
    <key>SKAdNetworkIdentifier</key>
    <string>cstr6suwn9.skadnetwork</string>
  </dict>
</array>
<key>NSUserTrackingUsageDescription</key>
<string>This identifier will be used to deliver personalized ads to you.</string>

Remplacez [APP_ID] par votre identifiant d’application AdMob et décrivez votre utilisation réelle du suivi dans NSUserTrackingUsageDescription.

L’extrait SKAdNetworkItems inclut l’identifiant de Google. Ajoutez les autres identifiants du guide de configuration iOS de Google.

Dépannage

Si CocoaPods ne parvient pas à résoudre Google-Mobile-Ads-SDK :

[error] Error running update: Analyzing dependencies
[!] CocoaPods could not find compatible versions for pod "Google-Mobile-Ads-SDK":

Exécutez pod repo update dans ios/, puis de nouveau npx cap sync ios.

Première bannière de test

Après l’installation et la configuration des plateformes, initialisez le SDK, demandez le consentement et affichez une bannière de démonstration Google. Utilisez les identifiants de bannière propres aux plateformes présentés dans Tests — ne créez pas votre propre bloc d’annonces pour cette première vérification.

Appelez startAdMob depuis une action utilisateur ou après que l’interface est prête (par exemple un bouton ou un hook après navigation), pas uniquement lors de l’évaluation du module.

import { Capacitor } from '@capacitor/core';
import { AdMob, AdmobConsentStatus, BannerAdOptions, BannerAdSize, BannerAdPosition } from '@capacitor-community/admob';

const bannerAdId =
  Capacitor.getPlatform() === 'ios'
    ? 'ca-app-pub-3940256099942544/2934735716'
    : 'ca-app-pub-3940256099942544/6300978111';

async function startAdMob() {
  await AdMob.initialize();

  let consentInfo = await AdMob.requestConsentInfo();
  if (consentInfo.isConsentFormAvailable && consentInfo.status === AdmobConsentStatus.REQUIRED) {
    consentInfo = await AdMob.showConsentForm();
  }

  if (!consentInfo.canRequestAds) {
    // Consentement non prêt — aucune bannière n’est affichée.
    return;
  }

  const options: BannerAdOptions = {
    adId: bannerAdId,
    adSize: BannerAdSize.ADAPTIVE_BANNER,
    position: BannerAdPosition.BOTTOM_CENTER,
    margin: 0,
  };
  await AdMob.showBanner(options);
}

Résultat attendu : lorsque canRequestAds vaut true, une bannière de test Google apparaît en bas de l’écran natif. Lorsque canRequestAds vaut false, la fonction se termine sans afficher de bannière. Celle-ci se place au-dessus de la WebView et peut masquer du HTML — consultez Bannières pour réserver l’espace dans votre disposition. Détails : Configuration, Consentement et Tests.

Choisir selon l’objectif publicitaire

Documentation

Commencez par Installation ci-dessus, puis Configuration et Consentement. Exécutez la première bannière de test, puis utilisez Tests pour les blocs de démonstration et les appareils. Choisissez un format d’annonce dans le tableau ci-dessus. Ces guides figurent aussi sur le site de documentation (en anglais et en japonais). Si vous consultez ce README sur npm, utilisez ce site pour les guides — les fichiers docs/ se trouvent dans le dépôt GitHub. Les signatures des méthodes figurent dans la section API ci-dessous.

• Configuration — AdMob.initialize et options du SDK.
• Consentement — consentement relatif à la confidentialité et autorisation de suivi iOS.
• Tests — blocs d’annonces de démonstration, appareils de test et tests de consentement.
• Bannières — options, cycle de vie et événements des bannières.
• Annonces plein écran :
  • Annonces interstitielles — chargement, affichage et préparation de plusieurs annonces.
  • Annonces récompensées — vidéo récompensée, interstitielle récompensée et vérification côté serveur.
• Annonces à l’ouverture — chargement et présentation lors du passage au premier plan.
• Événements publicitaires — événements de cycle de vie communs, erreurs et données de revenus.
• Guide de migration — historique des changements lors d’une mise à niveau depuis une ancienne version du plugin.