Nuxt.jsにGoogle AdSenseを導入する

NuxtのプロジェクトにGoogle AdSenseを導入する方法を記載します。

AdSenseのIDを用意

以下のようなGoogle AdSenseのIDを用意します。 ca-pub-#########

私の場合は既に他のサイトがあり、上記のIDを取得済みだったため、

AdSenseにログイン > サイト > サイトを追加 > サイトのURL入力

で取得しました。

AdSenseのモジュールを導入する

Nuxt公式でサポートしている @nuxtjs/google-adsense を導入します。

こちらのサイトさんで以下のように書かれているのでパッケージ導入しちゃうのが無難なようです。

最初は「モジュールを使わなくてもいけるのでは？」と思い、自力でheadタグに認証コードを埋め込みました。 広告を表示することには成功しましたが、ページが切り替わる度に表示したり、しなかったり。。 結果、うまくいきませんでした。

Nuxt.jsにGoogleアドセンスを導入するときに、これだけは気をつけろ！ - 独学プログラマより引用

$ yarn add @nuxtjs/google-adsense

nuxt.config.jsに設定する

{
  modules: [
    ['@nuxtjs/google-adsense']
  ],
 
 'google-adsense': {
    id: 'ca-pub-#########'
  }
}

ここまでで開発環境でも以下のようなscriptタグが導入されています

AdSenseの審査に出す

いったんAdSenseの審査を待ちます！

審査が無事通ると以下のようなメールが届きます！

私の場合1週間ちょっとしてからメールが届いたのでヒヤヒヤでしたが良かった。。！

広告を表示する

自動広告をAdSense側でONにしているとすぐに広告が表示されるようになります。

自分で作成した広告を表示する場合はコード生成ツールで表示される data-ad-slot の値を使います。

この値を <adsbygoole> タグの ad-slot にセットすれば

<template>
  <adsbygoogle ad-slot="123456789" />
</template>

無事表示されました！