在Ionic中断显示中插入Google Adsense代码

Question

在这个简单的Codepen演示中,我有一个条形和一个滑块.工作正常,但如果我添加谷歌的Adsense代码,那么显示就会被破坏.我应该如何插入Adsense代码以在网页顶部显示广告.

我的意思是"显示被破坏":条形图覆盖了离子内容的开始(hello1 hello2).我已经在<ion-content>中放了class ="has-header".

NB我为移动网站使用Ionic框架,并为混合应用程序使用(下一步).我不希望广告在本机代码中运行.我只需要在移动网站上显示Adsense广告.广告代码为:

    <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>

离子页面的骨架:

1. header/angularjs
2. 谷歌广告
3. 酒吧
4. 离子含量
   41. 内容
   42. 滑块
   43. 内容

Answer 1

我建议你使用AdMob.我写过这个支持离子的本机插件:https://github.com/appfeel/admob-google-cordova/wiki/Angular.js,-Ionic-apps.此外,它还可以让你显示插页式广告.

ionic plugin add cordova-admob

<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>