DEV Community
·
我们如何将Google AdSense正确集成到Next.js App Router项目中
💡
原文英文，约700词，阅读约需3分钟。
📝
内容提要
本文介绍了在Next.js的App Router中设置Google AdSense的步骤，包括创建账户、添加脚本和ads.txt文件、创建广告单元、处理路由导航及遵守隐私要求，从而实现广告收益的有效集成。
🎯
关键要点
- Google AdSense是网站变现的简单方式，使用Next.js的App Router需要几个关键步骤。
- 第一步是创建AdSense账户，填写域名和基本信息，等待Google审核。
- 第二步是添加脚本和ads.txt文件，创建可重用的AdSense脚本加载器。
- 使用集中服务组件在生产环境中加载所有第三方脚本，确保脚本仅在生产环境中运行。
- 创建public/ads.txt文件，包含授权信息以允许在域名上显示广告。
- 第三步是创建手动广告单元，选择展示广告并设置格式以获得更好的布局控制。
- 第四步是创建自定义广告位组件，可以在UI中任意位置放置广告位。
- 第五步是处理App Router导航，确保AdSense和Analytics能够正确跟踪页面视图。
- 第六步是遵守隐私要求，特别是在欧盟和加州等地区，需获得用户同意后才能显示个性化广告。
- 第七步是注意控制台警告，这通常是无害的，可以忽略。
- 总结了在vibeberry.io上完成的步骤，包括注册AdSense账户、验证网站、创建广告单元等。
- 设置AdSense在现代Next.js项目中可能会感到困惑，但分步骤进行是可管理的。
❓
延伸问答
如何创建Google AdSense账户？
访问adsense.google.com/start，填写域名和基本信息，等待Google审核。
在Next.js中如何添加AdSense脚本和ads.txt文件？
创建可重用的AdSense脚本加载器，并在public目录下创建ads.txt文件，包含授权信息。
如何创建手动广告单元以获得更好的布局控制？
在AdSense中选择展示广告，设置格式为响应式，并复制生成的数据广告槽值。
如何处理Next.js App Router中的路由导航以确保AdSense正常工作？
使用usePathname钩子和useEffect来跟踪页面视图，确保AdSense和Analytics能够正确检测路由变化。
在欧盟和加州等地区，如何遵守隐私要求以显示个性化广告？
必须在显示个性化广告前获得用户同意，可以使用同意管理平台或手动逻辑。
在开发过程中看到的控制台警告是否需要关注？
这些警告通常是无害的，可以忽略，广告仍会正常加载和工作。
➡️
