mintsu's blog

Nuxt.js で Google Adsense を導入する

2019-06-19 01:18:00
フロントエンド

Nuxt.js でGoogle Adsenseを導入する

Nuxt.jsの環境でGoogle Adsenseを導入する方法について紹介します。 Nuxt.jsだとSPAのサイトだったりするので、その場合Google Adsenseのコードをどう貼ればいいのか、正しく動くのか不安になります。
nuxt-community から google-adsense-module というものが利用できるので、そちらを利用することで細かいことを考えずにGoogle Adsenseを導入できます。
今回導入してみたので導入方法について記載していきます。

目次

Nuxt Google Adsense モジュール

Nuxt.js は SPA として動作していたりするため、画面遷移時等にアドセンスがうまく読み込まれない場合があります。
そのあたりを気にしないで、Google Adsense を利用できるようになる nuxt-community から google-adsense-module というものがあるのでこちらを導入していきます。
nuxt-community/google-adsense-module: Google AdSense module for Nuxt.js

インストール

Nuxt.js で Google Adsense を導入するには@nuxtjs/google-adsenseを入れます。

yarn add @nuxtjs/google-adsense

設定

@nuxtjs/google-adsense が有効になるように nuxt.config.js の修正をします

nuxt.config.js

  /*
  ** Nuxt.js modules
  */
  modules: [
    [
      '@nuxtjs/google-adsense',
      {
        id: 'ca-pub-###########'
      }
    ]
  ],

id の部分に Google Adsense の ca-pub から始まる「サイト運営者ID」を指定します。
これだけで、head タグ内自動でGoogle Adsenseのコードが埋め込まれます。

詳細設定

id 以外にもいくつかの設定値があるので、紹介しておきます

オプション名 説明
id String 前述した通り サイト運営者IDを指定します
pageLevelAds Boolean 「ページ単位の広告」を有効にします。
具体的には アンカー広告やモバイル全画面広告を有効にするかどうかの設定です。
設定値は有効にする場合は true を指定。無効にする場合は false を設定します。 デフォルトは false が指定されています。
tag String VueのAdsenseコンポーネントのタグ名になります。 デフォルトは adsbygoogle になっています。
任意の位置に広告を出したい場合に利用します。
includeQuery Boolean false を設定した場合 $route.path の変更がチェックされます。
true を設定した場合 $route.query の変更もチェックします。 デフォルトは false が指定されます。
analyticsUacct String Google Analytics と連携する場合 Google AnalyticsのアカウントIDを指定します。 Analyticsのアカウントは UA-#######-# のようなものです。
analyticsDomainName String Google Analytics と連携する場合にドメインを指定します。
例) example.com.
test Boolean true または false で設定。デフォルトは trueを設定すると本番用のビルド時でも強制的にテストモードで動作します。
設定しない場合はNuxtのdevでの動作時のみテストモードで動作します。

上記項目をいくつか指定した例を下記に示します。

  /*
  ** Nuxt.js modules
  */
  modules: [
    [
      '@nuxtjs/google-adsense',
      {
        id: 'ca-pub-###########',
        pageLevelAds: true,
        tag: 'adsbygooglea',
        includeQuery: false,
        analyticsUacct: 'UA-#######-#',
        analyticsDomainName: 'example.com'
      }
    ]
  ],

任意の位置に広告を入れる

自動広告を使わずに、任意の位置に広告ユニットを配置する場合には Adsenseコンポーネントを利用します。
上述の詳細設定の tag の部分を変えていなければ <adsbygoogle> タグを利用できます。

例)

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

ad-slot には広告ユニットのIDを指定します。

まとめ

今回の内容をざっくりまとめます。

  • @nuxtjs/google-adsense のインストール
  • nuxt.config.js でgoogle-adsense モジュールの設定
  • 任意の位置に広告ユニットを出す場合は Adsense コンポーネントをテンプレートで利用

Nuxt.js で Google Adsense を利用するときは使ってみてください。