Angularでアドセンス広告を表示させる方法を解説

2023 9/12

2023年4月6日 2023年9月12日

Angularでグーグルアドセンス広告を表示させたいけどどうすればいいんだろう…？

この記事では上記の悩みを解決します。

アプリを作ったけど、収益も考えてグーグルアドセンスをアプリに貼る方法になります。

前提としては、グーグルアドセンスの審査に通っていることです。

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

nd2-adsenceをインストールする

こちらこの公式をもとに、nd2-adsenceをインストールします。

npm install ng2-adsense

次に、index.htmlの<head></head>間に以下のようにアドセンスのscriptコードを追加します。

<!doctype html>
<html lang="ja">
<head>
  <script async src=//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js></script>
</head>
<body class="mat-typography">
  <app-root></app-root>
</body>
</html>

インストールができたら、モジュールをimportします。以下は例です。

import { AdsenseModule } from 'ng2-adsense';

@NgModule({
  imports: [
    AdsenseModule.forRoot({
      adClient: 'ca-pub-7430542161899789',
      adSlot: 7552870531,
    }),
    ...

adClientとadSlotには、各自グーグルアドセンスの情報を記載します。

アドセンスの情報を取得する手順としては、

①アドセンスのコード取得

②data-ad-client、data-ad-slotに記載されている内容をコピペし、それをadClientとadSlotに適用させる

AdSense コードを取得してコピーする方法

例えば、アドセンスのコード取得よりコードを確認すると、以下のようになっているかと思います。※以下は広告のmultiple広告を作成した時のコード取得内容

××の部分は対応する数字を記入

<script async src="××"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="autorelaxed"
     data-ad-client="ca-pub-××××××××××××"
     data-ad-slot="××××××××××"></ins>
<script>

あとは広告を表示させたい部分に、以下を記載すればその部分に広告が表示されます。