广告
Google Adsense
在您的 Nuxt 应用程序中显示 Google Adsense 广告。
实验性
Google Adsense 集成尚未完全测试，请谨慎使用。
Google Adsense 允许您通过显示广告来获利您的网站。
Nuxt Scripts 提供了一个 useScriptGoogleAdsense 组合函数和一个无头 ScriptGoogleAdsense 组件来与 Google Adsense 交互。
ScriptGoogleAdsense
The ScriptGoogleAdsense 组件是 useScriptGoogleAdsense 组合函数的包装器。它提供了一种简单的方法来将广告嵌入您的 Nuxt 应用程序中。
<template>
<ScriptGoogleAdsense
data-ad-client="ca-pub-..."
data-ad-slot="..."
/>
</template>
处理广告拦截器
您可以使用这些钩子在 Google Adsense 脚本被阻止时添加一个回退。
<template>
<ScriptGoogleAdsense
data-ad-client="ca-pub-..."
data-ad-slot="..."
>
<template #error>
<!-- Fallback ad -->
Please support us by disabling your ad blocker.
</template>
</ScriptGoogleAdsense>
</template>
组件 API
查看 Facade Component API 以获取完整的 props、事件和 slots。
Props
The ScriptGoogleAdsense 组件支持 Google Adsense 在 <ins> 标签上支持的所有 props。有关详细信息，请参阅 Ad tags 文档。
至少您必须提供以下标签
data-ad-client: Google Adsense ID。data-ad-slot: 插槽 ID。
useScriptGoogleAdsense
The useScriptGoogleAdsense 组合函数允许您对 Google Adsense 脚本进行精细控制。
export function useScriptGoogleAdsense<T extends GoogleAdsenseApi>(_options?: GoogleAdsenseInput) {}
请遵循 Registry Scripts 指南以了解有关高级用法的更多信息。
网站所有权验证
当提供 client 时，将在页面上插入一个元标签，以便 Google 可以验证您的网站所有权。
const adsense = useScriptGoogleAdsense({
client: 'ca-pub-<your-id>',
})
生成的元标签将如下所示
<meta name="google-adsense-account" content="ca-pub-<your-id>">
GoogleAdsenseApi
export interface GoogleAdsenseApi {
adsbygoogle: any[] & { loaded: boolean }
}
GoogleAdsenseInput
export const GoogleAdsenseOptions = object({
/**
* The Google Adsense ID.
*/
client: optional(string()),
})