I have a custom javascript for running ads on my NextJS site. This is provided by the ad provider / ad exchange.
It looks something like this:
<script type="text/javascript" src="//cdn.adsite.com/static/js/ad.js" ></script>
Along with this I have div tags that I place on the web page, for example:
<div id="ad-tag-6098" ></div>
<div id="ad-tag-6099" ></div>
<div id="ad-tag-6076" ></div>
These three div tags are three ad slots on a page and get populated with the ad using the ad.js javascript.
This works fine on a normal load /reload of a page.
However, when I navigate to a page using the internal navigation router, this javascript doesn't get triggered and the ad doesn't display.
What is the correct way to reload the ad.js so that the div tags (ad slots) display the ad correctly, and also refresh correctly even when we navigate through the nextjs router? Can you please help?
UPDATE: This problem is even deeper than I thought. Just reloading of javascript is not enough. Since these are ad slots, when the page transitions / route changes, the used ad slots stay in the memory, so the ad script treats them as already displayed. This causes an error.
The desired behaviour is as follows:
- when the ad component is rendered, it defines the ad slot and displays it,
- when route is changed, all defined slots are removed from the memory,
- after going to a different page, ad components on that page define new slots and display them.
from NextJS: Reloading Ads Javascript and Ad Slots on Route Change
No comments:
Post a Comment