I am trying to display ads on my website using a script tag provided by an advertising network. The script works initially, or to be precise, it only works when the page is loaded initially or hard reloaded, but it does not work when a user navigates to the other pages. I have tried the following approaches:
1. useEffect (adds script tag to dom but does not execute)
2. dangerouslySetInnerHTML (Gives hydration warning, adds script tag to dom but does not execute)
3. Next/Script (adds script tag inside body or head this is not what I want)
<script type="text/javascript" dangerouslySetInnerHTML={{ __html: ' atOptions = { key: "5b206889eba27ffa3faf57a6c6112191", format: "iframe", height: 50, width: 320, params: {}, } ', }} />
<script type="text/javascript" src="//www.topcreativeformat.com/5b206889eba27ffa3faf57a6c6112191/invoke.js" ></script>

I am talking about the second script, as it is responsible for displaying the ads. You can copy and paste both scripts, and it will show a placeholder for the ad.