Nuxt.js で Google Adsense を導入する
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 を利用するときは使ってみてください。