Reactjs 如何将Adsense添加到使用GatsbyJS构建的网站？_Reactjs_Jsx_Adsense_Gatsby_Head

Reactjs 如何将Adsense添加到使用GatsbyJS构建的网站？

reactjs gatsby

Reactjs 如何将Adsense添加到使用GatsbyJS构建的网站？,reactjs,jsx,adsense,gatsby,head,Reactjs,Jsx,Adsense,Gatsby,Head,我想知道我应该在哪里添加Google Adsense提供的他们说要把它添加到，但在盖茨比你有头盔作为我还尝试将脚本添加到html.js文件中，它位于一个带有{`}的标记中，以转义标记，但它在网站顶部输出脚本内容 TL；DR：向使用GatsbyJS构建的网站添加Adsense的最佳方式是什么？我试过用这个词，但我不明白如何和盖茨比一起用我试图将标记添加到html.js，但它无法编译如果您使用{`}对其进行转义，则可以在网站顶部按原样获取脚本 {this.props.headComp

我想知道我应该在哪里添加Google Adsense提供的

他们说要把它添加到

，但在盖茨比你有头盔作为

我还尝试将脚本添加到html.js文件中，它位于一个带有

{`}

的

标记中，以转义

标记，但它在网站顶部输出脚本内容

TL；DR：向使用GatsbyJS构建的网站添加Adsense的最佳方式是什么？

我试过用这个词，但我不明白如何和盖茨比一起用
我试图将
标记添加到html.js，但它无法编译
如果您使用
```
{`}
```
对其进行转义，则可以在网站顶部按原样获取脚本


{this.props.headComponents}
{``}
{` 
（adsbygoogle=window.adsbygoogle | |[]）。推送({
谷歌广告客户端：“ca-pub-1540853335472527”，
启用页面级别广告：真
});
`}

来源：html.js

该网站应该被谷歌爬虫检测到。

要设置Adsense，请在

html.js

中关闭

标记之前放置

标记（不带模板文本

{`}

），如下所示：

然后，要放置广告单元，您可以使用预先构建的组件，如您所提到的npm上的组件，或者自己构建它

这包括ad单元与组件的设置和放置

让我知道这是否对您有效，或者是否有什么不清楚的地方！

感谢Github上给出的答案，问题终于解决了：

如果要添加Adsense：

```
cp.cache/default-html.js src/html.js
```
添加脚本，但是里面的所有内容都应该转义->{code>}
以我的情况为例：


{`
（adsbygoogle=window.adsbygoogle | |[]）。推送({
谷歌广告客户端：“ca-pub-1540853335472527”，
启用页面级别广告：真
});
`}

如果您正在使用像

Netlify

这样的服务来部署您的网站，您可以使用代码片段注入功能来实现这一点，而无需接触源代码

设置->构建和部署->后处理->代码段注入->添加代码段

然后，您可以选择要添加代码段的位置（脚本标记）。对于

Adsense

，这应该在

之前。希望有帮助。：）

您可以在这里找到一个关于的不错的教程

基本上，建议的方法是使用React实现Google AdSense横幅，并将Google AdSense代码包含在

gatsby ssr.js

文件中

gatsby-ssr.js文件：

const React=require（'React'））
常数头组件=[
,
]
exports.onRenderBody=（{setHeadComponents}，pluginOptions）=>{
setHeadComponents（HeadComponents）
}

AdSense横幅组件：

const横幅：React.FC=({
类名，
风格
布局，
格式，
客户端='ca pub XXXX'，
狭槽
反应敏捷的
布局键，
}) => {
useffect（（）=>{
试一试{
const adsbygoogle=window.adsbygoogle | |[]
adsbygoogle.push（{}）
}捕获（e）{
控制台错误（e）
}
}, [])
返回(
)
}

不要使用盖茨比adsense插件，它已被弃用

整篇文章。

最后，如果您想验证是否添加了Adsense，您可以控制与广告相关的

是否出现->在

标记中，您应该找到类似

的内容，引号被转换“在浏览器中。不确定是否存在修复。请使用

危险的SetinenerHTML

来抑制浏览器错误。

很好！我不必担心忽略Github上的内容

<head>
          <meta charSet="utf-8" />
          <meta httpEquiv="x-ua-compatible" content="ie=edge" />
          <meta
            name="viewport"
            content="width=device-width, initial-scale=1, shrink-to-fit=no"
          />
          {this.props.headComponents}
          {`<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>`}
             {` <script>
                  (adsbygoogle = window.adsbygoogle || []).push({
                    google_ad_client: "ca-pub-1540853335472527",
                    enable_page_level_ads: true
                  });
                </script> 
              `}
        </head>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
             <script>
                  {`
                    (adsbygoogle = window.adsbygoogle || []).push({
                      google_ad_client: "ca-pub-1540853335472527",
                      enable_page_level_ads: true
                    });
                  `}
             </script>