Nuxt3のサイトにGoogle Adsenseの自動広告を入れる方法

Nuxt3では設定ファイルに書くだけで簡単に自動広告を追加可能

Javascript系のフレームワークでは、同じくJavascriptで動作するGoogle Adsenseの広告を入れるのに色々手間があったりしましたが、Nuxt3では設定ファイルから簡単に挿入が可能です。

 app:{
   head: {
     script: [{ src: "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXX", crossorigin: "anonymous" }],
   }
 },

これだけでAdsense自動広告が入ります。

ただし、デメリットもあって、NuxtlinkでのNuxt管理下のページ遷移（ルート変更）で広告の更新がされません。あくまでブラウザがロードされたタイミングで切り替えをする形です。そのため、ユーザーのサイト巡回率が高いサイトでは自動広告がデメリットになります。

プラグインを使うとより便利

ユーザーのサイト内巡回が多いサイトの場合は、@nuxtjs/google-adsenseというプラグインを使って個別に広告を入れた方が確実です。こちらはNuxtlinkでのページ遷移に対応しています。

こちらのプラグイン、ソース的には「//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js」を自動ロードしているので、自動広告が入ります。ただし、自動広告はルート変更による更新に対応していないため、リロードされるまで同じ広告が表示されます。

対処方法としては、「絶対に広告を入れたい」という場所には、@nuxtjs/google-adsenseのコンポーネントを挿入しておいて、それ以外の部分を自動広告に任せるという感じでしょうか。

個人的には、この使い方が一番バランスが良いので、「@nuxtjs/google-adsenseコンポーネント + 自動広告」という使い方で運用しています。