Intégration AdMob

1Créer un compte AdMob#

Créez un compte Google AdMob. Vous aurez besoin d'un compte Google pour commencer. AdMob est la plateforme de publicité mobile de Google.

Aller sur AdMob →

2Ajouter votre application#

Dans le tableau de bord AdMob :

• Cliquez sur « Apps » dans la barre latérale
• Cliquez sur « Add App »
• Sélectionnez « No » pour « Is your app listed on a supported app store? »
• Saisissez le nom de votre application
• Sélectionnez « Android » comme plateforme
• Cliquez sur « Add »

3Obtenir l'App ID#

Après avoir créé votre application :

• Copiez l'App ID affiché (format : ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX)
• Ce n'est pas la même chose que votre Ad Unit ID
• Vous l'utiliserez dans AndroidManifest.xml

App ID format:
ca-app-pub-1234567890123456~1234567890

4Créer une Ad Unit (bannière)#

Dans votre application AdMob :

• Cliquez sur l'onglet « Ad units »
• Cliquez sur « Add ad unit »
• Sélectionnez « Banner »
• Saisissez le nom de l'ad unit (par exemple : « Main Banner »)
• Cliquez sur « Create ad unit »
• Copiez l'Ad Unit ID

Banner Ad Unit ID format:
ca-app-pub-1234567890123456/1234567890

5Configuration dans AppMint#

Dans AppMint, étape 3 :

1. Activez « AdMob Ads » et collez votre AdMob App ID (celui avec ~)
2. Ad Control : gardez « Automatic » - l'application place les publicités pour vous
3. Activez « Banner Ad », choisissez la position (en bas ou en haut) et collez votre Banner Ad Unit ID (celui avec /)
4. Poursuivez avec les autres paramètres et générez votre application

Ad Unit ID (not App ID):
ca-app-pub-XXXXXXXXXXXXXXXX/YYYYYYYYYY

6Tester les publicités dans votre application#

Pendant le développement, utilisez les identifiants de test officiels de Google pour éviter toute infraction aux règles. Copiez-collez-les dans le générateur :

📋 AdMob App ID :
ca-app-pub-3940256099942544~3347511713

📋 Banner Ad Unit ID :
ca-app-pub-3940256099942544/6300978111

📋 Interstitial Ad Unit ID :
ca-app-pub-3940256099942544/1033173712

📋 Rewarded Ad Unit ID :
ca-app-pub-3940256099942544/5224354917

📋 Publisher ID :
pub-3940256099942544

📋 Site web du développeur :
https://example.com

Ces identifiants de test affichent des publicités réalistes sans générer de revenus ni enfreindre les règles. Remplacez-les par vos vrais identifiants pour la production.

Test IDs for Generator:

AdMob App ID:       ca-app-pub-3940256099942544~3347511713
Banner Ad ID:       ca-app-pub-3940256099942544/6300978111
Interstitial ID:    ca-app-pub-3940256099942544/1033173712
Rewarded Ad ID:     ca-app-pub-3940256099942544/5224354917
Publisher ID:       pub-3940256099942544
Developer URL:      https://example.com

7Publicités interstitielles#

Les publicités interstitielles sont des publicités plein écran qui couvrent toute l'interface de l'application. Les utilisateurs peuvent les fermer pour revenir à l'application.

📺 Comment l'activer (étape 3, Ad Control « Automatic ») :

1. Activez « Full Screen Ad »
2. Ad Type : choisissez « Interstitial Ad »
3. Saisissez votre Interstitial Ad Unit ID (ou laissez vide pour des publicités de test)
4. Choisissez le mode de déclenchement :

🔄 Après navigations (par défaut) :
la publicité s'affiche après chaque série de N navigations de page. Par exemple, avec 4, elle apparaît au 4e, 8e, 12e chargement de page, et ainsi de suite.

📱 À l'ouverture de l'application :
la publicité s'affiche une fois, juste après l'écran de démarrage, à la première ouverture de l'application.

