Get AdSense Ads to Reload on Route Change in Next JS

Question

We've implemented Google AdSense on our Next.JS website, but we'd like to have ads reload whenever the route changes.

Here is what I tried:

const AdBlock = props => {
  const { userLoaded, currentUserIsSilverPlus } = useAuth()

  useEffect(() => {
    window.adsbygoogle = window.adsbygoogle || []
    window.adsbygoogle.push({})
  }, [])

  const reloadAds = () => {
    const { googletag } = window
    if (googletag) {
      googletag.cmd.push(function () {
        googletag.pubads().refresh()
      })
    }
  }

  Router.events.on("routeChangeStart", reloadAds)

  if (userLoaded && !currentUserIsSilverPlus) {
    return (
      <ins
        className="adsbygoogle adbanner-customize"
        style={{ display: "block" }}
        data-ad-client="ca-pub-1702181491157560"
        data-ad-slot={props.slot}
        data-ad-format={props.format}
        data-full-width-responsive={props.responsive}
      />
    )
  }
  return ""
}

export default AdBlock

The ads load, however, they never appear to refresh. What am I missing?

Answer 1

try useRouter hook and handling router events inside useEffect:

import { useRouter } from 'next/router'

export default function Page() {
const router = useRouter();
useEffect(() => {
router.events.on('routeChangeError', handleChange)
  }, [])
  return (
    <>
    </>
  )
}