AdMob Cordova/Capacitor Ad Documentation

[EMI-INDO]

This is an example of a simple quasar framework with concise documentation.

• Someone contacted me a long time ago, asking me to create documentation for an AdMob cordova plugin I created,
• How to implement it into Quasar framework, even though I don't use Quasar but I still try to make it work.

Screenshots

Android	Banner Ad	App Open Ad	Interstitial Ad	Rewarded Ad

• Full https://quasar.dev/quasar-cli-vite/developing-cordova-apps/introduction

• Full list of options: https://v2.quasar.dev/quasar-cli-vite/developing-cordova-apps/configuring-cordova

• Other examples: https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/tree/main/example/www/js

• Main page: https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob

• Release notes: https://github.com/EMI-INDO/emi-indo-cordova-plugin-admob/releases

• Similar documentation: Quasar framework AdMob Cordova/Capacitor EMI-INDO/emi-indo-cordova-plugin-admob#44

Let's assume you have created a base project

• Now proceed step by step

add-cordova-quasar-mode

quasar mode add cordova

add-platform

cd src-cordova

Android

cordova platform add android

IOS

cordova platform add ios

Installation plugin

• Only platform Android

cordova plugin add emi-indo-cordova-plugin-admob --save --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx

• Only platform IOS

cordova plugin add emi-indo-cordova-plugin-admob --save --variable APP_ID_IOS=ca-app-pub-xxx~xxx

• Platform Both

cordova plugin add emi-indo-cordova-plugin-admob --save --variable APP_ID_ANDROID=ca-app-pub-xxx~xxx --variable APP_ID_IOS=ca-app-pub-xxx~xxx

• Remove

cordova plugin rm emi-indo-cordova-plugin-admob

• Open the src/pages/IndexPage.vue file and add the following code:
• This is just an example, please customize it to your own project.

Click Open the code IndexPage.vue

Note

• Click Open the code IndexPage.vue below

Open the code IndexPage.vue

