Question

我一直在尝试将我的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所看到的，那么他当然不会识别它。有谁知道在这种情况下我该怎么办？还是为什么这个属性在那里？谢谢

Answer 1

我无法回答有关AdSense的详细信息，但是我自己的HTML头中的元标记存在问题。以下是关于Gatsby调试代码的两种可能性：

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

Answer 2

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

Answer 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)
}

然后您创建一个 Banner 组件以包含在您的 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。

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

3 个答案: