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>
コンポーネントにはプロパティが指定できる。
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アドセンスを導入するときに、これだけは気をつけろ! - 独学プログラマ