Nuxt.jsにGoogle AdSenseを導入する

2020.12.07
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に設定する

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>



無事表示されました!

おすすめ