使用 google adsense 和 React + React Router

Question

我正在尝试将 Google Adsense 集成到我的 React 网站中，但遇到了问题。为了在我的网页上投放广告，我已将此脚本标记包含在我的 html 文件的 head 中：

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

广告封装在一个简单的组件中，如下所示：

export default class GoogleAdSense extends Component {    
  componentDidMount() {
    (window.adsbygoogle = window.adsbygoogle || []).push({});
  }

  render() {
    const {
      showAd,
      className,
      slot,
      format,
    } = this.props;

    return (
      <div className="GoogleAdSense">
        <ins
          className={ `adsbygoogle ${className}` }
          style={{ display: 'block' }}
          data-ad-client="ca-pub-7104738102834759"
          data-ad-slot={slot}
          data-ad-format={format}
        >
        </ins>
      </div>
    );
  }
}

由其他组件渲染，如下所示：

<GoogleAdSense
  slot="3461840703"
  className="QuestionGoogleAd"
  format="auto"
/>

这个方法是从this文章中提取的

使用上述实现，广告可以正确加载到页面上。当用户导航到其他页面时，就会出现问题。由于我使用的是 react 路由器，因此头部不会更新（除了一些 react-helmet 标题更改）并且 Adsense 脚本不会重新加载。这使 Adsense 认为它与我获得的 Adsense 网页浏览量数字和 Adsense 文档 here 所指示的页面相同：

单独的 JavaScript 代码：当用户的浏览器执行 AdSense 广告代码时，AdSense 会计算一次网页浏览量。

当我检查 Adsense HTTP 请求时，我可以看到有一个 prev_fmts 参数可以记住以前请求的广告，这进一步证明了这一点：

问题是在大约 12-16 个广告出现后（每页 2 个，因此最多 8 个页面浏览量），Adsense 会为每个后续广告请求返回一个空的 html 文档，并带有 400 错误：

如果我通过按 cmd-r 手动刷新页面，广告会再次正确加载，但仅适用于接下来的几次网页浏览。我尝试删除我之前提到的script 并将其重新插入到每个页面更改的头部，因为这（理论上）会重新运行广告代码并触发新的 Adsense 网页浏览，但这不起作用。这个网站的主要目的是能够展示广告以产生稳定的收入流，如果我不能使用 React 在我的所有网页浏览量（我现在平均每个用户大约 20 个）上展示广告，我会将不得不重新实现整个网站，我真的不想这样做。有没有其他人经历过这种情况并找到了解决方案？

Answer 1

您可以改为使用 googletags 来管理您的 adsense 显示。

https://www.google.com/analytics/tag-manager/

它们具有刷新页面 https://support.google.com/dfp_sb/answer/2694377?visit_id=1-636301421618198678-920866889&rd=1 上的广告的功能，适用于客户端应用

Answer 2

你可以为google publisher tag使用准备好的反应组件