Implémenter AdMob dans les applications de condensateur Ionic React

Dans ce post, vous apprendrez comment mettre en œuvre Fonctionnalité AdMob, c’est-à-dire des publicités Google, dans les applications Ionic React Capacitor. Nous allons implémenter cela dans une application Ionic simple et tester sur le simulateur iOS et l’appareil Android.

Comme nous le savons tous, les publicités sont la principale source de revenus pour tous les géants de la technologie comme Google, Facebook, Twitter, etc. Les annonces Google sont l’une des annonces les plus populaires, et la version mobile des annonces Google est ce qu’elles appellent AdMob.

Type d’annonces AdMob

Bannière: Un format d’annonce de base qui apparaît en haut et en bas de l’écran de l’appareil.

Interstitiel: Les annonces pleine page apparaissent à des pauses et des transitions naturelles, telles que l’achèvement du niveau. Prend en charge le contenu vidéo.

Récompensé: Les annonces pleine page récompensent les utilisateurs qui regardent de courtes vidéos et interagissent avec des publicités et des sondages jouables. Bon pour monétiser les utilisateurs free-to-play. Prend en charge le contenu vidéo.

Originaire de: Format d’annonce personnalisable qui correspond à l’apparence de votre application. Les annonces apparaissent en ligne avec le contenu de l’application. Prend en charge le contenu vidéo. Pour l’instant, les publicités natives ne sont possibles que dans les applications natives, pas dans les applications hybrides comme celles basées sur Ionic ou React Native.

Examinons les cadres sous-jacents pour ce poste. Si vous connaissez Ionic et Capacitor, ignorez ces sections et accédez au segment de code de la publication.

Étant donné que ce message est un mélange de trois cadres, il est possible que vous ayez atterri ici par erreur. Si vous recherchez une connexion AdMob dans

• React Native – Veuillez cocher ce post
• Applications Ionic React (Condensateur) – Continuer la lecture 😎

Comme vous pouvez le voir ci-dessus, il existe plusieurs options disponibles pour le développement d’applications hybrides de nos jours, et il est facile de se confondre entre elles. Ce poste est axé sur Cadre ionique avec Réagir comme cadre frontal, et Condensateur comme environnement d’exécution et de construction.

Voyons une brève introduction à chacun des cadres inclus:

1. Ionique
2. Condensateur

Vous connaissez probablement déjà Ionic, mais je le mets ici juste pour le plaisir des débutants. Ionique est un SDK de développement d’applications mobiles hybrides. Il fournit des outils et des services pour développer des applications mobiles hybrides à l’aide de technologies Web telles que CSS, HTML5 et Sass. En d’autres termes – Si vous créez des applications natives dans Android, vous codez en Java. Si vous créez des applications natives dans iOS, vous codez en Obj-C ou Swift. Ces deux langues sont puissantes mais complexes. Avec Cordova (et Ionic), vous pouvez écrire un seul morceau de code pour votre application qui peut fonctionner sur iOS et Android (et windows!), cela aussi avec la simplicité de HTML, CSS et JS.

Il est important de noter la contribution de Cordova / Condensateur à cet égard. Ionic n’est qu’un wrapper d’interface utilisateur composé de HTML, CSS et JS. Ainsi, par défaut, Ionic ne peut pas s’exécuter en tant qu’application sur un appareil iOS ou Android. Cordova / Capacitor est l’environnement de construction qui conteneurise (en quelque sorte) cette application Web Ionic et la convertit en une application installable sur l’appareil, tout en fournissant à cette application un accès à des API natives comme Camera, etc.

Cette section ne concerne que ceux qui travaillent avec Ionic / Cordova depuis un certain temps. Cordova est le seul choix disponible pour les développeurs d’applications Ionic depuis un certain temps. Cordova aide à construire une application web Ionic dans une application installable sur l’appareil.

Voici les différences entre Cordova et Condensateur (vous ne les apprécierez que si vous avez utilisé Cordova plus tôt, sinon vous pouvez simplement sauter)

1. Le condensateur considère chaque projet de plate-forme comme un actif source au lieu d’un construire des actifs de temps. Cela signifie que Capacitor veut que vous conserviez le code source de la plateforme dans le référentiel, contrairement à Cordova qui suppose toujours que vous générerez le code de la plateforme au moment de la construction
2. En raison de ce qui précède, le condensateur n’utilise pas config.xml ou une configuration personnalisée similaire pour les paramètres de plate-forme. Au lieu de cela, les modifications de configuration sont apportées en modifiant AndroidManifest.xml pour Android et Info.plist pour Xcode
3. Le condensateur ne «s’exécute pas sur l’appareil» ni n’émule via la ligne de commande. Au lieu de cela, ces opérations se produisent via l’IDE spécifique à la plate-forme. Vous ne pouvez donc pas exécuter une application à condensateur ionique à l’aide d’une commande comme ionic run ios . Vous devrez exécuter des applications iOS à l’aide de Xcode et des applications Android à l’aide d’Android Studio
4. Étant donné que le code de plate-forme n’est pas un actif source, vous pouvez directement modifier le code natif à l’aide de Xcode ou d’Android Studio. Cela donne plus de flexibilité aux développeurs

