, }} >Iframe tag is in the Markup before navigating (Ad is showing in the UI):The Iframe tag is not in the markup after navigating (Ad is not showing in the UI):The error that I am seeing in the console:","dateCreated":"2024-02-20T16:50:41.000Z","answerCount":6,"author":{"@type":"Person","name":"Keyhole wasp"},"suggestedAnswer":{"@type":"Answer","text":"i don't know the exact problem but the document.write looks sus, probably shouldn't be doing that","url":"https://nextjs-forum.com/post/1209542654711300106#message-1209686819961176084","dateCreated":"2024-02-21T02:23:33.000Z","author":{"@type":"Person","name":"josh"}}}}

Ads not updating on navigation

Unanswered

Keyhole wasp posted this in #help-forum

Open in Discord

Keyhole waspOP

2024-02-20T16:50:41.000Z

I am trying to integrate AdSterra ads using script tags. The ads have shown up in the UI, but I am facing two issues.
1: When I navigate to another page, the ad placed on that page does not display in the UI.
2: There is an error in the console that says: Prop dangerouslySetInnerHTML did not match. Server...

The way I am using script:

<div
dangerouslySetInnerHTML={{
__html:

<script type="text/javascript" async>
          var atOptions = {
            'key' : '5b206889eba27ffa3faf57a6c6112191',
            'format' : 'iframe',
            'height' : 50,
            'width' : 320,
            'params' : {}
          };
          document.write('<scr' + 'ipt type="text/javascript" async src="//www.topcreativeformat.com/5b206889eba27ffa3faf57a6c6112191/invoke.js"></scr' + 'ipt>');
        </script>

,
}}
></div>

Iframe tag is in the Markup before navigating (Ad is showing in the UI):
The Iframe tag is not in the markup after navigating (Ad is not showing in the UI):
The error that I am seeing in the console:

6 Replies

2024-02-21T02:23:33.000Z

i don't know the exact problem but the document.write looks sus, probably shouldn't be doing that

why can't you use <Script>? https://nextjs.org/docs/app/api-reference/components/script

@josh why can't you use `<Script>`? https://nextjs.org/docs/app/api-reference/components/script

Keyhole waspOP

2024-02-21T05:42:56.000Z

The problem is same with <Script>. It does not reload when I navigate to other pages.

@Keyhole wasp The problem is same with <Script>. It does not reload when I navigate to other pages.

2024-02-21T05:55:19.000Z

add a key prop to Script tag and make sure it changes on every route change

this will force react to re render that tag hence updating the ad

@@ts-ignore this will force react to re render that tag hence updating the ad

Keyhole waspOP

2024-02-21T18:34:59.000Z

Not working. The script does not execute when I navigate. I used usePathname but did not work.