Nuxt.jsにGoogle Adsenseを導入する

  • 公開日アイコン
Nuxt.jsにGoogle Adsenseを導入する メイン画像

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-###########の箇所が該当する。必須項目。
  • pageLevelAdstrue 自動広告を有効にする(デフォルトは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でスタイルを付ける。レスポンシブ対応の場合は特に設定する必要はない。

参考ページ


Ad Area