How to use plugin admob

Questions
1

Hi,

I installed succesfully the Cordova AdMob Plugin from here

I tried to follow the doc https://framework7.io/docs/plugins-api.html

Nothing works

So in src/index.html added

<script src="../cordova/node_modules/cordova-plugin-admob-free/src/js/admob.js"></script>
<script src="../cordova/node_modules/cordova-plugin-admob-free/src/js/banner.js"></script>

in src/js/app.js, added

   Framework7.use(cordova-plugin-admob-free);
      var app = new Framework7({
      on: {
      init: function () {
        var f7 = this;
        admob.banner.config({
          id: 'ca-app-pub-hidden',
        })

    // Create banner
    admob.banner.prepare()

    // Show the banner
    admob.banner.show()
2

I do not think that this https://framework7.io/docs/plugins-api.html is about Cordova plugins.

Often, when you add plugins to your cordova projects, they are made available either directly on the window object, or on the window.cordova.plugins object.

So, to access your admob plugin, I would try something like this: const admob = window.cordova.plugins.admob or const admob = window.admob

Or from their doc, perhaps a simple import {banner} from 'cordova-plugin-admob-free/admob' would do the trick.

3

In wish file i can put import {banner} from 'cordova-plugin-admob-free/admob' ?
I don’t understand the structure of a f7’s project.
The doc is clearly not helpfull.

1 Like
4

In the component in which you wish to use the banner.
Have you checked the content of the window object to see if it is not already available there?
Anyway, I feel like your issue is more cordova related than it is Framework7 related, no?

5

Hello,

I am also trying to implement Google AdMob into my cordova app using the Framework7-CLI via the following command line:

framework7 cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-app-pub-xxxxxxxxxxxxxxx~xxxxxxxxx"

However I get the following error:
error: unknown option '--save'

I am running on Windows 10 64 Bit

6

I also found this article but it’s for ionic and not f7: https://www.freakyjolly.com/ionic-admob-free-native-tutorial/ Would anyone know how to convert this to instructions that would work in f7?
Thanks!

7

This error is generating because --save is getting called on the framework7 point of view not in cordova. Just change into your cordova directory and then you can install the plugin

1 Like
8

@Gagan excellent! Thanks that fixed the error.

However, when I try to load ads I get the error “No fill”. I did a search and found other people with the same error but no solution.

Does anyone have any suggestions?

Thanks!

9

Can you give some code on how you are trying to load the ad. Without code, it will be quite difficult to predict anything

10

@vbguyny
framework7 cordova plugin add cordova-plugin-admob-free – --save --variable ADMOB_APP_ID=“ca-app-pub-xxxxxxxxxxxxxxx~xxxxxxxxx” will works
Note the – before the --save.

11

@Gagan please refer to the following:

var ad_units = {
    android: {
        banner: 'ca-app-pub-xxx/xxx',
        interstitial: 'ca-app-pub-xxx/xxx',
    },
};
var admobid = undefined;

var initAds = function() {
    if (admob) {

         admobid = ad_units.android;

        registerAdEvents();

        admob.banner.config({
            id: admobid.banner,
            isTesting: false,
            autoShow: true,
        });
        admob.banner.prepare();

    } else {
        console.error('admob plugin not ready');
    }
};

var registerAdEvents = function() {


    document.addEventListener('admob.banner.events.LOAD', function(e) {
        console.log("banner LOAD: " + JSON.stringify(e));

        bannerLoaded = true;
    });
    document.addEventListener('admob.banner.events.LOAD_FAIL', function(e) {
        console.log("banner LOAD_FAIL: " + JSON.stringify(e));
        //alert("banner LOAD_FAIL: " + JSON.stringify(e));
    });
    document.addEventListener('admob.banner.events.OPEN', function(e) {
        console.log("banner OPEN: " + JSON.stringify(e));
    });
    document.addEventListener('admob.banner.events.CLOSE', function(e) {
        console.log("banner CLOSE: " + JSON.stringify(e));

        bannerLoaded = false;

        admob.banner.prepare();
    });
    document.addEventListener('admob.banner.events.EXIT_APP', function(e) {
        console.log("banner EXIT_APP: " + JSON.stringify(e));
    });
};

Thanks again!

12

No Fill is encountered when no ad is being served from google.
Try following steps:-
1)Use tests ads first. In this way you will know whether there is some problem in your code(which i think doesn’t) or simply server is not sending ads.
2)Wait for some time(~24 hours) as it takes some time for server to register that your publisher id is configured.In some cases, it might also take 4~6 days.

I also want to ask how do you test your cordova plugins. Whenever i do some changes to plugin-side, i create debug app and then test it on my android device. This whole process takes a lot time. It would be great if you can give a overview of how you test your plugins.

13

@Gagan,

Ok, so changing the script around to use the Google test ads, I was able to get them to load (see below). I am assuming that means I need to wait some time before the AdMobs has registered my publisher id.

var ad_units = {
    android: {
        banner: 'ca-app-pub-3940256099942544/6300978111',
        interstitial: 'ca-app-pub-3940256099942544/1033173712'
    }
};

I would be more than happy to create an article or documentation somewhere once I get this working. Creating Android apps with F7-CLI is really simple once you get the hang of it :wink:

As for testing plug-ins, I use Google Drive to copy my APK from my PC to my Android device. Also, you can debug your APK with your PC if you connect your device via USB and enable Developer Options (https://www.howtogeek.com/129728/how-to-access-the-developer-options-menu-and-enable-usb-debugging-on-android-4.2/). Then using Chrome on your PC you can remote debug your apk which at that point you can see error messages in the console and even step through the script! (https://raygun.com/blog/debug-android-chrome/)

14

Just wait for some time. I get it working almost in an instant because my apk(which do not has ads) is already live on play store and i add ad in update. Thanks for sharing your experience. You’re right F7-Cli is more than easy. I tried react-native and nativescript, both of them are not great to start with, even though both of them are native. React Native even have licensing issue.

15

@Gagan wow, didn’t know that about those other frameworks.

Ok, my apk isn’t live on play store yet (pending publication). Maybe that has to do with it as well!

16

Sorry for troubling. Now, i’m trying to add cordova-plugin-admob-free in next project. Installation is successful but it generates following error on build:-

C:\Users\gagan\Projects\hybrid\framework\error\framework7\quotes\cordova\platforms\android\app\src\main\java\name\ratson\cordova\admob\AdMob.java:5: error: package android.support.annotation does not exist
import android.support.annotation.NonNull;
                             ^
C:\Users\gagan\Projects\hybrid\framework\error\framework7\quotes\cordova\platforms\android\app\src\main\java\name\ratson\cordova\admob\AdMob.java:243: error: cannot find symbol
@NonNull
 ^
 symbol:   class NonNull
 location: class AdMob
Note: Some input files use or override a deprecated API. 
Note: Recompile with -Xlint:deprecation for details.
2 errors

> Task :app:compileDebugJavaWithJavac FAILED

FAILURE: 24 actionable tasks: 6 executed, 18 up-to-date  
Build failed with an exception.

* What went wrong:
 Execution failed for task ':app:compileDebugJavaWithJavac'.
> Compilation failed; see the compiler error output for details.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

 * Get more help at https://help.gradle.org

 BUILD FAILED in 5m 40s

Since the issue is plugin related, i guess you may encountered the error too . How did you install it?

18

@Gagan
Sorry to here. I have been getting that error trying add mediation plugins for AdMob but not the one you are trying to install.
Are you running the latest version of the F7-CLI?

19

Then, how did you solved that error? Sometimes, it feels like cordova-plugin-admob-free lacks proper documentation. Most of the issues are unattended.

20

Hello @Gagan,

I didn’t, I just didn’t use those plugins. As for the cordova-plugin-admob-free, I am using f7-cli version 3.2.4 with the plugin so I don’t know if that has anything to do with it.

Also, my app got published to the “Internal test track” but I am still not getting live ads in my app. Do I need to publish it to “Production” for it to work?

Thanks.

21

For all those who may have same error in future, do following:-
1 Remove the plugin
2)remove android platform
3)add android platform
4)re-install the plugin
I do haven’t tried “Internal test track” as i’m currently struggling with downloads. Once you deployed your app to production, it starts loading ads even with app_debug apk

1 Like