環境
Ionic:
Ionic CLI : 6.10.0 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/angular 5.1.1
@angular-devkit/build-angular : 0.901.7
@angular-devkit/schematics : 9.1.6
@angular/cli : 9.1.6
@ionic/angular-toolkit : 2.2.0
Capacitor:
Capacitor CLI : 2.1.2
@capacitor/core : 2.1.2
Utility:
cordova-res : not installed
native-run : 1.0.0
System:
NodeJS : v12.18.0 (/usr/local/bin/node)
npm : 6.14.6
OS : macOS Catalina
流れ
https://github.com/scttcper/ng2-adsense
を使用した。基本的には手順通りに行えば良くて手順は少ない
手順
Installする
npm install ng2-adsense
Indes.HTMLの<head></head>のした方に追加する
<script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>
こんなファイル構造の場合、app.module.tsではなくhome.module.tsに下記を追加する

import { AdsenseModule } from 'ng2-adsense';
@NgModule({
imports: [
AdsenseModule.forRoot({
}),
home.page.tsにも追加
import { AdsenseModule } from 'ng2-adsense';
そしたら、home.page.htmlに下記を追加すると表示される
<ng-adsense
[adClient]="'ca-pub-4xxxxx'"
[adSlot]="88979xxxx"
[height]="108"
なお、adClientとadSlotはadsenseのホームページから確認可能
下記画面の右下のボタンをクリックする。

ABOUT ME