如何将 google Adsense 添加到 Gatsby 网站？答案

【问题标题】：How to add google Adsense to a Gatsby site?如何将 google Adsense 添加到 Gatsby 网站？
【发布时间】：2021-01-20 07:15:42
【问题描述】：

Google AdSense 给我一个脚本以添加到 head 标签中

<script data-ad-client="ca-pub-XXXXXXXXXXXXXXX" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

我的代码：

<Helmet>
  <script
   data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
   async
   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
   ></script>
</Helmet>

返回这个错误

AdSense 头部标签不支持 data-react-helmet 属性。 我该如何解决？

enter image description here

【问题讨论】：

你不需要修复它。这是一个警告，而不是错误。它只是告诉您 AdSense JS 将忽略该属性。通常<script> 标记上设置的数据属性用于更改 AdSense 广告行为。因此，“head 标签不支持”消息只是为了帮助开发人员在属性名称拼写错误时检测错误。
@MikitaBelahlazau 谢谢你，但对不起，我忘记添加控制台错误的图像可以看到它。

标签： gatsby adsense

【解决方案1】：

我通过将脚本添加到 html.js 进行了修复，我需要将 head 标签注入到每个页面内的全局上下文中，因此我将它放在 html.js 文件中，然后我可以随时添加 body 标签。

另一种方法是在 gatsby-ssr.js 中添加脚本，如下所示：

const React = require("react")

const HeadComponents = [
 <script
   key="1-http-ads"
   data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
   async
   src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
   />,
]

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  setHeadComponents(HeadComponents)
}

【讨论】：