Nuxt.jsにGoogle Adsenseを導入する方法

created 2020/09/22updated 2021/03/06

今回は、Nuxt.jsにGoogle Adsenseを導入する方法を解説します。 Adsenseはブログを収益化させる方法の1つです。是非これを機会に導入してみてください。
前提として、Google Adsenseにサイトを申請している必要があります。 もし、申請していない方は、Google Adsenseから、ご自身のサイトを申請してください。 ※申請の許可には、時間がかかります。

@nuxtjs/google-adsenseをインストールする

@nuxtjs/google-adsenseを使って、Nuxt.jsにGoogle Adsenseを導入していきます。

bash
yarn add @nuxtjs/google-adsense

nuxt.config.jsの設定

基本的に、Nuxt.jsプロジェクトにライブラリを追加する際は、nuxt.config.jsを編集していきます。
modulesプロパティを下記のように設定します。

js
export default { modules: [ [ "@nuxtjs/google-adsense", { id: "ca-pub-XXXXXXXXXXX", pageLevelAds: false, // 自動広告を表示させる場合 analyticsUacct: "UA-XXXXXXXX-X", // Google Analyticsとの連携 analyticsDomainName: "example.com", // Google Analyticsとの連携 }, ], ], }

Analyticsと連携が不要な方は、analyticsUacctanalyticsDomainNameは記載しなくて良いです。

VueファイルにGoogle Adsenseを追加する

次に、実際に<template>の中にAdsense組み込んでいきます。

html
<template> <div> <adsbygoogle :ad-slot="'広告ユニットID'" :ad-style="{ display: 'block' }" :ad-format="'auto'" /> </div> </template>

ad-styleでアドセンスのstyleを変更することができます。

もし、ad-styleに正確なwidthheightを設定する場合は、ad-format''にしてください。height: auto !importantが自動で適用させるので、思うようにstyleが当たらない可能性があります。

サイドバーでGoogle Adsenseを表示する

一例ですが、サイドバーのwidthが290pxの場合、以下のようにstyleを当てることができます。

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