Nuxt3でGoogleアドセンス広告を表示する

Nuxt3で構築されたサイトにGoogleアドセンスの広告を表示する具体的な手順をご紹介します。プラグインは使いません。

メインスクリプトを読み込む

Googleアドセンスのメインスクリプトを読み込みます。このスクリプトはページ内のどこかで一度だけ読み込めばいいので、nuxt.config.tsで読み込むのが1番簡単です。

以下がサンプルコードです。

export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          async: true,
          src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-****",
          crossorigin: "anonymous",
          tagPosition: "bodyClose",
        },
      ],
    },
  },
});

特定のページ（例：/pages/blog/[slug].vue）やレイアウトファイル（例：/layouts/blog.vue）でだけスクリプトを読み込みたい場合はuseHeadのscriptで読み込みます。

以下がサンプルコードです。

<script lang="ts" setup>
useHead({
  script: [
    {
      async: true,
      src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-****",
      crossorigin: "anonymous",
      tagPosition: "bodyClose",
    },
  ],
});
</script>

広告タグを追加する

ページ下部やサイドバーなど広告を掲載したい場所に<ins>タグを追加します。

以下はサンプルコードです。

<template>
  <div>
    <ins
      class="adsbygoogle"
      :style="{ display: 'block' }"
      data-ad-client="ca-pub-****"
      data-ad-slot="1234567890"
      data-ad-format="auto"
      data-full-width-responsive="true"
    ></ins>
  </div>
</template>

ページ広告を表示する

最後に、実際に広告を表示するために、広告を表示するページの<script>タグ内に以下のコードを追加します。

onMounted(() => {
  (window.adsbygoogle = window.adsbygoogle || []).push({});
});

onMountedはコンポーネントの初期レンダリングが完了したときに実行される関数で、この関数内でGoogleアドセンス広告のコードの下部にある(window.adsbygoogle = window.adsbygoogle || []).push({});を実行することで広告が表示される仕組みです。

TypeScriptのエラー回避と併せて、完全なコードの形は以下になります。

<script lang="ts" setup>
onMounted(() => {
  // @ts-ignore
  (window.adsbygoogle = window.adsbygoogle || []).push({});
});
</script>

注意点

Nuxt3に限った話ではありませんが、サーバーサイドレンダリング（SSR）とクライアントサイドレンダリング（CSR）を併せ持つフレームワークでGoogleアドセンス広告を配信する際、このセクションで登場した(window.adsbygoogle = window.adsbygoogle || []).push({});を実行するタイミングと実行する場所が重要です。

例えば、レイアウトファイル（例：/layouts/blog.vue）に今回のonMountedのコードを追加し、definePageMetaで特定のページ（例：/pages/blog/[slug].vue）に適用するのはNGです。

なぜなら、レイアウトファイルは1度しかレンダリングされないので、https://example.com/blog/hogeにもhttps://example.com/blog/fooにも同じ広告が配信されるからです。

（逆に、この性質を知っていて、全てのページで初回に配信された広告が表示されるようにするのはアリです）

これを避けるには、この場合、/pages/blog/[slug].vueファイルにonMountedの処理を追加します。そうすることにより、NuxtLinkでのリロードなしのページ遷移などでも、その都度ちゃんと新しい広告が配信されるようになります。