Nuxt.jsにGoogle Adsenseを導入する

Nuxt.js に Google Adesense を導入しよう！

Nuxt.js のブログで Web 技術について意欲的に執筆しようという人はいても、アフィリエイトをバリバリやろうという人は少ないだろう。にもかかわらず、Nuxt.js 専用の Google Adesense のパッケージは存在する。Nuxt.js でも Adsense の需要（だけ）はあることが分かる。

@nuxtjs/google-adsense のインストール

npm install --save-dev @nuxtjs/google-adsense
// or
yarn add --dev @nuxtjs/google-adsense

nuxt.config.js の設定

export default {
  modules: [
    "@nuxtjs/google-adsense",
    {
      id: "ca-pub-###########",
      pageLevelAds: true,
      analyticsUacct: "UA-XXX-X",
      analyticsDomainName: "example.com",
    },
  ],
};

サイト申請時に発行されたscriptタグをサイトのheadタグ内に表示させて審査結果を待つ。

• id…Gooogle Adsense のサイト運営者 ID。scriptタグ内にあるca-pub-###########の箇所が該当する。必須項目。
• pageLevelAds…true 自動広告を有効にする（デフォルトはfalse）。
• analyticsUacct…Google Analytics と連携させる場合に必要（恐らく GA4 には対応していない）。
• analyticsDomainName…同上。

Analytics のコンポーネントを配置

審査に通ったら、テンプレート内の広告を表示させたい箇所に<adsbygoogle />を配置する。

<template>
  <adsbygoogle
    :ad-slot="'012345678'"
    :ad-format=""
    :ad-style="display: 'inline-block', width:'300px', height:'250px'"
  />
</template>

コンポーネントにはプロパティが指定できる。

• ad-slot…広告ユニットの ID。文字列で指定する（'シングルクオーテーション'などで囲う必要あり）。
• ad-format…広告のフォーマット（デフォルト値はautoでレスポンシブ広告）。
• ad-style…広告内の<ins>タグにインライン CSS でスタイルを付ける。レスポンシブ対応の場合は特に設定する必要はない。

参考ページ

• nuxt-community/google-adsense-module: Google AdSense module for Nuxt.js
• Nuxt で作ったサイトに npm で Google AdSense を追加する - suzu6.net
• Nuxt.js に Google アドセンスを導入するときに、これだけは気をつけろ！ - 独学プログラマ

---