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

Question

寻找一种无需 customizing html.js 即可添加 Google Adsense 的方法.我试过继续使用 Helm :

<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 head tag doesn't support data-react-helmet attribute.

搜索分辨率后测试研究
gatsby-plugin-google-adsense
安装后，在编写此问题时会抛出与 3+ 不兼容的错误，终端中的错误消息:

warn Plugin @isamrish/gatsby-plugin-google-adsense is not compatiblewith your gatsby version 3.0.1 - It requires gatsby@^2.13.50

添加到 Netlify
搜索网站我发现了这个 Q&A建议在后期处理期间添加，但如果我不使用 Netlify，那确实无法提供解决方案。
修改 html.js此 answer如果我在将源代码推送到存储库之前进行构建，则是一个选项，但我不是。
Not able to connect AdSense to Gatsby blog

建议我提到的插件在 3+

中引发错误

建议添加到 html.js

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

Answer 1

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

使用 gatsby-plugin-react-head 从 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 命名