Programming / Travel / Liquor

Nuxtで構築したサイトでGoogle AdSenseの広告を掲載する方法

Nuxt Google AdSense

Nuxtで構築したサイト(本ブログ)でGoogle AdSenseを掲載する方法について紹介します。

Nuxt-AdSense統合ライブラリを使う

AdSenseを使うにあたって、自前で実装することも可能ですが、ありがたいことにNuxtとAdSenseを連携できるライブラリが公式から提供されているのでそれを使います。

ライブラリによってAdSenseの広告ユニットをNuxtのコンポーネントとして簡単に使えるようになります。

ただし、後述しますがこのライブラリ、公式提供なのですがあまりメンテされていなく、、広告ユニットのオプション指定などで一部AdSenseの仕様に追いついていない部分があります。連携自体は問題なく可能で、AdSense広告も表示できるのですが、私は公式リポジトリをforkして修正したものを使うようにしました。

adsense-moduleを追加する

プロジェクトにライブラリを追加します。

yarn add @nuxtjs/google-adsense

adsense-moduleのセットアップ

nuxt.config.jsのmoduleセクションへ設定を追記します。任意でGoogle Analyticsとの連携オプションも指定可能です。

export default {
  modules: [
    [
      "@nuxtjs/google-adsense",
      {
        id: "ca-pub-XXXXX",  // Google AdSense クライアントID(必須)
        analyticsUacct: "UA-XXXXX",  // analyticsアカウントID(オプション)
        analyticsDomainName: "knote.life"  // analyticsアカウントドメイン(オプション)
      }
    ]
  ]
}

<adsbygoogle />コンポーネントを使う

これで設定周りは完了です。非常に簡単に統合できます。

広告は<adsbygoogle />を使い表示させます。このコンポーネントを自サイトの広告を表示させたい場所に追加するだけです。またこのコンポーネントに対して、いくつかpropsで値を渡す必要があります。

<adsbygoogle
      ad-slot="XXXXXX"
      ad-format="fluid"
      ad-layout="in-article"
      full-width-responsive="false"
/>

例えば、本ブログの記事内広告では上記のようにpropsを渡しています。最低限上記のpropsで問題なく利用可能ですが全量は公式リポジトリのReadMeを参照ください。propsの意味は↓のようになっています。

  • ad-slot:広告ユニットID(必須)
  • ad-format:ネイティブ広告のサイズ(デフォルトはauto)
  • ad-layout:広告レイアウト
  • full-width-responsive:全幅オプション

ディスプレイ広告ユニットの場合は以下のように指定しています。

<adsbygoogle
      ad-slot="XXXXXX"
      ad-format="auto"
      full-width-responsive="false"
/>

propsにセットする値は基本的にはGoogle AdSenseで広告ユニットを作成した時に生成されるコードから取得すればOKです。

ただし、上記のpropsのfull-width-responsive現在のバージョンのライブラリでは指定できません。これが最初に書いた、AdSenseの仕様に追い付いていない部分になります。このオプションはtrueにセットすると問答無用で広告が全幅表示されてしまいます。サイトデザインの都合もあるのでこれはfalseにしておきたかったので、最新バージョンのライブラリをforkして上記の全幅オプションを設定できるように修正したバージョンのものを利用するようにしました。なお全幅オプションの設定値は「true/false」ですが、文字列として渡す必要があるので注意が必要です。

Googleによるとモバイルで縦表示時に全幅表示の場合のほうが収益に効果的らしいのですが、どうなんでしょうかね。(誤タッチしてるだけなんじゃ。。。)

ちなみに修正したリポジトリは以下です。もし同じように公式をforkして修正して使われる場合はpackage.jsonのバージョン指定を間違えないように注意してください(forkしたリポジトリを指定)

おわりに

NuxtとGoogle AdSenseを統合する方法について書きました。一部本家AdSenseの仕様に追い付いていない部分があるので注意が必要ですが、Nuxt公式で提供されているライブラリを利用すればかなり簡単に統合可能です。

About
K

旅行とお酒、そしてプログラミングが大好きなエンジニアです。

バックエンド、言語としてはJava(Spring FW)・Cが専門ですが、最近はVue/Nuxtをはじめとするフロントエンドまわりも勉強中。

旅行は国内・海外問わず、海外旅行は現在12か国、国内は色々。東南アジアの旅行ならカンボジアが大好き(3回ほど渡航)

お酒はビール・ウイスキー・日本酒があればOK。

Portfolio

QT Visualizer

Portfolio Site

プライバシーポリシー

Frontend by Nuxt & Vuetify / Contents by Prismic.io

© 2019 K note.life