Documentation Capacitor example

[EMI-INDO]

• I only use cordova,
• Whether this will work on capacitors you can try.

Note release https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/releases

Copy all the files in https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/tree/main/example

cd root project/

1. Add Capacitor to Project: Run the following command inside the project folder

npm install @capacitor/core @capacitor/cli
npx cap init "HelloCordova" "io.cordova.hellocordova"

Notes:

• HelloCordova: The name of your application.
• io.cordova.hellocordova: The package ID of your app.

2. Add Platform Capacitor: For example, add an Android platform:

npm install @capacitor/android
npx cap add android

• If you also want to add the iOS platform:

npm install @capacitor/ios
npx cap add ios

3. Run the sync to ensure Capacitor recognizes the www folder from Cordova:

npx cap sync

4. Add Cordova Plugin to Capacitor

• Capacitor supports integration with Cordova plugins. Existing Cordova plugins can be used in conjunction with Capacitor.

• Installation

npm i emi-indo-cordova-plugin-admob

• uninstall

npm uninstall emi-indo-cordova-plugin-admob

5. To change the admob-app-id automatically you can change it in capacitor.config.json

• npm run update-admob will also add this automatically to "ios/App/App/Info.plist"
  SKAdNetworkItems: https://developers.google.com/admob/ios/3p-skadnetworks
GADDelayAppMeasurementInit
NSUserTrackingUsageDescription

• Run the Hook script

npm run update-admob

• Or Automatically update the AdMob id while building (npm run build)

• Modify the following line in package.json
  "build": "cross-env NODE_ENV=production vite build" to "build": "npm run update-admob && cross-env NODE_ENV=production vite build"

• Add the following line in package.json
  "update-admob": "node node_modules/emi-indo-cordova-plugin-admob/capacitor-hook-admob-ids.js",

• it would look something like this

 "scripts": {
	.....
	.....
        "build": "npm run update-admob && cross-env NODE_ENV=production vite build",
	"update-admob": "node node_modules/emi-indo-cordova-plugin-admob/capacitor-hook-admob-ids.js",
	.....
	.....
  },

npm run build

6. Plugin Synchronization: Run the following command to synchronize the Cordova plugin to the Capacitor project:

npx cap sync

7. Run Capacitor Project:

• For Android:

npx cap open android

• For iOS:

npx cap open ios

Note

Warning

• running Hook script
• Mandatory fields in capacitor.config.json and package.json must be present and cannot be changed.
• Otherwise you have to edit the admob-app-id and other confirmations manually.

capacitor.config.json

 "plugins": {
    "AdMob": {
      "APP_ID_ANDROID": "ca-app-pub-xxxxxxxxxxx",
      "APP_ID_IOS": "ca-app-pub-xxxxxxxxxxxx"
    }
  }

package.json

"scripts": {
    "build": "npm run update-admob && cross-env NODE_ENV=production vite build",
    "update-admob": "node node_modules/emi-indo-cordova-plugin-admob/capacitor-hook-admob-ids.js"
  }

Version locking the plugin during production is highly recommended.

• Example npm i emi-indo-cordova-plugin-admob@1.6.0
• View plugin version: https://www.npmjs.com/package/emi-indo-cordova-plugin-admob?activeTab=versions
• Release notes: https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/releases

Optional advanced

https://www.npmjs.com/package/capacitor-hook-admob-ids

Regular maintenance support

• You can send us a cup of coffee

💰Sponsor this project

• Android Studio

• Xcode

[merbin2012]

@EMI-INDO Thanks for considering capacitor documentation. I'm just wake up, after reaching office, I'll give full details with example.
Almost all the steps are correct except
cordova plugin add emi-indo-cordova-plugin-admob
We can't use Cordova cli comments here, we need use npm i emi-indo-cordova-plugin-admob, also npm command doesn't support variable so manually change the admob id in node_module folder.

Note: You are a great developer, don't use Cordova, try move to Capacitor or other tool. I have more than 100 app's in Cordova and I'm a Cordova developer from 2014, but many features are deprecated and many plugin's are not maintaining, so end of the 2023 onwards I'm using capacitor tools and trying to convert all my Cordova apps to Capacitor.

I'm using Capacitor and framework 7. There only difference is javascript module based code, initially 2 months I'm struggling in capacitor, but now I have more experience.

[merbin2012]

Highlight of this plugin
Compare to the @admob-plus/capacitor & capacitor-community/admob, this plugin supports app open ad and Collapsible banner ad. Also, you can use this same plugin in both Cordova & Capacitor project without any existing code changes.

Install the plugin
npm i emi-indo-cordova-plugin-admob

If your using module based javascript

import './deviceready.js'
import './bannerAd.js'
import './interstitialAd.js'
import './appOpenAd.js'
import './rewardedAd.js'

Or

<script src="deviceready.js"></script>
<script src="bannerAd.js"></script>
<script src="interstitialAd.js"></script>
<script src="appOpenAd.js"></script>
<script src="rewardedAd.js"></script>

For iOS

Step 1:
we have to additionally add the following details in your "ios/App/App/Info.plist"

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxx~yyy</string>

Step 2

cd ios
cd app
pod install
cd ..
cd ..

For Android
Step 1
Open following path
node_modules\emi-indo-cordova-plugin-admob\plugin.xml

Find the below line
<preference name="APP_ID_ANDROID" default="ca-app-pub-3940256099942544~3347511713" />

Replace with your actual admob app id

Step 2 (Optional):
You can use admob lite version by the following changes, it will reduce your app size up to 2MB.
Find the below line in the above mention path
<framework src="com.google.android.gms:play-services-ads:$PLAY_SERVICES_VERSION" />
To
<framework src="com.google.android.gms:play-services-ads-lite:$PLAY_SERVICES_VERSION" />

[EMI-INDO]

Now I understand, it seems that there is no need to manually edit the admob-app-id in plugin.xml, I just need to create a capacitor-specific hook script, users can simply add the original admob-app-id from capacitor.config.json, everything will run automatically.

[merbin2012]

Yes, great idea.

[EMI-INDO]

Plugin updated, including this documentation,
Hook will gradually be updated to handle automatic confirmation on capacitors.

emi-indo-cordova-plugin-admob@1.6.1

[merbin2012]

Please add the below details to your capacitor documentation

  "scripts": {
	.....
	.....
        "build": "npm run update-admob && cross-env NODE_ENV=production vite build",
	"update-admob": "node node_modules/emi-indo-cordova-plugin-admob/capacitor-hook-admob-ids.js",
	.....
	.....
  },

Automatically update the AdMob id while building (npm run build)

1. Modify the following line in package.json
   "build": "cross-env NODE_ENV=production vite build" to "build": "npm run update-admob && cross-env NODE_ENV=production vite build"
2. Add the following line in package.json
   "update-admob": "node node_modules/emi-indo-cordova-plugin-admob/capacitor-hook-admob-ids.js",