masalibの日記

システム開発、運用と猫の写真ブログです

Angular adsenseを入れてみる

単純にテンプレートにadsenseタグを書いたら実行されなかった
angularのコンパイル時に消えているらしいのでモジュールをいれて対応する

1・モジュールのインストール

いつもどおりプロジェクトのフォルダに移動して

npm install ng2-adsense --save

インストールする

2・index.htmlにadsenseのjsを追加

src/index.htmlにjsを読み込ませる

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

f:id:masalib:20170819024337j:plain

3・NgModuleに追加

src/app/app.module.tsにng2-adsenseを読み込ませる

NgModuleにimportさせる

    ・
import { AdsenseModule } from 'ng2-adsense';
    ・
    ・
    AngularFireModule.initializeApp(firebaseConfig),
    AdsenseModule.forRoot({
          adClient: 'ca-pub-1411576193652714',
          adSlot: 3322118132
        }),

f:id:masalib:20170819025316j:plain

4・テンプレートの修正

広告を貼りたいところに

<ng2-adsense></ng2-adsense>

をはる
f:id:masalib:20170819025935j:plain

めんどくさいのは
開発環境では確認できない所です

この時点でのソース
GitHub - masalib/angular-firebase-study at 4b2a439c53d3cf5ee9698bd73823042e4f2fb25b

https://drive.google.com/open?id=0B5Ld1mXpv3XbR2VNZWZxcl95UFk