👆 À la demande :
aucune publicité automatique - votre page en affiche une au toucher avec WebToApk.showInterstitialAd().

⚠️ Le type de publicité est un choix unique : interstitielle OU avec récompense, pas les deux.

Example: every 4 page navigations

Page 1 → No ad
Page 2 → No ad
Page 3 → No ad
Page 4 → 📺 Interstitial Ad shown!
Page 5 → No ad
Page 6 → No ad
Page 7 → No ad
Page 8 → 📺 Interstitial Ad shown!
...

8Publicités avec récompense#

Les publicités avec récompense sont des vidéos plein écran que les utilisateurs regardent en échange d'une récompense. Elles rapportent plus que les bannières ou les publicités interstitielles.

🎁 Comment l'activer (étape 3, Ad Control « Automatic ») :

1. Activez « Full Screen Ad »
2. Ad Type : choisissez « Rewarded Ad »
3. Saisissez votre Rewarded Ad Unit ID (ou laissez vide pour des publicités de test)
4. Choisissez le mode de déclenchement :

🔄 Après navigations (par défaut) :
comme pour l'interstitielle, la publicité s'affiche après chaque série de N chargements de page. « Show ad after every N page navigations » définit N. La valeur par défaut est 4.

📱 À l'ouverture de l'application :
la vidéo avec récompense s'affiche une fois, à la première ouverture de l'application après l'écran de démarrage.

👆 À la demande :
aucune publicité automatique - le bouton « regarder une publicité pour gagner » de votre page appelle WebToApk.showRewardedAd().

💡 Combien de navigations ?
Moins = plus de publicités (plus de revenus mais une moins bonne expérience). Plus = moins de publicités (meilleure expérience mais moins de revenus). Recommandé : 3 à 5.

⚠️ Règle de Google : les publicités avec récompense nécessitent l'accord de l'utilisateur. Dans les modes After Navigations et App Open, votre application affiche d'abord une invite « Regarder une publicité ? » avec un bouton « Non merci » ; la publicité ne se lance que s'il accepte.

Revenue comparison (approximate):

Banner Ads:       $0.10 - $0.50 per 1000 views
Interstitial Ads: $1 - $5 per 1000 views
Rewarded Ads:     $5 - $15 per 1000 views

Recommended N (page navigations per ad):
Aggressive:  2-3 (more ads, more revenue)
Balanced:    4-5 (recommended)
Conservative: 6-10 (fewer ads, better UX)

9Consentement et politique de confidentialité (obligatoires)#

⚠️ AdMob exige un mécanisme de consentement pour les utilisateurs de l'EEE, du Royaume-Uni, de la Suisse et des États américains concernés.

Cela est géré automatiquement par l'application générée grâce à la User Messaging Platform (UMP) de Google. L'application va :

• Afficher une boîte de dialogue de consentement aux utilisateurs de l'EEE/Royaume-Uni/Suisse avant d'afficher des publicités
• Afficher une boîte de dialogue de refus aux utilisateurs des États américains concernés
• Ne demandez des publicités qu'après avoir obtenu le consentement

Ce que VOUS devez faire :

1. Dans la console AdMob → Privacy & messaging → Create a European regulations message
2. Dans la console AdMob → Privacy & messaging → Create a US state regulations message
3. Indiquez l'URL de votre politique de confidentialité dans le générateur (étape 3 ou étape 4)
4. Assurez-vous que votre politique de confidentialité mentionne la publicité AdMob

⚠️ Sans cette configuration, AdMob peut afficher un avertissement de règlement : « Consent requirement: No CMP »

Ouvrir AdMob Privacy & messaging →

10Processus de vérification des publicités#

Après la publication de votre application :

• AdMob examinera votre application (généralement 24 à 48 heures)
• Au début, vous verrez des publicités de test
• Une fois approuvée, de vraies publicités commenceront à s'afficher
• Gardez le contenu de votre application conforme aux règles

