![](/images/thumb/google.jpg)
Photo by Lauren Edvalson on Unsplash
この記事は最終更新日から 3 年以上が経過しており、内容が古くなっている可能性があります。
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 アドセンスを導入するときに、これだけは気をつけろ! - 独学プログラマ
![Suzunatsu](/images/logo_person.png)
この記事がお役に立ちましたら、サポートをお願いします。
Suzunatsu Websiteをサポート