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と連携が不要な方は、analyticsUacctとanalyticsDomainNameは記載しなくて良いです。

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に正確なwidthやheightを設定する場合は、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を導入する方法を解説してきました。
ただブログを書くだけではモチベーションが続かなくなると思うので、これを機会に「どういう記事に価値が高いのか？」や「どういう文章が必要とされているか？」を考えてみてもいいかもしれません。