---
title: "Google Adsense"
description: "在您的 Nuxt 应用中展示 Google AdSense 广告。"
canonical_url: "https://nuxt-scripts.zhcndoc.com/scripts/google-adsense"
last_updated: "2026-05-22T14:11:49.025Z"
---

[Google AdSense](https://www.google.com/adsense/start/) 允许您通过展示与内容相关的 Google 广告来实现网站的盈利。

Nuxt Scripts 提供：

- `useScriptGoogleAdsense`：用于动态管理 Google AdSense 的组合函数。
- `<ScriptGoogleAdsense>`：一个无头组件，用于将广告直接嵌入您的 Nuxt 应用。

## 全局配置

<script-docs>



</script-docs>

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

您的 **Google AdSense 发布者 ID**（也称为 `ca-pub-XXXXXXX`）可以在您的 **Google AdSense 账户**中找到：

1. 登录您的 **Google AdSense** 账户。
2. 进入 **账户 > 设置**（点击您的头像图标 > “账户信息”）。
3. 在 **账户信息** 下找到 **发布者 ID**。
4. 将上述配置中的 `<your-id>` 替换为您的实际 ID。

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

您也可以在 **Google 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">

**为什么使用 ads.txt？** 它有助于**防止广告欺诈**，确保**只有您的网站**可以展示您的广告。

</callout>

## 启用自动广告

自动广告允许 Google **自动**投放广告，实现**更优的优化**。

<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` 组件

它提供了一种简单方式，将广告嵌入您的 Nuxt 应用。

```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>
```

## 如何处理广告屏蔽程序？

如果用户启用了广告屏蔽程序，您可以显示**备用内容**。

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

## 使用 `useScriptGoogleAdsense` 组合函数

`useScriptGoogleAdsense` 组合函数允许您对 AdSense 脚本进行**细粒度控制**。

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

请参阅 [Registry Scripts 指南](/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>