Google-adsense · Nuxtモジュール

注意: このブランチはNuxt 3互換モジュール用です。Nuxt 2のサポートについては、legacy-v2 ブランチを確認してください。

Nuxt.js用のGoogle AdSense統合。ページルートが変更されるたびに広告が更新されます。

セットアップ

yarnまたはnpmを使用して、プロジェクトに@nuxtjs/google-adsense依存関係を追加します。
nuxt.config.jsのmodulesセクションに@nuxtjs/google-adsenseを追加します。

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

トップレベルオプションの使用

{
  modules: [
    ['@nuxtjs/google-adsense']
  ],

 googleAdsense: {
    id: 'ca-pub-#########'
  }
}

ランタイム設定の使用

{
  modules: [
    ['@nuxtjs/google-adsense']
  ],

  googleAdsense: {
    onPageLoad: false,
    pageLevelAds: false,
  },

  publicRuntimeConfig: {
    googleAdsense: {
      id: process.env.GOOGLE_ADSENSE_ID,
      test: process.env.GOOGLE_ADSENSE_TEST_MODE === 'true',
    },
  },
}

非同期広告コード（//127.0.0.1/pagead/js/adsbygoogle.js）は、ページの<head>セクションに自動的に追加されます。

構成オプション

オプション	タイプ	説明
`id`	文字列	Google AdSenseパブリッシャーのクライアントID（例：`ca-pub-#########`）。テストモードでない場合は必須。
`adFormat`	文字列	グローバルなデフォルトの広告フォーマットを設定します。コンポーネントのプロパティで上書きできます。
`analyticsDomainName`	文字列	Google Analyticsアカウントのドメイン（AdSenseとAnalyticsを連携する場合、例：`example.com`）。
`analyticsUacct`	文字列	Google AnalyticsアカウントID（AdSenseとAnalyticsを連携する場合、例：`UA-#######-#`）。
`hideFilled`	真偽値	`false`の場合、未記入の広告は非表示になりません。`true`の場合、未記入の広告は非表示になります。デフォルトは`false`です。
`includeQuery`	真偽値	`false`の場合、変更は`$route.path`のみがチェックされます。`true`に設定すると、`$route.query`も考慮されます。デフォルトは`false`です。
`onPageLoad`	真偽値	ページ読み込み後にAdSenseスクリプトをロードします。デフォルトは`false`です。
`overlayBottom`	真偽値	AdSenseアンカー広告を下部に表示するように有効にします。デフォルトは`false`です。詳細については、AdSenseドキュメントを参照してください。
`pageLevelAds`	真偽値	AdSenseページレベル広告を有効にします。デフォルトは`false`です。詳細については、AdSenseドキュメントを参照してください。
`pauseOnLoad`	真偽値	GDPRに従ってCookieまたはその他のローカルストレージの使用に関するユーザーの同意を得るために、広告リクエストを一時停止します。詳細については、AdSenseドキュメントを参照してください。`false`。
`tag`	文字列	AdSenseコンポーネントのタグ名。デフォルトは`adsbygoogle`。
`test`	真偽値	AdSenseをテストモードに強制します（下記参照）。

テストモード

AdSenseモジュールは、Nuxtをdevモードで実行している場合、自動的にtestモードに切り替わります。ただし、構成オプションtestをtrueに設定することで、本番環境でもテストモードを維持できます。

テストモードでは、AdSense TOSに違反しないように、テストパブリッシャーIDが使用されます。

テスト広告は通常、空のスペースとして表示されますが、正しい寸法になります（つまり、レンダリングされた広告に必要な正しいスペースを占有します）。

使い方

広告を配置したい場所に<Adsbygoogle />コンポーネントを挿入します。

<Adsbygoogle />コンポーネントは、指定された（最小/最大）幅と（最小/最大）高さを持つ（メディアクエリに基づいて指定できる）コンテナ要素内に配置するか、<Adsbygoogle />コンポーネントのスタイルまたはクラスを使用して、広告を特定のサイズ（または複数のサイズ）に制限する必要があります。

ad-slotプロパティを使用して、Google AdSense広告スロット値を（文字列として指定）指定します。

詳細については、AdSenseドキュメントを参照してください。Google AdSenseドキュメント

コンポーネントのプロパティ

プロパティ	タイプ	説明
`ad-slot`	文字列	Google Adsense広告スロット。テストモードでない場合は、このプロパティは必須です。広告スロット値については、AdSenseアカウントを参照してください。
`ad-format`	文字列	オプション。その他のオプションについては、AdSenseドキュメントを参照してください。
`ad-style`	オブジェクト	レンダリングされた`<ins>`要素に適用するスタイル。デフォルト：`{ display: 'block' }`。オブジェクト形式については、VueJSのスタイルバインディングドキュメントを参照してください。
`ad-layout`	文字列	オプション。AdSenseドキュメントを参照してください。
`ad-layout-key`	文字列	オプション。AdSenseドキュメントを参照してください。
`hide-unfilled`	真偽値	オプション。trueの場合、未記入の広告を非表示にします。
`page-url`	文字列	オプション。広告が認証を必要とするページにある場合は、参照ページURL（同様のコンテンツ）を設定します。設定する場合、このプロパティは完全修飾URL（プロトコルとホスト名を含む）である必要があります。
`include-query`	真偽値	広告ごとにグローバルオプション`includeQuery`を上書きします。ページ上のすべての広告が同じ設定になっていることを確認してください。
`analytics-uacct`	文字列	Google AnalyticsアカウントID（AdSenseとAnalyticsを連携する場合、例：`UA-#######-#`）。デフォルトは、プラグインオプション`analyticsUacct`で指定された値です。
`analytics-domain-name`	文字列	Google Analyticsアカウントドメイン（AdSenseとAnalyticsを連携する場合、例：`example.com`）。デフォルトは、プラグインオプション`analyticsDomainName`で指定された値です。

広告の自動更新

ルートが変更された場合、またはオプションでルートのクエリパラメータが変更された場合、表示された広告は通常のページロードと同じように更新されます。

注意点

注意: （ページのコンテンツを最小限しか変更せずに）広告を恣意的に再読み込みすると、AdSenseアカウントが停止される可能性があります。完全な利用規約については、AdSenseを参照してください。
Googleは広告が表示される各ページをクロールする必要があります。サイトのSSRが広告が表示されるページをレンダリングするようにしてください。クロールできないページに表示される広告は表示されません。
認証が必要なページに広告を配置する場合は、<Adsbygoogle />コンポーネントのpage-urlを、サイト上の公開アクセス可能なページであり、類似/関連コンテンツを持つページのURLに設定してください。

背景

このモジュールは、プログレッシブWebアプリケーションで広告を更新するために、（Google AdSenseの協力を得て）Angularチームが開発した手法を使用しています。

新しい広告がリクエストされるたびに、AdSenseパラメータdata-ad-regionがランダムな値に更新されます。このため、<Adsbygoogle />コンポーネントにdata-ad-region属性を設定することはできません。

ライセンス

MITライセンス