Adsense stops loading ads after couple of clientside page navigations
When switching pages in my nextjs blog using client side routing, it seems after a few navigations the ads are not showing anymore.
A full page reload resolves this.
I think this is caused by having a maximum number of ads loaded. Probably each navigation needs to do some cleanup on the window object so it behaves like a full page reload.
Anyone else experienced this?
Maybe we need to include some examples for nextjs _app.js or something on how to resolve this.
e.g. This is code I already have in my _app.js, but not sure how to fix google adsense.
export default function App({ Component, pageProps }) {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
console.log(`navigated: ${url}`);
gtag.pageview(url); // this does the google-analytics pageview tracking.
// do something with the googleadsense stuff to make it behave like a full page reload.
};
router.events.on("routeChangeComplete", handleRouteChange);
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
.........
left for brevity
....
We might also offer a React hook like useAdsense() with instructions on where to add the hook in a nextjs app and where to add it in a plain react app etc.
In react-router i used forceRefresh=true to try and solve for this. I did not notice any real differences. My issue is drop off in revenue and missing clicks. I see them reported in Analytics fine but in Adsense I am only getting 30-40% of clicks. This is down from 80% of clicks when using the old server based site in an A/B test.
Anyone else having this issue?