ロゴテキスト ロゴ

    Nuxt.jsにGoogle AdSenseを導入する

    Nuxt.jsにGoogle AdSenseを導入する

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

    AdSenseのIDを用意

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



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

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

    で取得しました。

    ca-pubからIDを取得

    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のscriptタグが導入された

    AdSenseの審査に出す

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

    AdSenseの審査を待つ



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

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

    審査が通った事のメール

    広告を表示する

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



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

    data-ad-slotの値を使う


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

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


    無事表示されました!

    AdSenseの広告が表示された
    プロフィールの背景画像 プロフィール画像
    Yuki Takara
    都内でフリーランスのエンジニアをやってます。フロントとアプリ開発メインに幅広くやってます。