Nuxt.jsにGoogle Adsenseを導入する方法

今回は、Nuxt.jsにGoogle Adsenseを導入する方法を解説します。
Adsenseはブログを収益化させる方法の1つです。是非これを機会に導入してみてください。

前提として、Google Adsenseにサイトを申請している必要があります。
もし、申請していない方は、Google Adsenseから、ご自身のサイトを申請してください。
※申請の許可には、時間がかかります。

@nuxtjs/google-adsenseをインストールする

@nuxtjs/google-adsenseを使って、Nuxt.jsにGoogle Adsenseを導入していきます。

yarn add @nuxtjs/google-adsense

nuxt.config.jsの設定

基本的に、Nuxt.jsプロジェクトにライブラリを追加する際は、nuxt.config.jsを編集していきます。

modulesプロパティを下記のように設定します。

export default {
  modules: [
    [
      "@nuxtjs/google-adsense",
      {
        id: "ca-pub-XXXXXXXXXXX",
        pageLevelAds: false, // 自動広告を表示させる場合
        analyticsUacct: "UA-XXXXXXXX-X", // Google Analyticsとの連携
        analyticsDomainName: "example.com", // Google Analyticsとの連携
      },
    ],
  ],
}

Analyticsと連携が不要な方は、analyticsUacctanalyticsDomainNameは記載しなくて良いです。

VueファイルにGoogle Adsenseを追加する

次に、実際に<template>の中にAdsense組み込んでいきます。

<template>
 <div>
  <adsbygoogle
   :ad-slot="'広告ユニットID'"
   :ad-style="{ display: 'block' }"
   :ad-format="'auto'"
  />
 </div>
</template>

ad-styleでアドセンスのstyleを変更することができます。

もし、ad-styleに正確なwidthheightを設定する場合は、ad-format''にしてください。height: auto !importantが自動で適用させるので、思うようにstyleが当たらない可能性があります。

サイドバーでGoogle Adsenseを表示する

一例ですが、サイドバーのwidthが290pxの場合、以下のようにstyleを当てることができます。

<template>
 <div>
  <adsbygoogle
   :ad-slot="'広告ユニットID'"
   :ad-style="gadStyle"
   ad-format=""
  />
 </div>
</template>
<script>
export default {
  data() {
    return {
      gadStyle: {
        display: "inline-block",
        width: "290px",
        height: "250px",
      },
    }
  },
}
</script>

上記を設定して本番環境にデプロイすると、Adsense広告が表示されます。
※審査に合格している必要があります。

Google Adsense 審査基準

Google Adsenseの審査に落ちてしまう方もいると思うので参考程度に、このブログが合格した時の状態を載せておきます。

  • 記事数: 約20記事
  • 記事の文字数: 1000~3000文字
  • 画像: 全て著作権フリー
  • プライバシーポリシーの設置
  • お問い合わせの設置

以上、Nuxt.jsにGoogle Adsenseを導入する方法を解説してきました。

ただブログを書くだけではモチベーションが続かなくなると思うので、これを機会に「どういう記事に価値が高いのか?」や「どういう文章が必要とされているか?」を考えてみてもいいかもしれません。