IT

Angular(Ionic)でAdsenseを導入する

環境

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
Faust
1980年代生まれで東京都府中市育ち。大学は物理化学専攻してメーカへ。 Engineer of Python, Angular. Analyzing data and building app at Awesome Rainbows LCC. #SDGs #Python

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA