javascript - 将 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 指示的页面相同。 :

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 返回一个空的 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这将适用于客户端应用程序