In this simple Codepen demo, I have a bar and a slider. Works fine, but if I add the Google Adsense code, then display is broken. How should I insert the Adsense code to display the Ad at the top of the web page.
What I mean by "display is broken": the bar overlays the start of the ion-content (hello1 hello2). I already put class="has-header" in the <ion-content>.
NB I use Ionic framework both for the mobile site, and (next step) for the hybrid app. I don't expect the ad to work in the native code. I just need to display the Adsense ad on the mobile web site. Code of the ad is:
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- hybride_320x50 -->
<ins class="adsbygoogle"
style="display:inline-block;width:320px;height:50px"
data-ad-client="ca-pub-4134311660880303"
data-ad-slot="1861097476"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
Skeleton of the ionic page:
I would recommend you to use AdMob. I've written this native plugin which supports ionic: https://github.com/appfeel/admob-google-cordova/wiki/Angular.js,-Ionic-apps. Moreover it will also let you show interstitials.
ionic plugin add com.admob.google
<script src="lib/angular-admob/angular-admob.js"></script>
<script>
var app = angular.module('myApp', ['admobModule']);
app.config(['admobSvcProvider', function (admobSvcProvider) {
// Optionally you can configure the options here:
admobSvcProvider.setOptions({
publisherId: "ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB",
interstitialAdId: "ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII",
autoShowBanner: true,
autoShowInterstitial: true
});
}]);
app.run(['admobSvc', function (admobSvc) {
admobSvc.createBannerView();
admob.requestInterstitialAd();
// Handle events:
$rootScope.$on(admobSvc.events.onAdOpened, function onAdOpened(evt, e) {
console.log('adOpened: type of ad:' + e.adType);
});
}]);
</script>
one fast solution is add the following class to your style
.adsbygoogle {
position: absolute;
z-index: 10;
}