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

Question

在这个简单的 Codepen demo ，我有一个栏和一个 slider 。工作正常，但如果我添加 Google Adsense 代码，则显示会损坏。我应该如何插入 Adsense 代码才能在网页顶部显示广告。

我所说的“显示损坏”的意思是:条形图覆盖了 ionic 内容的开头(hello1 hello2)。我已经将 class="has-header" 放入 中。

注意，我将 Ionic 框架用于移动网站和(下一步)混合应用程序。我不希望广告在 native 代码中运行。我只需要在移动网站上展示 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>

ionic 页面的骨架:

1. 标题/AngularJS
2. Google 广告
3. 酒吧
4. ion-content
5. 内容
6. slider
7. 内容

Answer 1

我建议您使用 AdMob。我编写了这个支持 ionic 的 native 插件:https://github.com/appfeel/admob-google-cordova/wiki/Angular.js,-Ionic-apps 。此外，它还可以让您显示插页式广告。

ionic 插件添加 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>