@ctrl/反应 -adsense 
Google AdSense 的反应组件
戴莫: https://react-adsense.xmplaylist.com (中文(简体) )
安装
npm install @ctrl/react-adsense
需要回放19.3或更新.
使用
在您的 HTML 中装入 AdSense 脚本一次 <head> 和你一样 通常会 或任何位于你反应树的地方。 将同步脚本切入 <head> 只装了一次.
<script
async
src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXXXXX"
crossOrigin="anonymous"
/>
import { Adsense } from '@ctrl/react-adsense';
// ads with no set-up
<Adsense
client="ca-pub-7640562161899788"
slot="7259870550"
/>
// ads with a fixed size
<Adsense
client="ca-pub-7640562161899788"
slot="7259870550"
style={{ display: 'inline-block', width: 300, height: 250 }}
format=""
/>
// responsive and native ads
<Adsense
client="ca-pub-7640562161899788"
slot="7259870550"
style={{ textAlign: 'center' }}
layout="in-article"
format="fluid"
/>
道具
| Prop | 设定 | 默认 |
|---|---|---|
client | data-ad-client | |
slot | data-ad-slot | |
layout | data-ad-layout | |
layoutKey | data-ad-layout-key | |
format | data-ad-format | 'auto' |
responsive | data-full-width-responsive | 'false' |
adTest | data-adtest | |
pageLevelAds | 推动 enable_page_level_ads 客户端 | false |
style 合并 { display: 'block' }. 其他一切(className, (中文(简体) ), id, (中文(简体) ), ref, (中文(简体) ), data-*,......)被传递给 <ins>。 。 。 .
服务器渲染
与服务器渲染(Next.js, TanStack Start, React Router,.)和React Server组件相关的工作,不需要包装. 软件包是标记的 'use client',广告本身只使用 React 的 browser()。 。 。 .
- 服务器发送空
<ins>还有你的className财务报告和审定财务报表style。给它一个大小,所以当广告装入时,页面不会移动,比如style={{ minHeight: 280 }}一个响应性广告. - 水分后浏览器在真实中互换
<ins class="adsbygoogle">并请求广告。 AdSense不能填补一个槽 React还没有被水分化,这曾经引起水分化错误. - 服务器渲染器通过
onBrowserBailout没有onError,因此不会出现错误.
// app/page.tsx, a server component
import { Adsense } from '@ctrl/react-adsense';
export default function Page() {
return <Adsense client="ca-pub-7640562161899788" slot="7259870550" style={{ minHeight: 280 }} />;
}
单页应用程序
每个 <Adsense> 要求AdSense在上架时发布一个广告,改变道具不会装入另一个道具. 给它 key 当您想要新的广告时, 就像现在的路由一样, 就会改变.
<Adsense key={pathname} client="ca-pub-7640562161899788" slot="7259870550" />