在 React + React Router 中使用 google adsense

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:

所指示的页面相同

Separate JavaScript code: AdSense counts a page view when the AdSense ad code is executed by a user's browser.

当我检查 Adsense HTTP 请求时，我可以看到有一个 prev_fmts 参数可以记住之前请求的广告：

问题是，在显示大约 12-16 个广告后（每页 2 个，因此最多 8 个页面浏览量），Adsense returns 一个空的 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

使用准备好的 React 组件

在 React + React Router 中使用 google adsense

Using google adsense with React + React Router

javascript

adsense

reactjs

react-router