google-adsense
@nuxtjs/google-adsense

適用於 Nuxt 的 Google AdSense 模組

npm versionnpm downloadsLicenseNuxt


注意:此分支適用於相容 Nuxt 3 的模組。請檢視 legacy-v2 分支以獲取 Nuxt 2 支援。


Google AdSense

Nuxt.js 的 Google AdSense 整合。廣告會在頁面路由更改時更新。

設定

  • 使用 yarn 或 npm 將 @nuxtjs/google-adsense 依賴項新增到您的專案中
  • @nuxtjs/google-adsense 新增到 nuxt.config.jsmodules 部分
{
  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 應用程式上的廣告更新

每次請求新廣告時,AdSense 引數 data-ad-region 都會更新為隨機值。因此,您不能在 <Adsbygoogle /> 元件上設定 data-ad-region 屬性。

許可證

麻省理工學院許可證