Using google adsense with React + React Router

Question

I'm trying to integrate Google Adsense into my React site and am running into an issue. To get ads on my pages, I've included this script tag into the head of my html file:

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

The ads are wrapped in a simple component that looks like this:

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

Which is rendered by other components like this:

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

This method was pulled from this article

Using the above implementation, ads load correctly on the page. The problem arises when users navigate to other pages. Since I'm using react router, the head doesn't update (with the exception of some react-helmet title changes) and the Adsense script doesn't reload. This makes Adsense think that it's on the same page as indicated by the Adsense pageview numbers I'm getting and the Adsense docs here:

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

This is further evidenced by the fact that when I inspect the Adsense HTTP requests, I can see that there is a prev_fmts param that remembers the previous ads requested:

The problem is that after about 12-16 ads show up (2 per page, so maximum 8 page views), Adsense returns an empty html document with a 400 error for every subsequent ad request:

If I manually refresh the page by hitting cmd-r, the ads load correctly once again, but only for the next few pageviews. I tried removing the script I mentioned earlier and reinserting it into the head on each page change since that would (in theory) rerun the ad code and trigger a new Adsense pageview, but that didn't work. The main point of this site is to be able to show ads to generate a stable revenue stream and if I can't show ads on all of my pageviews (I'm averaging about 20 per user right now) using React, I'm going to have to reimplement the whole site, which I REALLY don't want to do. Has anyone else experienced this and found a solution?

Answer 1

You can use googletags to manage your adsense displays instead.

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

They have functions to refresh the ads on a page https://support.google.com/dfp_sb/answer/2694377?visit_id=1-636301421618198678-920866889&rd=1 which will work for client side apps