---
title: "Google AdSense"
description: "在您的 Nuxt 应用中展示 Google AdSense 广告。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-adsense"
last_updated: "2026-08-11T09:33:01.530Z"
---

[Google AdSense](https://www.google.com/adsense/start/) 会在您的网站上投放 Google 广告。

选择与展示位置相匹配的 API：

- [`useScriptGoogleAdsense()`](/scripts/google-adsense) 加载 `adsbygoogle` 队列。
- `<ScriptGoogleAdsense>` 渲染一个广告单元。

## 全局配置

<script-docs>



</script-docs>

## 在哪里查找 `<your-id>`（发布商 ID）

在 **帐号 > 设置 > 帐户信息** 下查找您的 [Google AdSense 发布商 ID](https://support.google.com/adsense/answer/2923881?hl=en)。它在您的帐号中显示为 `pub-…`，在广告代码中显示为 `ca-pub-…`。将下方的 `<your-id>` 替换为该值。

<callout icon="i-heroicons-light-bulb" target="_blank" to="https://adsense.google.com/start/">

从 AdSense 信息中心的 **自动广告** 设置中管理广告类型和展示位置。

</callout>

## 网站所有权验证

### 自动插入 meta 标签

如果提供了 `client`，页面将**自动**插入一个用于 Google 验证您站点所有权的 **meta 标签**。

<tabs>
<div :---="null" icon="i-heroicons-code-bracket-square" label="示例">

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: "ca-pub-<your-id>", // AdSense 发布者 ID
      },
    },
  },
})
```

</div>

<div :---="null" icon="i-heroicons-magnifying-glass-circle" label="输出">

```html
<meta name="google-adsense-account" content="ca-pub-<your-id>" />
```

</div>
</tabs>

### 添加 `ads.txt`

Google 建议添加 `ads.txt` 文件，以识别获授权出售您广告资源的广告系统，并减少仿冒广告资源。

#### 步骤

1. 新建文件：`public/ads.txt`
2. 添加以下内容：
```plaintext
google.com, pub-<your-id>, DIRECT, f08c47fec0942fa0
```
3. 将 `<your-id>` 替换为您的 **AdSense 发布者 ID**。

<callout icon="i-heroicons-light-bulb" target="_blank" to="https://support.google.com/adsense/answer/12171612">

`ads.txt` 文件不能替代 AdSense 的网站审核。发布该文件后，请在您的 AdSense 控制台中检查文件状态。

</callout>

## 启用自动广告

[自动广告](https://support.google.com/adsense/answer/9261805?hl=en)会根据网页的布局、内容和现有广告，由 Google 选择广告展示位置。您仍然可以在 AdSense 中控制广告格式，以及排除某些网页或区域。

<tabs>
<div :---="null" icon="i-heroicons-code-bracket-square" label="示例">

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  scripts: {
    registry: {
      googleAdsense: {
        client: "ca-pub-<your-id>", // AdSense 发布者 ID
        autoAds: true, // 启用自动广告
      },
    },
  },
})
```

</div>

<div :---="null" icon="i-heroicons-magnifying-glass-circle" label="输出">

```html
<script>
(adsbygoogle = window.adsbygoogle || []).push({
  google_ad_client: "ca-pub-<your-id>",
  enable_page_level_ads: true,
});
</script>
```

</div>
</tabs>

## 使用 [`<ScriptGoogleAdsense>`](/scripts/google-adsense) 组件

`<ScriptGoogleAdsense>` 会渲染一个广告单元：

```vue
<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-<your-id>"
    data-ad-slot="1234567890"
    data-ad-format="auto"
  />
</template>
```

### 组件属性

<table>
<thead>
  <tr>
    <th>
      属性
    </th>
    
    <th>
      描述
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        data-ad-client
      </code>
    </td>
    
    <td>
      您的 <strong>
        Google AdSense 发布商 ID
      </strong>
      
      （<code>
        ca-pub-XXXXXXXXXX
      </code>
      
      ）。
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-ad-slot
      </code>
    </td>
    
    <td>
      您的 <strong>
        广告位 ID
      </strong>
      
      （可在 AdSense 信息中心获取）。
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-ad-format
      </code>
    </td>
    
    <td>
      广告格式类型（<code>
        auto
      </code>
      
      、<code>
        rectangle
      </code>
      
      、<code>
        horizontal
      </code>
      
      、<code>
        vertical
      </code>
      
      、<code>
        fluid
      </code>
      
      、<code>
        autorelaxed
      </code>
      
      ）。
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-ad-layout
      </code>
    </td>
    
    <td>
      布局（<code>
        in-article
      </code>
      
      、<code>
        in-feed
      </code>
      
      、<code>
        fixed
      </code>
      
      ）。
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        data-full-width-responsive
      </code>
    </td>
    
    <td>
      <strong>
        设置为 <code>
          true
        </code>
      </strong>
      
       以使广告具有响应式效果。
    </td>
  </tr>
</tbody>
</table>

#### 使用 `data-ad-layout` 的示例

为 `in-article` 等布局设置 `data-ad-layout`：

```vue
<template>
  <ScriptGoogleAdsense
    data-ad-client="ca-pub-<your-id>"
    data-ad-slot="1234567890"
    data-ad-format="fluid"
    data-ad-layout="in-article"
  />
</template>
```

## 处理广告拦截器

对于广告拦截器阻止脚本的访客，请使用 `error` 插槽：

```vue
<template>
  <ScriptGoogleAdsense data-ad-client="ca-pub-..." data-ad-slot="...">
    <template #error>
      <!-- 备用内容 -->
      <p>请支持我们，关闭您的广告屏蔽程序。</p>
    </template>
  </ScriptGoogleAdsense>
</template>
```

## 使用 [`useScriptGoogleAdsense()`](/scripts/google-adsense) 组合式函数

当你需要 `adsbygoogle` 队列而不需要广告单元组件时，请使用 [`useScriptGoogleAdsense()`](/scripts/google-adsense)。

```ts
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(
  _options?: GoogleAdsenseInput
) {}
```

请参阅[注册脚本指南](/docs/guides/registry-scripts)，了解触发和加载选项。

<callout icon="i-heroicons-light-bulb" target="_blank" to="https://support.google.com/adsense">

请参阅官方的 **Google AdSense 指南**。

</callout>

<script-types>



</script-types>