En substance, le condensateur est comme une version fraîche et plus flexible de Cordova.

Cordova et Native ionique les plugins peuvent être utilisés dans l’environnement Capacitor. Cependant, certains plugins Cordova sont connus pour être incompatible avec Condensateur. Pour la fonctionnalité Admob, nous utiliserons le Plugin Capacitor Admob

Nous allons procéder étape par étape pour explorer la mise en œuvre de la fonctionnalité AdMob. Ceci est ma décomposition du blog

PAS

1. Créer une application de condensateur ionique de base avec React
2. Construisez l’application dans Android avec Condensateur
3. Configurez votre compte AdMob
4. Configurer le plug-in AdMob
5. Mettez en œuvre différents types d’annonces dans votre application
6. Construisez l’application sur le simulateur iOS et testez
7. Créez l’application sur un appareil Android et testez

Alors plongeons dedans!

Créez une application de base à partir des démarreurs ioniques.

$ ionic start ionic-react-admob tabs --type=react

Cela créera une application Ionic de base dans React. j’ai choisi tabs démarreur afin que je puisse utiliser différents onglets pour différents types d’annonces.

Nous allons créer une interface utilisateur simple avec quelques boutons qui déclenchera des annonces. Pour les publicités interstitielles, ces déclencheurs sont généralement l’achèvement d’un niveau dans une application de jeu, etc. Les bannières publicitaires sont généralement déclenchées au chargement de la page elle-même. Les annonces de récompense sont affichées où l’utilisateur peut gagner une récompense en regardant les annonces.

Mon interface utilisateur de base pour les pages d’annonces ressemble à ceci

Pour créer les applications pour l’appareil / l’émulateur, nous devons attacher un condensateur à l’application. Courir

$ ionic integrations enable capacitor

Par défaut, si vous exécutez la commande ci-dessus, il installera Capacitor 2.0. Les applications construites avec Capacitor 2.0 nécessiteront le dernier Android Studio et le dernier Xcode. Si vous en avez, parfait! Mais si vous ne le faites pas, respectez Capacitor 1.x pour le didacticiel et vous pourrez mettre à jour plus tard. j’ai utilisé “@capacitor/core”: “1.2.0”, et “@capacitor/cli”: “1.2.0” pour ce poste.

Ajouter des plates-formes et créer l’application dans l’appareil en tant que test

// Add android platform
$ npx cap add android
// Add iOS platform
$ npx cap add ios
// Build web assets to copy to platforms
$ ionic build
// copy the build assets to platforms
$ npx cap copy
// open android studio to build app
$ npx cap open android
// open xcode to build app
$ npx cap open ios

À ce stade, vous pouvez exécuter l’application sur un appareil iOS / Android ou un simulateur à l’aide de Xcode / Android Studio. Vous verrez l’interface utilisateur fonctionner correctement sur l’appareil.

Cette étape est courante pour toute application. Étant donné qu’Admob est un service Google, indépendant de la plate-forme d’application, vous pouvez avoir un compte et l’utiliser dans chaque type d’application. J’utilise la même application AdMob dans chaque exemple d’article AdMob.

Suivez ces étapes pour créer votre compte Admob et votre application Admob

• Inscrivez-vous puis connectez-vous à votre compte AdMob à l’adresse https://apps.admob.com.
• Cliquez sur applications dans la barre latérale.
• Cliquez sur Ajouter une application pour ajouter une nouvelle application ou cliquez sur Afficher toutes les applications pour rechercher une liste de toutes les applications que vous avez ajoutées à AdMob.
• dans le Paramètres de l’application options, vous pouvez voir votre ID d’application. Il s’agit de l’ID dont vous aurez besoin pour connecter votre application à Google AdMob dans votre application.

• dans le Blocs d’annonces , vous pouvez ajouter plusieurs types de blocs d’annonces. Pour plus de détails sur l’ajout de blocs d’annonces, consultez les instructions détaillées détaillées suivantes pour

– Bannière publicitaire

– Annonces interstitielles

– Annonces de récompense

AdMob a une tonne d’autres paramètres pour savoir comment, quand et où vos annonces doivent être diffusées, mais tout cela pour plus tard. Dans cet article, nous limiterons la discussion à « Comment afficher des blocs d’annonces de base dans une application Ionic React Capacitor »

Pour ce post, comme je l’ai expliqué plus tôt, nous utilisons Plugin Capacitor Admob. De plus, comme le condensateur n’injecte pas les variables spécifiques à la plate-forme nécessaires lors de la création de l’application, nous devrons apporter de petites modifications lors de la création des applications.

4.1 Installer le plugin Capacitor AdMob

Dans votre application existante, ajoutez le plugin en utilisant

$ npm install --save capacitor-admob

4.2 Construire dans Android

Puisque nous avons seulement ajouté un plugin, synchronisez simplement les dépendances en utilisant

// copy the build assets to platforms
$ npx cap sync

