Nuxt.jsにGoogle Adsenseを導入する

2021年02月26日

Ad Area

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の設定

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 />を配置する。

adsense.vue

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