注意:此分支適用於相容 Nuxt 3 的模組。請檢視 legacy-v2
分支以獲取 Nuxt 2 支援。
Google AdSense
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 賬戶域名(如果將 Analytics 與 AdSense 關聯,例如 example.com )。 |
analyticsUacct | 字串 | Google Analytics 賬戶 ID(如果將 Analytics 與 AdSense 關聯,例如 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 進入測試模式(參見下文)。 |
測試模式
當 Nuxt 在 dev
模式下執行時,AdSense 模組會自動切換到 test
模式。但您可以透過將配置選項 test
設定為 true
,在生產環境中保持測試模式開啟。
測試模式使用測試釋出商 ID,這樣您就不會違反 AdSense 服務條款。
請注意,測試廣告通常會顯示為空白區域,但會具有正確的尺寸(即會佔用渲染廣告所需的正確空間)。
使用
將 <Adsbygoogle />
元件插入到您希望放置廣告的任何位置。
您應該將 <Adsbygoogle />
元件放置在具有指定(最小/最大)寬度和(最小/最大)高度(可以基於媒體查詢)的容器元素內,或者在 <Adsbygoogle />
元件上使用樣式或類來將廣告限制為特定大小(或多個大小)。
使用 ad-slot
屬性指定您的 Google AdSense 廣告位值(指定為字串)。
請參閱 Adsense 文件以獲取更多資訊。Google Adsense 文件
元件屬性
屬性 | 型別 | 描述 |
---|---|---|
廣告位 | 字串 | Google Adsense 廣告位。在非測試模式下此屬性為必填項。請參閱您的 AdSense 賬戶以獲取廣告位值。 |
廣告格式 | 字串 | 可選。請參閱 AdSense 文件以獲取其他選項 |
ad-style | 物件 | 應用於渲染的 <ins> 元素的樣式。預設值:{ display: 'block' } 。請參閱 VueJS 樣式繫結文件以瞭解物件格式。 |
ad-layout | 字串 | 可選。請參閱 AdSense 文件 |
ad-layout-key | 字串 | 可選。請參閱 AdSense 文件 |
隱藏未填充 | 布林值 | 可選。如果為 true,則隱藏未填充的廣告。 |
page-url | 字串 | 可選。如果廣告所在的頁面需要身份驗證,請設定參考頁面 URL(內容相似)。設定此屬性時,必須是完全限定的 URL(包括協議和主機名)。 |
include-query | 布林值 | 根據每個廣告覆蓋全域性選項 includeQuery 。確保頁面上的所有廣告都具有相同的設定。 |
analytics-uacct | 字串 | Google Analytics 賬戶 ID(如果將 Analytics 與 AdSense 關聯,例如 UA-#######-# )。預設為外掛選項 analyticsUacct 中指定的值。 |
analytics-domain-name | 字串 | Google Analytics 賬戶域名(如果將 Analytics 與 AdSense 關聯,例如 example.com )。預設為外掛選項 analyticsDomainName 中指定的值。 |
元件暴露的內部資料 | 名稱 | 型別 | 描述 | ____ | ____ | ___________ |showAd
| 方法 | 觸發顯示廣告方法以顯示廣告。 | updateAd
| 方法 | 觸發更新廣告方法以重新整理廣告。 | isUnfilled
| 計算引用 | 跟蹤廣告元素上的未填充屬性。如果 data-ad-state
= 'unfilled',則返回 true
。
廣告自動更新
每當您的路由更改或可選地您的路由查詢引數更改時,任何顯示的廣告都會更新,就像在正常頁面載入時一樣。
注意事項
- 注意:隨意重新載入廣告(頁面內容變化很小)可能會導致您的 AdSense 賬戶被暫停。請參閱 AdSense 瞭解完整的使用條款。
- Google 需要抓取顯示廣告的每個頁面。請確保您的網站 SSR 渲染任何顯示廣告的頁面。無法抓取的頁面上的廣告將不會顯示。
- 在需要身份驗證的頁面上放置廣告時,請將
<Adsbygoogle />
元件上的page-url
設定為您網站上公開可訪問且內容相似/相關的頁面的 URL。
背景
此模組使用 Angular 團隊(在 Google AdSense 的幫助下)開發的技術來處理漸進式 Web 應用程式上的廣告更新
- https://github.com/leonardteo/google-ads-test-angularjs
- https://groups.google.com/forum/#!topic/angular/eyVo4XU04uk
每次請求新廣告時,AdSense 引數 data-ad-region
都會更新為隨機值。因此,您不能在 <Adsbygoogle />
元件上設定 data-ad-region
屬性。