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

Question

寻找一种方法添加谷歌广告没有定制html.js。我试着用头盔：

<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头标签不支持数据反应头盔属性.

搜索解决方案后的测试研究

gatsby插件-google-adsense

安装后，在编写此问题时引发与3+不兼容的错误，终端中的错误消息：

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

添加到Netlify

在搜索站点时，我发现了这个建议在后处理期间添加的问与答，但是如果我不使用Netlify，那实际上并不能提供解决方案。

修改html.js

如果我在将源代码推送到存储库之前进行构建，那么这个回答是一个选项，但我不是。

无法将AdSense连接到盖茨比博客

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

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

Answer 1

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

• 使用gatsby-plugin-react-head，它从react-head扩展而来，但您可能面临与data-react-helmet属性相同的不兼容性。
• 使用gatsby-ssr.js API：onRenderBody，它公开了一个setHeadComponents props： 导出const onRenderBody = ({ setHeadComponents }) => setHeadComponents( <脚本数据-ad={${process.env.GATSBY\_GOOGLE\_ADSENSE}}异步setHeadComponents )； 注意ES6命名