Software Archive
Read-only legacy content
17061 Discussions

I import Html5 project and i can't display ads

younes_m_
Beginner
439 Views

Hi,

I import existing html5 project as you now with my own template , the problem is : I want to add ads with cordova admob but i don't know where to put codes and which file i need ?... are there any solutions to add ads : it is possible to add the code directly in my index.html ... 

.
0 Kudos
5 Replies
David_S_15
New Contributor I
439 Views

 

This link: https://software.intel.com/en-us/xdk/docs/html5-hybrid-apps-with-admob-cordova-plugin might be a helpful resarouce for you to include ads in your app. You will need to set up your ad network (like admob), instal a plugin in the SDK (the admob available in the list of featured plugins), and then include the code (or some variation thereof that suits your usage) into your index.html file so that the ad can be displayed natively.

Let me know if that helps get you started and if I can be of more help.

0 Kudos
younes_m_
Beginner
439 Views

i use this plugin admob simple  https://github.com/sunnycupertino/cordova-plugin-admob-simple

i want to know where exectly i will put the script in my html index.html after the head or body tags ???

 

 

//initialize the goodies
function initAd(){
        if ( window.plugins && window.plugins.AdMob ) {
            var ad_units = {
                ios : {
                    banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx',       //PUT ADMOB ADCODE HERE
                    interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx'  //PUT ADMOB ADCODE HERE
                },
                android : {
                    banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx',       //PUT ADMOB ADCODE HERE
                    interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx'  //PUT ADMOB ADCODE HERE
                }
            };
            var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;

            window.plugins.AdMob.setOptions( {
                publisherId: admobid.banner,
                interstitialAdId: admobid.interstitial,
                adSize: window.plugins.AdMob.AD_SIZE.SMART_BANNER,  //use SMART_BANNER, BANNER, IAB_MRECT, IAB_BANNER, IAB_LEADERBOARD
                bannerAtTop: false, // set to true, to put banner at top
                overlap: true, // banner will overlap webview 
                offsetTopBar: false, // set to true to avoid ios7 status bar overlap
                isTesting: false, // receiving test ad
                autoShow: false // auto show interstitial ad when loaded
            });

            registerAdEvents();
            window.plugins.AdMob.createInterstitialView();  //get the interstitials ready to be shown
            window.plugins.AdMob.requestInterstitialAd();

        } else {
            //alert( 'admob plugin not ready' );
        }
}
//functions to allow you to know when ads are shown, etc.
function registerAdEvents() {
        document.addEventListener('onReceiveAd', function(){});
        document.addEventListener('onFailedToReceiveAd', function(data){});
        document.addEventListener('onPresentAd', function(){});
        document.addEventListener('onDismissAd', function(){ });
        document.addEventListener('onLeaveToAd', function(){ });
        document.addEventListener('onReceiveInterstitialAd', function(){ });
        document.addEventListener('onPresentInterstitialAd', function(){ });
        document.addEventListener('onDismissInterstitialAd', function(){
            window.plugins.AdMob.createInterstitialView();          //REMOVE THESE 2 LINES IF USING AUTOSHOW
            window.plugins.AdMob.requestInterstitialAd();           //get the next one ready only after the current one is closed
        });
    }
0 Kudos
Pamela_H_Intel
Moderator
439 Views

Younes - Putting JavaScript in your html file introduces security holes and makes your project harder to debug.

That said, these are JavaScript function definitions - you can put them almost anywhere. If you put them in the index.html you need to use the <script> tag, but I suggest you put them in a separate .js file.

The code placement that is critical is the function invocation. As it says on the Admob github link that you supplied: call initAd() from onDeviceReady().

However, if you want to ensure that you are not calling your functions too soon see our recommended structure - not starting your code until both the DOM and the device are ready.  Take a look at our Blank Cordova Starter App in Samples and Demos. The app.Ready event (in init-dev.js) is fired only after both DOM and device are ready. Then in init-app.js is app.initEvents - this function is called after app.Ready is fired and is where it is best to start your ads with the initAd() invocation.

0 Kudos
lele_h_
Beginner
439 Views

did   you  sove this problem ? 

I add the  cordova-plugin-admob-simple into the project and build it  to cross-android。

when I download it and install it in my mobile,the ad won't show ...

 

 

0 Kudos
Pamela_H_Intel
Moderator
439 Views

There could be many reasons your ads don't show. We are not familiar with all plugins. You will need to debug.

0 Kudos
Reply