11Activer les paiements#

Pour recevoir les revenus publicitaires :

• Allez dans « Payments » dans le tableau de bord AdMob
• Ajoutez un moyen de paiement (compte bancaire ou autres options)
• Vérifiez votre adresse
• Renseignez vos informations fiscales
• Les paiements sont versés chaque mois une fois le seuil de 100 $ atteint

12Bonnes pratiques#

✅ Emplacement de la bannière : une bannière en bas est moins intrusive et offre une meilleure expérience utilisateur

✅ Interstitielle/avec récompense : choisissez l'une ou l'autre, pas les deux. Les publicités avec récompense rapportent plus mais demandent l'engagement de l'utilisateur

✅ Nombre d'actions : commencez avec 4 à 5 navigations entre les publicités. Trop fréquent = mauvaises évaluations

✅ Testez d'abord : testez toujours avec des ad units de test pendant le développement

✅ Suivez les performances : consultez régulièrement le tableau de bord AdMob pour les revenus et les statistiques

⚠️ Ne cliquez pas : ne cliquez jamais sur vos propres publicités - c'est contraire aux règles d'AdMob

⚠️ Contenu de qualité : assurez-vous que votre application apporte de la valeur et respecte les règles d'AdMob

💡 Astuce de pro : combinez une bannière (toujours visible) + une interstitielle ou une publicité avec récompense (périodique) pour maximiser les revenus

13Dépannage#

Problèmes fréquents et solutions :

