angular

AngularでGoogle Adsenseの広告を表示する

Google Adsenseのページから広告コードを作成してAngularのコンポーネント内のHTMLファイルに貼り付けても、広告は表示されません。

今回はAngularでも広告を表示する方法をさくっとご紹介します。

ng2 adsenseをインストール

今回はng2-adsenseというモジュールを使用します。インストールは至って簡単

npm install ng2-adsense

上記コマンドをAngularプロジェクトのトップから実行するだけです。

どこでも同じコードが貼れるように共通モジュールを作成

ng2 adsenseのREADMEどおりに広告を表示させたい場所に

<ng-adsense></ng-adsense>

を表示させても良いのですが、今回は

  • どのモジュール、どのコンポーネントに貼り付けても同一のセンタリングされたコードを貼れるようにしたい
  • 貼り付ける場所によって広告のスロットNOを変えたい
  • stagingとproductionで貼るコードを変化させたい

この3つの需要に応えるため、コードをいったん共通モジュール内の共通コンポーネントとして包み込むことにします。

共通モジュールの作成

まずは共通モジュールを作成します。Angularプロジェクトのトップディレクトリから

ng g module shared

上記コマンドを実行しsharedモジュールという共通モジュールを作ります。

このモジュール内でng2 adsenseプラグインを利用するので、インポートします。

@NgModule({
  imports: [
    CommonModule,
    AdsenseModule.forRoot({
      adClient: 'ca-pub-xxxxxxxxxxxxxxxx',
    })
  ],
})

adClientはユーザー一人につき一つしか割り当てられないため基本的に不変です。なのでモジュールのインポートの段階で設定しておきます。

adSlotは広告一つにつき一つ割り当てられるので、同じアプリに複数の広告を貼り付ける場合、複数存在する可能性が出てきます。なので、コンポーネントレベルで設定していくことにします。

adsenseコンポーネントの作成

sharedモジュールの中に、プロジェクト内ならばどこでも使えるadsenseコンポーネントを作成します。下記コマンドを実行します。

ng g component shared/adsense

他のモジュールでも使えるように、コンポーネントをexportsします。

@NgModule({
  ...
  declarations: [AdsenseComponent],
  exports: [
    AdsenseComponent,
  ]
})

adsense.component.tsファイルには以下のように記述します。

export class AdsenseComponent implements OnInit {

  @Input() slotNumber: number;

  devMode = true;

  constructor() {
    this.devMode = isDevMode();
  }

  ngOnInit() {
  }

}

ここでのポイントは、広告のslotNumberを外部から入力できるように、クラス変数slotNumberの頭に@Input()をつけています。

また標準では広告をtestModeで動かすために、devModeをデフォルトでtrueにしています。

次にadsense.component.htmlファイルを見ていきます。

<div>
  <ng-container *ngIf="devMode">
    <ng-adsense
      [adSlot]="slotNumber"
      [adtest]="'on'">
    </ng-adsense>
  </ng-container>
  <ng-container *ngIf="!devMode">
    <ng-adsense
      [adSlot]="slotNumber">
    </ng-adsense>
  </ng-container>
</div>

devModeがtrueの時(テスト環境)は上の広告が、本番環境では下の広告が表示されます。

自分の場合、広告タイプはレスポンシブしか使わないので、基本的にセンタリングして表示します。なのでadsense.component.cssファイルには

div {
  text-align: center;
}

上記コードでセンタリングします。

広告の貼付け

実際に広告を貼り付けてみます。と言っても至って簡単です。まずはSharedModuleをインポートします。

@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    RouterModule.forRoot(routes),
  ],k
  declarations: [
  ...

その後広告を表示させたい場所に下記コードを挿入するだけです。

<app-adsense [slotNumber]="123456789"></app-adsense>

slotNumberはご自身の広告のものを挿入する必要があります。slotNumberはAdsenseのページで確認できます。下画像のID10桁の数字がそれに該当します。

adsense

以上、AngularでGoogle Adsenseを表示させる方法でした。