Google Adsense · Nuxt 模組

注意： 此分支適用於 Nuxt 3 相容模組。查看 legacy-v2 分支以取得 Nuxt 2 支援。

用於 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',
    },
  },
}

非同步廣告程式碼 (//127.0.0.1/pagead/js/adsbygoogle.js) 會自動新增至您頁面的 <head> 區段。

配置選項

選項	類型	描述
`id`	字串	您的 Google AdSense 發佈商客戶 ID（即 `ca-pub-#########`）。不在測試模式時為必填項。
`adFormat`	字串	設定全域預設廣告格式。可以使用元件 props 覆寫。
`analyticsDomainName`	字串	Google Analytics 帳戶網域（如果將分析與 AdSense 連結，即 `example.com`）。
`analyticsUacct`	字串	Google Analytics 帳戶 ID（如果將分析與 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 進入測試模式（請參閱下方）。

測試模式

當在 dev 模式下運行 Nuxt 時，AdSense 模組將自動切換到 test 模式。但是您可以將配置選項 test 設定為 true，以在生產環境中保持開啟測試模式。

測試模式使用測試發佈商 ID，因此您不會違反 AdSense TOS。

請注意，測試廣告通常會顯示為空白空間，但會具有正確的尺寸（即，將佔用渲染廣告所需的正確空間）。

用法

在您想要放置廣告的任何位置插入 <Adsbygoogle /> 元件。

您應該將 <Adsbygoogle /> 元件放置在具有指定（最小/最大）寬度和（最小/最大）高度（可以基於媒體查詢）的容器元素內，或在 <Adsbygoogle /> 元件上使用樣式或類別來將廣告限制為特定大小（或多個大小）。

使用 ad-slot 屬性來指定您的 Google AdSense 廣告版位值（指定為字串）。

請參閱 Adsense 文件以取得更多資訊。 Google Adsense 文件

元件 props

prop	類型	描述
`ad-slot`	字串	Google Adsense 廣告版位。不在測試模式時，此 prop 為必填項。請參閱您的 AdSense 帳戶以取得廣告版位值。
`ad-format`	字串	選填。請參閱 AdSense 文件以取得其他選項
`ad-style`	物件	要套用至渲染的 `<ins>` 元素的樣式。預設值：`{ display: 'block' }`。請參閱 VueJS 樣式綁定文件以取得物件格式。
`ad-layout`	字串	選填。請參閱 AdSense 文件
`ad-layout-key`	字串	選填。請參閱 AdSense 文件
`hide-unfilled`	布林值	選填。如果為 true，則隱藏未填充的廣告。
`page-url`	字串	選填。如果廣告位於需要身份驗證的頁面上，請設定參考頁面 URL（內容相似）。設定後，此 prop 必須是完整合格的 URL（包括協定和主機名稱）。
`include-query`	布林值	在每個廣告的基礎上覆寫全域選項 `includeQuery`。確保頁面上的所有廣告都具有相同的設定。
`analytics-uacct`	字串	Google Analytics 帳戶 ID（如果將分析與 AdSense 連結，即 `UA-#######-#`）。預設為外掛程式選項 `analyticsUacct` 中指定的值。
`analytics-domain-name`	字串	Google Analytics 帳戶網域（如果將分析與 AdSense 連結，即 `example.com`）。預設為外掛程式選項 `analyticsDomainName` 中指定的值。

元件公開的內部資料 | 名稱 | 類型 | 描述 | ____ | ____ | ___________ |showAd | 方法 | 觸發 show ad 方法以顯示廣告。 | updateAd | 方法 | 觸發 update ad 方法以重新整理廣告。 | isUnfilled | 計算 ref | 追蹤廣告元素上的 unfilled 屬性。如果 data-ad-state = 'unfilled'，則傳回 true。

自動更新廣告

每當您的路由變更，或者在您的路由查詢參數變更（可選）時，任何顯示的廣告都會更新，就像在正常頁面載入時一樣。

注意事項

注意： 任意重新載入廣告（頁面內容變更極少）可能會導致您的 AdSense 帳戶被暫停。請參閱 AdSense 的完整使用條款。
Google 需要檢索廣告顯示的每個頁面。確保您的網站 SSR 渲染任何廣告顯示的頁面。不可檢索頁面上的廣告將不會顯示。
當在需要身份驗證的頁面上放置廣告時，請在 <Adsbygoogle /> 元件上將 page-url 設定為您網站上公開可存取的頁面的 URL，該頁面應具有相似/相關的內容。