Nuxtで作ったサイトにnpmでGoogle AdSenseを追加する

このブログをNetlify + Nuxtへ移行する時、Google AdSenseも移しました。
Adsenseの広告ユニットのコードを貼り付けていくと、似たコードが至る所にあり嫌なのでいい方法はないかと調べました。

Nuxtのためのモジュールが見つかったのでその使い方を解説していきます。

@nuxtjs/google-adsense

nuxt-communityからGoogle AdSenseのためのモジュールgoogle-adsense-moduleが提供されているので、それを使います。

ライセンス形態はMIT Licenseなので大丈夫ですね。

使い方は簡単です。 インストール後にnuxt.config.jsへ記述して、挿入したいところに<adsbygoogle/>を追加するだけです。

以下、GitHubを参考に解説していく。 尚、ドメインの取得やGoogle AdSenseへの登録と審査はすでに終えているものとします。

install

npm install --save @nuxtjs/google-adsense

--saveでpackage.jsonに記録している。 このブログはNetlifyを使ってホスティングしているため必須。

モジュールをnuxt.config.jsに記述する

nuxt.config.js

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

idにAdSenseのidを記述する。

idはAdSenseのアカウント情報にあるサイト運営者 IDです。 ####はpub-から続く数字が入ります。先頭のca-は必ずつけてください。

自動広告はデフォルトでオフになったいるため、使う場合はpageLevelAds: trueを追加します。

広告を挿入する

広告の場所を指定するには、テンプレートの中に<adsbygoogle/>を追加します。

また、v-bindを使っていくつかのパラメータを渡せます。

<template>
  <!-- 広告の挿入 -->
  <adsbygoogle />
  <!-- 指定する広告ユニットの挿入 -->
  <adsbygoogle v-bind:ad-slot="'1234567890'" />
</template>

広告ユニットを指定する場合は、ad-slotに広告ユニットのIDを渡します。 この時、IDは数値ではなく文字列として渡してあげる必要があります。そのため、'シングルクォーテーション'などで囲ってください。

<template>
  <!-- 広告ユニットの挿入 OK -->
  <adsbygoogle :ad-slot="'1234567890'" />
  <!-- 広告ユニットの挿入 NG -->
  <adsbygoogle :ad-slot="1234567890" />
  <!--  ERROR  [Vue warn]: Invalid prop: type check failed for prop "adSlot". Expected String, got Number. -->


  <!-- これも多分いける -->
  <adsbygoogle data-ad-slot="1234567890" />
</template>

はじめ:ad-slotでエラーが出るためdata-ad-slot="1234567890"としていましたが、広告が表示されていました。 確証はありませんので、OKの方法を利用してください。

いくつかのpropの抜粋と雑解説。正確には公式をみてください。

おわりに

NuxtでAdSenseを利用する（おそらく）最適解が見つかってスッキリしました。

また、このブログのNetlify + Nuxtの構成もまとめていきたいです。

参考

• google-adsense-module

書籍