hustcc / react-adsense

:film_projector: a simple React-component for Google AdSense / Baidu advertisement.
https://git.hust.cc/react-adsense
MIT License
276 stars 43 forks source link

Adsense stops loading ads after couple of clientside page navigations #25

Open marcofranssen opened 3 years ago

marcofranssen commented 3 years ago

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.

mansoor292 commented 3 years ago

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?