admob-plus / admob-plus

Trustable AdMob Plugin for Cordova, Capacitor, Ionic, React Native
https://admob-plus.github.io
MIT License
361 stars 150 forks source link

Ads are not shown #645

Open ManoloPololo opened 4 months ago

ManoloPololo commented 4 months ago

Ads are not showing using this plugin. Let me describe the steps I followed from scratch, maybe you can assist me. First, I created a new cordova project: cordova create AdmobProject cd AdmobProject

Then, I add the plugin cordova plugin add admob-plus-cordova --save --variable APP_ID_ANDROID=ca-app-pub-3940256099942544~3347511713

I got this ID from Google website. Then, I modify the index.html inside AdmobProject/www folder. I leave it like this:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/index.css">
    <title>Joputa</title>
</head>
<body>
    <script src="cordova.js"></script>
</body>
</html>

And now I follow the instructions from plugin website and add the instructions for the banner. The index.html file is now:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
    <meta name="color-scheme" content="light dark">
    <link rel="stylesheet" href="css/index.css">
    <title>Joputa</title>
</head>
<body>
    <script src="cordova.js"></script>
    <script>
        let banner
        document.addEventListener('deviceready', async () => {
            banner = new admob.BannerAd({
                adUnitId: 'ca-app-pub-3940256099942544/6300978111',
            })
            banner.on('impression', async (evt) => {
                await banner.hide()
            })
            await banner.show()
        }, false)
    </script>
</body>
</html>

I entered the test unitAdId provided by plugin website. When I add android platform and build using cordova, the app does not display anything at all. Suggestions about how to fix this, please?

1n3JgKl9pQ6cUMrW commented 4 months ago

Your code is very generic, so that's difficult to help from here.

Be sure you set the flag for "testing ads" and use those test #ID's provided by Google (never test with your real credentials).

See : https://developers.google.com/admob/android/test-ads

image

ManoloPololo commented 4 months ago

If you take a closer look to the code I am using the ID you listed there for the Banner. I still do not know why the code is not working. Could you follow same steps and check whether is working for you or not? Is the script part included in the index.html correct?

<script>
        let banner
        document.addEventListener('deviceready', async () => {
            banner = new admob.BannerAd({
                adUnitId: 'ca-app-pub-3940256099942544/6300978111',
            })
            banner.on('impression', async (evt) => {
                await banner.hide()
            })
            await banner.show()
        }, false)
</script>

I am just copying and pasting the information from the website into a script. Is that supposed to be like that? I would appreciate a basic step by step tutorial, just to make a very little app with adds running.

1n3JgKl9pQ6cUMrW commented 4 months ago

I can't help, but the plug-in itself works perfect, that's for sure.

It's one of the best in the whole Admob / Cordova environment.

You can start by debugging and outputting the results to your console or a log file and share it here.

Also start with a complete new, clean project, e.g. the one on this .git repo, as a bootstrap.

ManoloPololo commented 4 months ago

You mean the example at: https://github.com/admob-plus/admob-plus/tree/master/examples/cordova ?

1n3JgKl9pQ6cUMrW commented 4 months ago

Yes.

Always start with this boilerplate and then add your own plugins and code afterwards, so you can see at what point things go wrong.

Also shared your development environment here, like it's Windows, Apple, a browser, emulator, etc...

ManoloPololo commented 4 months ago

When I download that example, I create a folder, let's name it: "Project" and then I copy the cordova folder provided. Then, in the cmd, I type: cordova platform add android And I get:

Using cordova-fetch for cordova-android@12.0.0
Failed to fetch platform cordova-android@12.0.0
Probably this is either a connection problem, or platform spec is incorrect.
Check your connection and platform name/version/URL.
CordovaError: Error: Command failed with exit code 1: npm install cordova-android@12.0.0 --save-dev
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type "workspace:": workspace:*

npm ERR! A complete log of this run can be found in: C:\Users\Manolo\AppData\Local\npm-cache\_logs\2024-01-05T19_42_31_779Z-debug-0.log

That's why I tried to created from scratch, trying to load the ads over the cordova empty project that it is created when you type: cordova create Project

1n3JgKl9pQ6cUMrW commented 4 months ago

Sounds like there's something really wrong with the core set-up of your development environment.

Better fix that first.

Start with a complete new, clean Cordova project, the "hello world" example provided when you start from scratch.

Create that, compile that, run that (on a real world Android device or iPhone).

Then try to add an easy plugin like a Cordova / Apache one (device info, or something like that).

See if that work, if you can fetch some "device info" from your app, using the plugin, etc...

Than step by step, scale up to this AdMob plugin; this plugin is not for starters, it's not "easy out of the box" and unless you have at least 10.000 active user-sessions a month, you will earn nothing.

ManoloPololo commented 4 months ago

I checked once more the initial code I made, after adding:

    <preference name="AdMobPlusWebViewAd" value="true" />
    <preference name="android-targetSdkVersion" value="33" />
    <preference name="AndroidXEnabled" value="true" />
    <preference name="GradlePluginKotlinEnabled" value="true" />

In the config.xml file, inside the widget tag. I noticed that the banner blinks and goes away. Maybe is there something on my code telling the banner to appear and disappear?

https://github.com/admob-plus/admob-plus/assets/22113587/5c4b7447-47f4-49af-ba9b-90188a158aec

raiyanihiren commented 3 months ago

As I checked, there is an issue with the latest version of this plugin, which is working on iOS but not on Android. So, use admob-plus-cordova@1.28.0 for Android, as it is working perfectly. Also, use the latest plugin for iOS, as using an older plugin on iOS may result in a version dependency issue.

ASGART1907 commented 3 months ago

You should remove this part: banner.on('impression', async (evt) => { await banner.hide() })

brunoalex commented 2 months ago

i think i found the problem... you need to add: <preference name="GradlePluginKotlinEnabled" value="true" /> to config.xml for the new admob-plus 2.x versions ... following this https://admob-plus.github.io/docs/cordova/upgrade let me know if its working for you :)