<template>
  <div>
    <h5>Example Ads with AdMob</h5>
    <p v-if="adStatus">{{ adStatus }}</p>
    <button @click="showInterstitialAd">Show Interstitial Ad</button>
    <button @click="showRewardedAd">Show Rewarded Ad</button>
    <button @click="showAppOpenAd">Show App Open Ad</button>
    <button @click="clearLog">Clear Log</button>

    <h6>Event Log</h6>
    <textarea v-model="log" readonly rows="10" cols="50"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      adStatus: "", // Ad status information (e.g., loaded, dismissed)
      log: "", // Stores event logs displayed in the textarea
      isInterstitialLoaded: false, // Tracks if the interstitial ad is loaded
      isRewardedLoaded: false, // Tracks if the rewarded ad is loaded
      isAppOpenAdLoaded: false, // Tracks if the app open ad is loaded
      adIds: {}, // Holds AdMob ad unit IDs
    };
  },
  mounted() {
    document.addEventListener("deviceready", this.initializeAdmob, false);
  },
  methods: {
    // Sets Ad Unit IDs for Android and iOS platforms
    setAdIds() {
      const isPlatformIOS = window.cordova && window.cordova.platformId === "ios";
      this.adIds = isPlatformIOS
        ? {
            App_Open_ID: "ca-app-pub-3940256099942544/5575463023",
            Banner_ID: "ca-app-pub-3940256099942544/2934735716",
            Interstitial_ID: "ca-app-pub-3940256099942544/4411468910",
            Rewarded_ID: "ca-app-pub-3940256099942544/1712485313",
          }
        : {
            App_Open_ID: "ca-app-pub-3940256099942544/9257395921",
            Banner_ID: "ca-app-pub-3940256099942544/9214589741",
            Interstitial_ID: "ca-app-pub-3940256099942544/1033173712",
            Rewarded_ID: "ca-app-pub-3940256099942544/5224354917",
          };
    },
    // Initializes AdMob settings and ads
    initializeAdmob() {
      if (!window.cordova || !cordova.plugins || !cordova.plugins.emiAdmobPlugin) {
        this.adStatus = "Cordova or AdMob plugin not available!";
        return;
      }
      this.setAdIds();
      this.appendLog("AdMob Plugin Initialized");

      // Ad targeting configuration
      cordova.plugins.emiAdmobPlugin.targeting({
        childDirectedTreatment: false,
        underAgeOfConsent: false,
        contentRating: "MA",
      });
      this.appendLog("Targeting Configuration Set");

      // Global ad settings
      cordova.plugins.emiAdmobPlugin.globalSettings({
        setAppMuted: false,
        setAppVolume: 1.0,
        pubIdEnabled: false,
      });
      this.appendLog("Global Settings Set");

      // Specific request for iOS platform
      if (window.cordova.platformId === "ios") {
        cordova.plugins.emiAdmobPlugin.requestIDFA();
        this.appendLog("Request IDFA for iOS");
      }

      // Initialize the AdMob SDK
      cordova.plugins.emiAdmobPlugin.initialize({
        isUsingAdManagerRequest: true,
        isResponseInfo: true,
        isConsentDebug: true,
      });
      this.appendLog("AdMob SDK Initialization Requested");

      // SDK event listener for initialization
      document.addEventListener("on.sdkInitialization", (data) => {
        const sdkVersion = data.version;
        const conStatus = data.consentStatus;
        const attStatus = data.attStatus;

        this.appendLog(`SDK Initialized - Version: ${sdkVersion}`);
        this.appendLog(`Consent Status: ${conStatus}`);

        if (window.cordova.platformId === "ios") {
          this.appendLog(`ATT Status: ${attStatus}`);
        }
        this.loadBannerAd();
      });

      // Load all ads
      this.loadInterstitialAd();
      this.loadRewardedAd();
      this.loadAppOpenAd();

      // Set up listeners for rewarded and app open ads
      this.setupRewardedListeners();
      this.setupAppOpenListeners();
    },
    // Adds a log entry with a timestamp
    appendLog(message) {
      const timestamp = new Date().toLocaleTimeString();
      this.log += `[${timestamp}] ${message}\n`;
    },
    // Clears all log entries
    clearLog() {
      this.log = "";
    },
    // Loads a banner ad and configures its appearance
    loadBannerAd() {
      this.appendLog("Loading Banner Ad...");
      cordova.plugins.emiAdmobPlugin.styleBannerAd({
        isOverlapping: true,
        overlappingHeight: 5,
      });

      cordova.plugins.emiAdmobPlugin.loadBannerAd({
        adUnitId: this.adIds.Banner_ID,
        position: "bottom-center",
        size: "banner",
        autoResize: true,
        autoShow: true,
      });
    },
    // Loads an interstitial ad and sets up event listeners
    loadInterstitialAd() {
      this.appendLog("Loading Interstitial Ad...");
      cordova.plugins.emiAdmobPlugin.loadInterstitialAd({
        adUnitId: this.adIds.Interstitial_ID,
        autoShow: false,
      });

      document.addEventListener("on.interstitial.loaded", () => {
        this.isInterstitialLoaded = true;
        this.appendLog("Interstitial Ad Loaded");
      });

      document.addEventListener("on.interstitial.dismissed", () => {
        this.isInterstitialLoaded = false;
        this.appendLog("Interstitial Ad Dismissed");
        this.loadInterstitialAd();
      });
    },
    // Loads a rewarded ad
    loadRewardedAd() {
      this.appendLog("Loading Rewarded Ad...");
      cordova.plugins.emiAdmobPlugin.loadRewardedAd({
        adUnitId: this.adIds.Rewarded_ID,
        autoShow: false,
      });
    },
    // Loads an app open ad
    loadAppOpenAd() {
      this.appendLog("Loading App Open Ad...");
      cordova.plugins.emiAdmobPlugin.loadAppOpenAd({
        adUnitId: this.adIds.App_Open_ID,
        autoShow: false,
      });
    },
    // Sets up listeners for rewarded ad events
    setupRewardedListeners() {
      document.addEventListener("on.rewarded.loaded", () => {
        this.isRewardedLoaded = true;
        this.appendLog("Rewarded Ad Loaded");
      });

      document.addEventListener("on.reward.userEarnedReward", () => {
        this.appendLog("User Earned Reward");
      });

      document.addEventListener('on.rewarded.dismissed', () => {
        this.isRewardedLoaded = false;
        this.loadRewardedAd();
     });
    },
    // Sets up listeners for app open ad events
    setupAppOpenListeners() {
      document.addEventListener("on.appOpenAd.loaded", () => {
        this.isAppOpenAdLoaded = true;
        this.appendLog("App Open Ad Loaded");
      });
    },
    // Displays the interstitial ad if loaded
    showInterstitialAd() {
      if (this.isInterstitialLoaded) {
        this.appendLog("Showing Interstitial Ad...");
        cordova.plugins.emiAdmobPlugin.showInterstitialAd();
      } else {
        this.appendLog("Interstitial Ad is not loaded!");
      }
    },
    // Displays the rewarded ad if loaded
    showRewardedAd() {
      if (this.isRewardedLoaded) {
        this.appendLog("Showing Rewarded Ad...");
        cordova.plugins.emiAdmobPlugin.showRewardedAd();
      } else {
        this.appendLog("Rewarded Ad is not loaded!");
      }
    },
    // Displays the app open ad if loaded
    showAppOpenAd() {
      if (this.isAppOpenAdLoaded) {
        this.appendLog("Showing App Open Ad...");
        cordova.plugins.emiAdmobPlugin.showAppOpenAd();
      } else {
        this.appendLog("App Open Ad is not loaded!");
      }
    },
  },
};
</script>

<style scoped>
button {
  margin: 10px;
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #45a049;
}

textarea {
  width: 100%;
  margin-top: 10px;
  padding: 5px;
  font-family: monospace;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f9f9f9;
}
</style>

quasar.config.js cordova confirmation block

• This is just an example, please customize it to your own project.
• Also customize it in config.xml quasar-project/src-cordova/config.xml

Click Open the code quasar.config.js

Note

• Click Open the code quasar.config.js below

Open the code quasar.config.js

cordova: {
    id: 'org.cordova.quasar.app',
    version: '1.0.0.0',
    description: 'Cordova App with Quasar',
    androidVersionCode: '1000000',
    ios: {
      deploymentTarget: '13.0',
    },

    // Specifies the parameters for the Cordova build
    getCordovaBuildParams: ({ debug, target }) => {
      return ['build', `--${debug ? 'debug' : 'release'}`, '--device', target];
    },

    // Specifies the output folder for the Cordova build
    getCordovaBuildOutputFolder: ({ debug, target }) => {
      if (target === 'android') {
        return `platforms/android/app/build/outputs`;
      } else if (target === 'ios') {
        return `platforms/ios/build/${debug ? 'Debug' : 'Release'}-iphoneos`;
      }
    },
  },

Install on Android Device

• If no errors are found and we want to try it on our cellphone type the following command:

quasar build -m cordova -T android

• wait for the build process to complete.

• After the quasar build process is complete, we will build the app-release.aab file into .apk format so that it can be used on our cellphone.

We will enter the src-cordova folder first by typing the following command:

cd src-cordova

Then we type the following command:

cordova run android

• The .apk file is located inside the quasar-project/src-cordova/platforms/android/app/build/outputs/apk/debug/app-debug.apk folder. Please install the app-debug.apk file on your phone.

YouTube Video