{"id":480,"date":"2017-07-28T21:16:31","date_gmt":"2017-07-28T21:16:31","guid":{"rendered":"http:\/\/www.netexl.com\/blog\/?p=480"},"modified":"2017-07-29T15:30:06","modified_gmt":"2017-07-29T15:30:06","slug":"add-admob-ads-to-html5-game-using-intel-xdk","status":"publish","type":"post","link":"https:\/\/www.netexl.com\/blog\/add-admob-ads-to-html5-game-using-intel-xdk\/","title":{"rendered":"Add AdMob Ads to HTML5 Game using Intel XDK"},"content":{"rendered":"<p>The steps are as following<\/p>\n<ul>\n<li>Open your app in Intel XDK and go to CORDOVA HYBRID MOBILE APP SETTINGS section<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-474\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin1-1024x543.png\" alt=\"\" width=\"960\" height=\"510\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin1-1024x543.png 1024w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin1-300x159.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin1-768x408.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin1-280x149.png 280w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin1.png 1366w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<ul>\n<li>Click on &#8220;Add Plugins to this project&#8221; and search for the plugin &#8220;cordova-plugin-admob-free&#8221; in npm. Click &#8220;Add Plugin&#8221; which adds plugin to the project.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-482\" src=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin3-300x159.png\" alt=\"\" width=\"960\" height=\"507\" srcset=\"https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin3-300x159.png 300w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin3-768x406.png 768w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin3-1024x541.png 1024w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin3-280x148.png 280w, https:\/\/www.netexl.com\/blog\/wp-content\/uploads\/2017\/07\/IntelXDK_Plugin3.png 1366w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><\/p>\n<ul>\n<li>Open your index.html and add following code\n<pre class=\"lang:default mark:13,17 decode:true\">    &lt;script&gt;\r\n        document.addEventListener(\"deviceready\", onDeviceReady, false);\r\n        \r\n        function onDeviceReady() {\r\n            initAd();\r\n            showBannerFunc();\r\n        }\r\n        \r\n        \/\/initialize the goodies\r\n        function initAd(){\r\n            \r\n            admob.banner.config({\r\n                id: 'ca-app-pub-3940256099942544\/6300978111',\r\n                adSize: window.plugins.AdMob.AD_SIZE.BANNER\r\n            });\r\n            admob.interstitial.config({\r\n                id: 'ca-app-pub-3940256099942544\/1033173712',\r\n                autoShow: false\r\n            });\r\n            \/\/ Create banner\r\n            admob.banner.prepare()\r\n        }\r\n\r\n        \/\/display the banner\r\n        function showBannerFunc(){\r\n            admob.banner.show();\r\n        }\r\n        \r\n        \/\/prepare the interstitial\r\n        function prepareInterstitialFunc(){       \r\n            admob.interstitial.prepare();\r\n        }\r\n\r\n        \/\/display the interstitial\r\n        function showInterstitialFunc(){       \r\n            admob.interstitial.show();\r\n        }\r\n\r\n    &lt;\/script&gt;\r\n<\/pre>\n<p>Replace banner and interstitial ad code id with\u00a0yours. The code in the example is given by <a href=\"https:\/\/developers.google.com\/admob\/android\/test-ads#sample_ad_units\" target=\"_blank\">Google<\/a> to test the ads\u00a0which displays placeholder ads for testing.\u00a0This can be used during\u00a0development and testing. Replace it with your ad codes for release. Another thing to note here is that interstitial ads can be loaded before it is actually called for display.\u00a0Make sure to set &#8220;autoShow&#8221; to false to disable automatic load of interstitial ads.\u00a0Default value for this flag is true so if this value is not set to false then ads will be automatically displayed once &#8220;prepare&#8221; is called and there is no need to call &#8220;show&#8221; method. You can call &#8220;prepareInterstitialFunc&#8221; and &#8220;showInterstitialFunc&#8221; anywhere in your code whenever you want to load and display interstitial ads. Banner ads can be\u00a0called as soon as device is ready.<\/li>\n<\/ul>\n<p>For further details on this plugin refer to\u00a0<a href=\"https:\/\/github.com\/ratson\/cordova-plugin-admob-free\" target=\"_blank\">github<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The steps are as following Open your app in Intel XDK and go to CORDOVA HYBRID MOBILE APP SETTINGS section Click on &#8220;Add Plugins to this project&#8221; and search for the plugin &#8220;cordova-plugin-admob-free&#8221; in npm. Click &#8220;Add Plugin&#8221; which adds plugin to the project. Open your index.html and add following code &lt;script&gt; document.addEventListener(&#8220;deviceready&#8221;, onDeviceReady, false); function onDeviceReady() { initAd(); showBannerFunc(); } \/\/initialize the goodies function initAd(){ admob.banner.config({ id: &#8216;ca-app-pub-3940256099942544\/6300978111&#8217;, adSize: window.plugins.AdMob.AD_SIZE.BANNER }); admob.interstitial.config({ id: &#8216;ca-app-pub-3940256099942544\/1033173712&#8217;, autoShow: false }); \/\/ Create banner admob.banner.prepare() } \/\/display the banner function showBannerFunc(){ admob.banner.show(); } \/\/prepare the interstitial function prepareInterstitialFunc(){ admob.interstitial.prepare(); } \/\/display the interstitial function showInterstitialFunc(){ admob.interstitial.show(); } &lt;\/script&gt; Replace banner and interstitial ad code id with\u00a0yours. The code in the example is given by Google to test the ads\u00a0which displays placeholder ads for testing.\u00a0This can be used during\u00a0development and testing. Replace it with your ad codes for release. Another thing to note here[&#8230;]<\/p>\n","protected":false},"author":5,"featured_media":293,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,3,13,6],"tags":[],"class_list":["post-480","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-html5","category-intel-xdk","category-plugin"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/480","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/comments?post=480"}],"version-history":[{"count":4,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/480\/revisions"}],"predecessor-version":[{"id":488,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/posts\/480\/revisions\/488"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media\/293"}],"wp:attachment":[{"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/media?parent=480"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/categories?post=480"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.netexl.com\/blog\/wp-json\/wp\/v2\/tags?post=480"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}