• Aucune publicité affichée : vérifiez que vous utilisez le bon Ad Unit ID (et non l'App ID)
• Les publicités de test fonctionnent mais pas les vraies : attendez la fin de la vérification par AdMob
• Échec de la demande de publicité : vérifiez la connexion internet et l'état de votre compte AdMob
• Compte suspendu : consultez les règles d'AdMob et faites appel si nécessaire

Centre d'aide AdMob →

14Publicités contrôlées par le développeur : placez chaque publicité vous-même#

Téléchargez la page de démonstration complète ci-dessous (Coin Runner) : une bannière intégrée à la mise en page, une interstitielle entre les niveaux, un bouton « Regarder une publicité pour gagner 50 pièces », un rectangle 300×250, l'interrupteur app-open et un journal en direct de chaque résultat. Compressez-la en ZIP, importez-la comme ZIP hors ligne, choisissez Developer-controlled avec les identifiants de test préremplis, compilez - chaque bouton s'explique de lui-même.

Les options ci-dessus correspondent au mode automatique : l'application affiche pour vous la bannière et la publicité plein écran ou avec récompense. Si vous voulez tous les formats AdMob et la liberté de placer chacun exactement où votre page le demande, choisissez plutôt « Ad Control → Developer-controlled » à l'étape 3.

Dans ce mode, RIEN n'est automatique. Saisissez un ad unit ID pour chaque format que vous utilisez - bannière, rectangle moyen (300×250), interstitielle, avec récompense, interstitielle avec récompense, app-open - et laissez le reste vide. Votre page pilote ensuite tout via window.AppMintAds :

• AppMintAds.banner.attach('#slot', {size:'banner'|'medium_rectangle'}) - une bannière placée sur l'élément que vous nommez, dans une carte, entre des éléments de liste, n'importe où. Elle suit l'élément au défilement ; detach() la retire. Jusqu'à deux à la fois.
• await AppMintAds.load('interstitial') → {ok:true} ou {ok:false, code:'no_fill'|'network'|'invalid_unit'|'consent'|'ad_free'|'disabled'}
• await AppMintAds.show('rewarded') → {shown:true, earned:true, reward:{type,amount}} ou {shown:false, reason}
• AppMintAds.isReady('interstitial') - activez votre bouton à partir de cette valeur
• AppMintAds.appOpen.setEnabled(false) - mettez en pause la publicité app-open pendant que l'utilisateur est en pleine tâche

AppMintAds n'existe que dans l'application installée - détectez toujours la fonctionnalité (if (window.AppMintAds) …) pour que la page continue de fonctionner dans un navigateur. Les règles de Google s'appliquent toujours et l'application les fait respecter : une publicité avec récompense ne se lance que sur un toucher de l'utilisateur (votre bouton « Regarder une publicité » EST son consentement), les interstitielles respectent un intervalle de 60 secondes, et ne placez jamais une publicité par-dessus une action essentielle.

// Feature-detect: AppMintAds exists only in the installed app
const ads = window.AppMintAds;

// 1. A banner INSIDE your layout — <div id="ad-slot"></div> reserves the space
if (ads) {
  const r = await ads.banner.attach('#ad-slot', { size: 'banner' });
  console.log(r.ok ? 'banner ' + r.width + 'x' + r.height : 'no banner: ' + r.code);
}

// 2. A full-page ad at a natural break (between levels), never on every tap
async function levelFinished() {
  if (ads && ads.isReady('interstitial')) await ads.show('interstitial');
  showNextLevel();          // continues whether or not an ad was shown
}

// 3. A 'Watch ad to earn 50 coins' button — the tap is the user's opt-in
watchBtn.onclick = async () => {
  if (!ads) return;                                 // browser: no native ads
  // From a tap the ad plays. Without one (a timer, a route change) the app shows
  // AdMob's "Watch an ad? / No thanks" intro first and answers code 'declined'.
  const r = await ads.show('rewarded');
  if (r.earned) addCoins(r.reward.amount || 50);   // grant ONLY when earned
  else if (r.reason === 'ad_free') addCoins(50);    // premium user: grant without an ad
  else toast('No ad available right now');          // no popup, no Skip button
};

// 4. Preload and keep the button honest
ads?.load('rewarded').then(r => { watchBtn.disabled = !r.ok; });

15Événements d'état des publicités : sachez ce qui s'est passé pour chaque demande#

Chaque publicité contrôlée par le développeur rapporte tout son cycle de vie sur UN seul événement, appmint:ad, ce qui vous permet d'enregistrer les remplissages, de réagir aux échecs et de piloter votre propre interface :

{ type, phase, slot?, code?, adCode?, message?, width?, height?, reward?, earned? }

• type : banner | mrec | interstitial | rewarded | rewarded_interstitial | app_open
• phase : loading → loaded | failed → opened → impression → clicked → closed, plus rewarded (une récompense a été obtenue) et show_failed
• code (en cas d'échec) : no_fill | network | invalid_unit | internal - adCode est le numéro propre à AdMob, message son texte
• slot : quel emplacement de bannière, pour banner/mrec

Les promesses (promises) donnent la même réponse à chaque appel ; l'événement donne tout, y compris les publicités pour lesquelles vous n'avez pas appelé show() (une publicité app-open, l'actualisation d'une bannière). En mode automatique, AppMintAds existe toujours mais répond avec le code « automatic_mode » - utilisez plutôt les appels WebToApk.showInterstitialAd()/showRewardedAd() et les événements appmint:reward / appmint:ad-closed / appmint:ad-unavailable.

window.addEventListener('appmint:ad', e => {
  const a = e.detail;
  console.log(a.type, a.phase, a.code || '', a.message || '');
  if (a.phase === 'failed' && a.code === 'no_fill') analytics.track('ad_no_fill', a);
  if (a.type === 'rewarded' && a.phase === 'rewarded') console.log('earned', a.reward);
  if (a.type === 'banner' && a.phase === 'loaded') console.log('banner ' + a.width + 'x' + a.height + ' in ' + a.slot);
});

// What can this build serve? (guard it — in a browser AppMintAds is undefined)
if (window.AppMintAds) console.log(AppMintAds.config());
// → { control: 'developer', formats: { banner: true, mrec: false, interstitial: true, ... } }