Google AdSense · Nuxt 模組

注意：此分支適用於與 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',
    },
  },
}

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

組態選項

選項	類型	描述
`id`	字串	您的 Google AdSense 發佈商用戶端 ID (例如 `ca-pub-#########`)。在非測試模式下為必填。
`adFormat`	字串	設定全域預設廣告格式。可使用元件屬性覆寫。
`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 文件

元件屬性

屬性	類型	描述
`ad-slot`	字串	Google Adsense 廣告版位。在非測試模式下，此屬性為必填。請參閱您的 AdSense 帳戶以取得廣告版位值。
`ad-format`	字串	選用。請參閱 AdSense 文件以取得其他選項
`ad-style`	物件	要套用至呈現的 `<ins>` 元素的樣式。預設值：`{ display: 'block' }`。請參閱 VueJS 樣式繫結文件以取得物件格式。
`ad-layout`	字串	選用。請參閱 AdSense 文件
`ad-layout-key`	字串	選用。請參閱 AdSense 文件
`hide-unfilled`	布林值	選用。如果為 true，則隱藏未填滿的廣告。
`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 | 方法 | 觸發顯示廣告的方法來顯示廣告。 | updateAd | 方法 | 觸發更新廣告的方法來重新整理廣告。 | isUnfilled | 計算參考 | 追蹤廣告元素上的未填滿屬性。如果 data-ad-state = 'unfilled'，則傳回 true。

廣告自動更新

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

注意事項

注意：任意重新載入廣告 (頁面內容變更很少) 可能會導致您的 AdSense 帳戶遭到停權。請參閱 AdSense 以取得完整的使用條款。
Google 需要檢索每個顯示廣告的頁面。請確保您的網站 SSR 會呈現任何顯示廣告的頁面。未檢索頁面上的廣告將不會顯示。
將廣告放置在需要驗證的頁面上時，請將 <Adsbygoogle /> 元件上的 page-url 設定為您網站上可公開存取的頁面 URL，該頁面應具有類似/相關內容。