无法将 AdSense 连接到 Gatsby 博客

IT技术 reactjs gatsby connect adsense
2021-04-29 16:05:09

我一直在尝试将我的 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 看到的，那么他当然不认识它。有谁知道在这种情况下我能做什么？或者为什么这个属性甚至存在？谢谢

3个回答

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

  1. 许多插件在开发模式下默认是禁用的。尝试gatsby build和gatsby serve再检查是否有插件的工作原理。

  2. 使用 react-helmet将您的脚本标签放在 HTML 的头部。也可以使用gatsby build和gatsby serve进行测试。

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

我找到的最好方法是从这篇文章中找到的，它提出了 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>
  )
}

全文在这里。

其它你可能感兴趣的问题
上一篇React Styled 组件：如何基于 props 添加 css 样式？ 下一篇动态形式：类型错误：无法读取未定义的属性“值”