Add Google AdMob in PhoneGap Project

185 Views Asked by At

I have been trying to add AdMob in my PhoneGap project for several days. But I could not find a way to show adds on my app. I have followed some tutorials, but nothing seems to be helpful. I was using Google-provided test ad units for Banner ca-app-pub-3940256099942544/6300978111. I was testing the app by building apk from Adobe PhoneGap Build and then running app by installing the apk in my Android Phone. This is what I did:

To add the AdMob plugin in my project:

phonegap plugin add cordova-admob

And then in my index.js file

Code #1

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        admob.setOptions({
            publisherId: "ca-app-pub-3940256099942544/6300978111",
            isTesting: false,
            autoShowBanner: true,
        });
        admob.createBannerView();
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        if (parentElement != null) {
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
        }
        console.log('Received Event: ' + id);
    }
};

Code #2

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
        alert("device ready");
        app.adSetter();
    },
    adSetter: function(){
        alert(navigator.userAgent);
        var admobid = {};
        if( /(android)/i.test(navigator.userAgent) ) { 
            admobid = {
                banner: 'ca-app-pub-3940256099942544/6300978111'
            };
        }
        if(AdMob) AdMob.createBanner( {
            adId:admobid.banner, 
            position:AdMob.AD_POSITION.BOTTOM_CENTER, 
            autoShow:true
        } );
    },
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        if (parentElement != null) {
            var listeningElement = parentElement.querySelector('.listening');
            var receivedElement = parentElement.querySelector('.received');
            listeningElement.setAttribute('style', 'display:none;');
            receivedElement.setAttribute('style', 'display:block;');
        }
        console.log('Received Event: ' + id);
    }
};

None of the above worked. What am I doing wrong?

What I need to do to add AdMob in my PhoneGap project and show adds in my app?

Thanks in advance. :)

0

There are 0 best solutions below