CODEWITHSUNDEEP
admobcapacitor
Francisco S
Francisco S

Reputation: 115

Show Admob ads on Capacitor

I'm moving an app to capacitor and I have a problem. The app works correctly, and I don't have any errors, but for some reason the advertising banner is not visible, do you know why? I have checked the App and Ad code and they are correct, and in the one in production it works correctly. Thanks.

index.html code:

    <title>App</title>

    <!-- Enlace a Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Script para inicializar AdMob -->
    <script>
    document.addEventListener('deviceready', function() {
        if (window.AdMob) {
            const admobId = {
                banner: 'ca-app-pub-000000000/00000000' 
            };

            // Inicializar AdMob
            AdMob.initialize();

            // Crear el banner en un contenedor específico
            AdMob.createBannerView({
                adId: admobId.banner,
                isTesting: false, // Cambia a false en producción
                autoShow: true,
                adContainer: document.getElementById('ad-banner-top-container') // Especifica el contenedor donde se mostrará el banner
            }).then(() => {
                console.log('Banner ad created successfully');
            }).catch(err => {
                console.error('Failed to create banner ad', err);
            });
        } else {
            console.log('AdMob plugin not ready');
        }
    }, false);
</script>
</head>
<body>
    <div class="container mt-5">
        

        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Enviar WhatsApp</h5>
                <form id="whatsappForm">
                    <div class="mb-3">
                        <label for="languageSelector" class="form-label">Seleccione idioma</label>
                        <select class="form-select" id="languageSelector" name="languageSelector">
                            <option value="es">Español</option>
                            <option value="en">Inglés</option>
                            <option value="fr">Francés</option>
                            <option value="zh">Chino</option>
                            <option value="ar">Árabe</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="origenSeleccion" class="form-label">Seleccione país</label>
                        <select class="form-select" id="origenSeleccion" name="origenSeleccion">
                            <!-- Los nombres de los países se llenarán dinámicamente -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="telefono" class="form-label">Número de teléfono</label>
                        <input type="text" class="form-control" id="telefono" placeholder="Ingrese su número de teléfono" required>
                    </div>
                    
                    <!-- Contenedor para el anuncio de banner superior -->
                    <div id="ad-banner-top-container" style="margin-bottom: 20px;"></div>

                    <button type="submit" class="btn btn-success">Enviar WhatsApp</button>

                    <!-- Contenedor para el anuncio de banner inferior -->
                    <div id="ad-banner-bottom-container" style="margin-bottom: 20px;"></div>
                </form>
            </div>
        </div>
    </div>

    <!-- Enlace a Bootstrap JS (Opcional, para componentes interactivos) -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

capacitor.config.json code:

{
  "appId": "com.example.es",
  "appName": "Example",
  "webDir": "dist",
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 0
    },
    "AdMob": {
            "appIdAndroid": "ca-app-pub-00000000~000000"
    },

  }
}

package.json code

{
  "name": "Hello Ap",
  "version": "1.0.0",
  "description": "Hello",
  "main": "index.js",
  "keywords": [
    "capacitor",
    "mobile"
  ],
  "scripts": {
    "start": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@capacitor-community/admob": "^5.0.0",
    "@capacitor/android": "^5.0.0",
    "@capacitor/core": "^5.0.0",
    "@capacitor/ios": "^5.0.0",
    "@capacitor/splash-screen": "^5.0.0"
  },
  "devDependencies": {
    "@capacitor/cli": "^5.0.0",
    "typescript": "^5.5.4",
    "vite": "latest"
  },
  "author": "CompanySLU",
  "license": "ISC"
}

Upvotes: -1

Views: 43

Answers (1)

Francisco S
Francisco S

Reputation: 115

I finally solved it by changing the settings in MainActivity.

Upvotes: 0

Related Questions