@nuxtjs/google-adsense

Nuxt 用 Google AdSense モジュール

5K ダウンロード•211 スター•v3.0.0

TheAlexLichter•

tmorehouse

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

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

セットアップ

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

{
  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',
    },
  },
}

非同期広告コード (//#/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`。
`タグ`	文字列	AdSense コンポーネントのタグ名。デフォルトは `adsbygoogle` です。
`テスト`	ブール値	AdSense を強制的にテストモードにします (下記参照)。

テストモード

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

テストモードではテストパブリッシャー ID が使用されるため、AdSense TOS に違反することはありません。

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

使用方法

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

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

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

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

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

プロパティ	タイプ	説明
`広告スロット`	文字列	Google AdSense 広告スロット。テストモードでない場合は必須のプロパティです。広告スロットの値は AdSense アカウントを参照してください。
`広告フォーマット`	文字列	オプション。その他のオプションについては AdSense ドキュメントを参照してください
`広告スタイル`	オブジェクト	レンダリングされた `<ins>` 要素に適用するスタイル。デフォルト: `{ display: 'block' }`。オブジェクト形式については、VueJS のスタイルバインディングドキュメントを参照してください。
`広告レイアウト`	文字列	オプション。AdSense ドキュメントを参照してください。
`広告レイアウトキー`	文字列	オプション。AdSense ドキュメントを参照してください。
`hide-unfilled`	ブール値	オプション。true の場合、未入力の広告を非表示にします。
`ページ 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 に設定してください。

背景

このモジュールは、Angular チーム (Google AdSense の協力のもと) が開発した手法を使用して、プログレッシブウェブアプリケーションで広告を更新します。

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

ライセンス

MITライセンス