如何在不修改 html.js 的情况下将 Google Adsense 添加到 Gatsby 3+ 中的 gatsby-ssr.js？

Question

正在寻找一种在没有customizing html.js 的情况下添加 Google Adsense 的方法。我尝试过使用 Helmet：

<Helmet>
{process.env.GATSBY_GOOGLE_ADSENSE ? (
  <script
    data-ad-client={`${process.env.GATSBY_GOOGLE_ADSENSE}`}
    async
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  ></script>
) : (
  console.log('Please add the env variable for Adsense')
)}
</Helmet>

但我遇到了错误：

AdSense 头部标签不支持 data-react-helmet 属性。

寻找解决方案后的测试研究

gatsby-plugin-google-adsense

安装后会抛出一个错误，在编写此问题时它与 3+ 不兼容，终端中的错误消息：

警告插件 @isamrish/gatsby-plugin-google-adsense 不兼容 与您的 gatsby 版本 3.0.1 - 它需要 gatsby@^2.13.50

添加到 Netlify

搜索该网站我发现了这个Q&A，它建议在后期处理期间添加，但如果我不使用 Netlify，它确实无法提供解决方案。

修改html.js

如果我在将源代码推送到存储库之前进行构建，则此 answer 是一个选项，但我不是。

Not able to connect AdSense to Gatsby blog

1. 建议我提到的插件在3+中抛出错误
2. 建议添加到 html.js

在撰写本文时，我无法为 Gatsby 3+ 找到解决方案。在 Gatsby 中，如何将 google-adsense 添加到 gatsby-ssr.js 以便让 adsense 工作？

Answer 1

我不确定它是否适用于您的用例，但这里有一些试验：

• 使用从react-head 扩展而来的gatsby-plugin-react-head，但您可能会面临与data-react-helmet 属性相同的不兼容问题。

• 使用gatsby-ssr.js API：onRenderBody，它公开了一个setHeadComponents props：

  export const onRenderBody = ({ setHeadComponents }) =>
    setHeadComponents([
      <script data-ad-client={`${process.env.GATSBY_GOOGLE_ADSENSE}`} async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"/>
  ]);
  
  

  注意 ES6 命名