无法将 AdSense 连接到 Gatsby 博客答案

【问题标题】：Not able to connect AdSense to Gatsby blog无法将 AdSense 连接到 Gatsby 博客
【发布时间】：2020-08-08 17:29:19
【问题描述】：

我一直在尝试将我的 AdSense 帐户与我的 Gatsby 博客相关联，但这似乎是不可能的。 AdSense 要求我将此代码放在我的 html 的 head 标记之间

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

我尝试了 gatsby adsense 插件和其他东西，但 AdSense 一直告诉我代码不在网站中。由于网站托管在 S3 中，所以我下载了生成的 index.html 并更改了代码并重新上传。我认为问题是由于在脚本标签中添加了一个名为 data-checked-head 的属性，所以即使我添加了上面的代码，我在浏览器中看到的是这样的：

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

如果这段代码是 AdSense 看到的，那么他当然不会识别它。有谁知道在这种情况下我该怎么办？或者为什么这个属性甚至在那里？谢谢

【问题讨论】：

您有指向您网站的链接吗？但要确保 AdSense 代码正常工作 - 检查网络标签中是否有“googleads.g.doubleclick.net/pagead/ads”请求。如果存在 - 标记正常工作并发送广告请求。此外，AdSense 究竟告诉您代码不存在的情况是什么？请注意，如果这是新帐户或网站 - 添加标签后可能需要一段时间（我会说大约一天）才能识别您的网站。
你能在哪里解决这个问题？
你能解决这个问题吗

标签： reactjs gatsby connect adsense

【解决方案1】：

我无法回答有关 AdSense 的详细信息，但我自己在 HTML 头部的元标记方面遇到了问题。关于 Gatsby，有两种方法可以调试您的代码：

在开发模式下默认禁用许多插件。尝试gatsby build 和gatsby serve，然后检查它是否适用于插件。
对 place your script tag in the head of HTML 使用 react-helmet。也可以使用 gatsby build 和 gatsby serve 进行测试。

【讨论】：

【解决方案2】：

您可以使用gatsby-plugin-google-adsense 在您的网站上展示广告。

【讨论】：

【解决方案3】：

我发现的最佳方法来自 this 文章，该文章建议了 Google AdSense 的简单 React 实现。

在您的gatsby-ssr.js 文件中：

const React = require('react')

const HeadComponents = [
  <script
    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXX"
    crossOrigin="anonymous"
    async
  />,
]

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

然后您创建一个横幅组件以包含在您的 Gatsby.js 页面中：

const Banner: React.FC<BannerProps> = ({
  className,
  style,
  layout,
  format,
  client = 'ca-pub-XXXX',
  slot,
  responsive,
  layoutKey,
}) => {
  useEffect(() => {
    try {
      const adsbygoogle = window.adsbygoogle || []
      adsbygoogle.push({})
    } catch (e) {
      console.error(e)
    }
  }, [])
  return (
    <div className="banner-container">
      <ins
        className="adsbygoogle"
        style={style}
        data-ad-layout={layout}
        data-ad-format={format}
        data-ad-client={client}
        data-ad-slot={slot}
        data-ad-layout-key={layoutKey}
        data-full-width-responsive={responsive}
      />
    </div>
  )
}

全文here.

【讨论】：