注:このブランチは、 Nuxt 3互換モジュール用です。 NUXT 2サポートのためのlegacy-v2
ブランチをチェックアウトします。
nuxt.jsのGoogle AdSense統合広告は、ページルートが変更されるたびに更新されます
@nuxtjs/google-adsense
依存関係をyarnまたはnpmを使用してプロジェクトに追加しますnuxt.config.js
のmodules
セクションに@nuxtjs/google-adsense
を追加します {
modules : [
// Simple usage
[ '@nuxtjs/google-adsense' , {
id : 'ca-pub-###########'
} ]
]
}
トップレベルのオプションの使用:
{
modules : [
[ '@nuxtjs/google-adsense' ]
] ,
googleAdsense : {
id : 'ca-pub-#########'
}
}
Runtime Configを使用:
{
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' ,
} ,
} ,
}
非同期広告コード( //pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
)は、ページの<head>
セクションに自動的に追加されます。
オプション | タイプ | 説明 |
---|---|---|
id | 弦 | Google AdSense Publisher Client ID(IE ca-pub-######### )。テストモードではない場合は必要です。 |
adFormat | 弦 | グローバルデフォルトの広告形式を設定します。コンポーネントプロップでオーバーライドできます。 |
analyticsDomainName | 弦 | Google Analyticsアカウントドメイン(分析とAdSense、つまりexample.com をリンクする場合)。 |
analyticsUacct | 弦 | Google AnalyticsアカウントID(分析をAdSenseとリンクする場合、IE 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またはその他のローカルストレージを使用するために、ユーザーの同意を取得するためのADリクエストを一時停止します。詳細については、AdSenseドキュメントを参照してください。 false 。 |
tag | 弦 | AdSenseコンポーネントタグ名。デフォルトはadsbygoogle になります。 |
test | ブール | AdSenseをテストモードに押し込みます(以下を参照)。 |
AdSenseモジュールは、 dev
モードでNUXTを実行するときにtest
モードに自動的に切り替えます。ただし、構成オプションtest
true
に設定することにより、実稼働中にテストモードを維持できます。
テストモードでは、テストパブリッシャーIDを使用するため、AdSense TOSに違反しません。
テスト広告は通常、空のスペースとして表示されるが、正しい寸法があることに注意してください(つまり、レンダリングされた広告で必要な正しいスペースを占有します)。
<Adsbygoogle />
コンポーネントを挿入してください。
<Adsbygoogle />
コンポーネントを、指定された(min /max)幅と(min /max)高さ(メディアクエリに基づくことができる)を持つコンテナ要素内に配置するか、 <Adsbygoogle />
でスタイルまたはクラスを使用する必要があります。 <Adsbygoogle />
コンポーネントは、広告を特定のサイズ(またはサイズ)に制限します。
ad-slot
プロパティを使用して、Google AdSense ADスロット値(文字列として指定)を指定します。
詳細については、AdSenseのドキュメントを参照してください。 Google AdSenseドキュメント
コンポーネントの小道具:
小道具 | タイプ | 説明 |
---|---|---|
ad-slot | 弦 | Google AdSense Adslot。この小道具は、テストモードではない場合に必要です。 AdSlot値については、AdSenseアカウントを参照してください。 |
ad-format | 弦 | オプション。他のオプションについては、AdSenseドキュメントを参照してください |
ad-style | 物体 | レンダリングされた<ins> 要素に適用するスタイル。デフォルト: { display: 'block' } 。オブジェクト形式のVuejsスタイルのバインディングドキュメントを参照してください。 |
ad-layout | 弦 | オプション。 AdSenseドキュメントを参照してください |
ad-layout-key | 弦 | オプション。 AdSenseドキュメントを参照してください |
hide-unfilled | ブール | オプション。本当の場合、未充填の広告を隠します。 |
page-url | 弦 | オプション。広告が認証が必要なページ上にある場合、参照ページURL(同様のコンテンツの)を設定します。設定すると、この小道具は完全に適格なURL(プロトコルとホスト名を含む)でなければなりません。 |
include-query | ブール | オーバーライドグローバルオプションには、広告ごとにincludeQuery 。ページ上のすべての広告に同じ設定があることを確認してください。 |
analytics-uacct | 弦 | Google AnalyticsアカウントID(分析とAdSenseをリンクする場合、つまりUA-#######-# )。デフォルトは、プラグインオプションanalyticsUacct で指定された値になります。 |
analytics-domain-name | 弦 | Google Analyticsアカウントドメイン(分析とAdSense、つまりexample.com をリンクする場合)。デフォルトは、プラグインオプションanalyticsDomainName で指定された値になります。 |
コンポーネント公開された内部データ|名前|タイプ|説明| ____ | ____ | ___________ | showAd
|方法| ADを表示するためにショー広告メソッドをトリガーします。 | updateAd
|方法|更新広告メソッドをトリガーして、広告を更新します。 | isUnfilled
|計算されたref |広告要素の属性のない属性を追跡します。 data-ad-state
= 'Unfill'の場合、 true
を返します。
ルートが変更されるたびに、またはルートクエリパラメーターが変更された場合は、通常のページのロードと同様に、表示されている広告が変更されます。
<Adsbygoogle />
コンポーネントにpage-url
サイト上のページのURLに設定します。 このモジュールは、Angularチーム(Google Adsenseのヘルプを使用して)が開発した手法を使用して、プログレッシブWebアプリケーションの広告の更新を処理します。
新しい広告が要求されるたびに、AdSenseパラメーターdata-ad-region
ランダムな値に更新されます。このため、 <Adsbygoogle />
コンポーネントにdata-ad-region
属性を設定することはできません。
MITライセンス