Dans Android Studio, ouvrez votre AndroidManifest.xml déposer et ajouter ceci meta-data ligne et remplacer la valeur par le réel ID d’application de votre application

.....

Ouvrez votre application Ionic Capacitor dans Android Studio, maintenant ouverte MainActivity.java de votre application et enregistrez le plug-in AdMob Capacitor.

// Other imports...
import app.xplatform.capacitor.plugins.AdMob;
public class MainActivity extends BridgeActivity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
this.init(savedInstanceState, new ArrayList>() {{
add(AdMob.class);  // Add AdMob as a Capacitor Plugin
}});
}
}

Créez l’application une fois sur l’appareil. S’il n’y a pas d’erreur, votre application Android est prête à diffuser des annonces

4.3 Construire dans iOS

Encore une fois, il suffit de synchroniser les dépendances en utilisant

// copy the build assets to platforms
$ npx cap sync

Ouvrez votre App/App/Info.plist déposer et ajouter ceci plist value ligne et remplacez la valeur par l’ID d’application réel de votre application

ArticlesA lire

Revue Atomicrops – SUPERJUMP – Moyen

Un moyen super facile de faire des validations EditText dans Android

Messagerie cloud Firebase – Satya Pavan Kantamani

Génération de DeepLinks au moment de la compilation Android

GADIsAdManagerApp

GADApplicationIdentifier

ca-app-pub-6564742920318187~7217030993

Créez l’application une fois sur l’appareil / le simulateur. S’il n’y a pas d’erreur, votre application iOS est prête à diffuser des annonces.

Une fois que tout est configuré, laissez-nous implémenter différents types d’annonces dans l’application. Pour tous les types d’annonces, vous devrez importer le plug-in et l’initialiser.

import { AdOptions, AdSize, AdPosition } from 'capacitor-admob';
const { AdMob, Toast } = Plugins;

Dans le constructeur, initialisez AdMob à l’aide de

// replace with your own App ID
AdMob.initialize('ca-app-pub-3940256099942544~3347511713');

Bannière de publicité

Les bannières publicitaires sont implémentées dans Tab1. Vous aurez également besoin d’un Ad Unit ID pour la bannière publicitaire de votre compte AdMob.

Une fois que vous avez l’interface utilisateur Tab1.tsx fichier, nous allons implémenter quatre méthodes

• showBanner
• pauseBanner
• resumeBanner
• removeBanner

Les noms des méthodes sont explicites. Le code de la page complète ressemblera à ceci

Annonce interstitielle

Les annonces interstitielles fonctionnent sur un déclencheur. Comme ce sont des annonces pleine page, elles ne sont pas toujours visibles en tant que bannières publicitaires.

Pour implémenter des publicités interstitielles, importez le plugin, initialisez et suivez le code ci-dessous

Les annonces interstitielles doivent load avant de pouvoir les afficher. Dans vos applications de production, ce serait une bonne pratique de charger ces annonces sur le chargement de la page elle-même, puis de les afficher chaque fois que nécessaire.

Annonce de récompense

Encore une fois, les annonces de récompense sont similaires aux annonces interstitielles dans le mécanisme de déclenchement. Pour l’implémenter, importez la dépendance requise et suivez le code ci-dessous

Encore, TestIds.REWARDED est un ID de test. Remplacez-le par un ID d’annonce de production lors de la libération de l’application.

.prepareRewardVideoAd() La méthode charge l’annonce. Le chargement de cette annonce prend un certain temps. C’est pourquoi .showRewardVideoAd() doit être appelé après un délai ou en cas de succès du chargement.

Pour construire le code sur iOS, il suffit d’exécuter ces

$ ionic build
$ npx cap copy

Une fois terminé, créez votre application à partir de Xcode et exécutez l’application. Voyons à quoi ressembleront les annonces dans iOS.

Bannière de publicité

L’annonce obtenue ressemble à ceci sur iOS

Annonce interstitielle

L’annonce en plein écran ressemble à la suite sur iOS

Annonce de récompense

L’annonce de récompense ressemblera à ceci sur iOS

Tout comme iOS, le même code affichera également les annonces sur Android. Ce lien vidéo ici montrera comment les annonces apparaîtront sur l’appareil Android (juste pour terminer le post)

Tada! Vous avez appris à mettre en œuvre des annonces AdMob dans votre application Ionic React Capacitor. 🎉

Dans ce blog, nous avons appris à implémenter la fonctionnalité Google AdMob dans l’application Ionic React Capacitor. La fonctionnalité AdMob est indispensable pour une application où l’utilisateur souhaite générer des revenus grâce aux clics sur les annonces. Cela est pratique lorsque votre application compte un grand nombre d’utilisateurs et que vous ne facturez rien aux utilisateurs de l’application. Les annonces deviennent donc votre source de revenus directs. Vous pouvez également combiner les annonces interstitielles et les annonces de récompenses avec des récompenses intégrées à l’application, comme un niveau supérieur dans un jeu, des vies supplémentaires, etc.

Cet article a été initialement publié sur Enappd.