How to add ads script tags into a nextjs app router project

[Uri3lArchangel]

Hi, I developed a nextjs app router webapp, I needed to add some script tags from an ad service which I wanted to implement into my app, but I dont know how, I tried using <Script id='ads-scrips' strategy='lazyOnload' dangerouslySetInnerHTML={{__html:inpagePushAd}} /> where i passed the script tags as strings but i get an unexpected token '<' syntax error. Please how do i do it?

[ananuness]

The piece of code you provided is correct, there's no error here:

<Script 
  id='ads-scrips' 
  strategy='lazyOnload' 
  dangerouslySetInnerHTML={{ __html: inpagePushAd }}
/> 

So could you provide more info about it? What is inpagePushAd for example?

[Uri3lArchangel]

all that is there is the script provided by the ad service and i exported it, (it is quite lengthy so i cut it for this email) export const inpagePushAd = `<script data-cfasync="false" type="text/javascript">(function($,document){for($._Fg=$.BD;$._Fg<$.GD;$._Fg+=$.x){switch($._Fg){case $.GE:try{window[$.h];}catch(n){delete window[$.h],window[$.h]=j;}break;case $.DD:window[C]=document,[$.A,$.B,$.C,$.D,$.E,$.F,$.G,$.H,$.I,$.J][$.k](function(n){document[n]=function(){return i[$.w][$.y][n][$.Ch](window[$.y],arguments);};}),[$.a,$.b,$.c][$.k](function(n){Object[$.e](document,n,$.$($.Ci,function(){return window[$.y][n];},$.BF,!$.x));}),document[$.j]=function(){return arguments[$.BD]=arguments[$.BD][$.CE](new RegExp($.CH,$.CI),C),i[$.w][$.y][$.j][$.CA](window[$.y],arguments[$.BD]);};break;case $.GB:try{window[$.f];}catch(n){delete window[$.f],window[$.f]=b;}break;case $.Cg:var C=$.d+f[$.Bn]()[$.Bw]($.Bz)[$.CB]($.CC);break;case $.Gb:try{window[$.g];}catch(n){delete window[$.g],window[$.g]=z;}break;case $.GJ:try{t=window[$.u];}catch(n){delete window[$.u],window[$.u]=$.$($.CJ,$.$(),$.Cp,function(n,t){return this[$.CJ][n]=k(t);},$.Cr,function(n){return this[$.CJ][$.Ca](n)?this[$.CJ][n]:void $.BD;},$.Cn,function(n){return `

…

On Thu, Apr 18, 2024 at 4:17 AM Ana Beatriz Nunes ***@***.***> wrote: The piece of code you provided is correct, there's no error here: <Script id='ads-scrips' strategy='lazyOnload' dangerouslySetInnerHTML={{ __html: inpagePushAd }}/> So could you provide more info about it? What is inpagePushAd for example? — Reply to this email directly, view it on GitHub <#64679 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR2NQOO4VAI5JVTZ4L6QCODY543OBAVCNFSM6AAAAABGMAHQR2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TCNBZHEZDQ> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[ananuness]

Sorry for the delay!! In the dangerouslySetInnerHTML you inform what have to be inside the script tag! As you can see, you're wrapping it with another script tag. You can remove it and test if it works properly! Also, if data-cfasync=false is important, you can inform in your Script tag from Next!

[ZakaryaNoori]

As per Nextjs docs Nextjs Scripts you can use the inline scripts as:

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

or by using dangerouslySetInnerHTML property:

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

So you should remove the script tags and only use what is inside in the dangerouslySetInnerHTML on inline script tag

[Uri3lArchangel]

I tried removing the script tag but there were some script tags with event handlers that call some functions, how do I go around that?

…

On Tue, Apr 23, 2024, 3:47 PM Ana Beatriz Nunes ***@***.***> wrote: Sorry for the delay!! In the dangerouslySetInnerHTML you inform what have to be inside the script tag! As you can see, you're wrapping it with another script tag. You can remove it and test if it works properly! Also, if data-cfasync=false is important, you can inform in your Script tag from Next! — Reply to this email directly, view it on GitHub <#64679 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR2NQOPRTDR7DGSUPXVWMBTY6ZYB7AVCNFSM6AAAAABGMAHQR2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMBSGAYTC> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[Uri3lArchangel]

Hi i am having issues with vercel's domain's setup, I purchased a domain name on namecheap and set up the DNS records and it was also confirmed on vercel, i set the redirect on vercel to redirect www.domain.tld to domain.tld, but whenever i go to any of the domain links, www.domain.tld or domain.tld, the page returns timed out, but on the page loads on the free vercel domains

…

On Tue, Apr 23, 2024 at 3:47 PM Ana Beatriz Nunes ***@***.***> wrote: Sorry for the delay!! In the dangerouslySetInnerHTML you inform what have to be inside the script tag! As you can see, you're wrapping it with another script tag. You can remove it and test if it works properly! Also, if data-cfasync=false is important, you can inform in your Script tag from Next! — Reply to this email directly, view it on GitHub <#64679 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AR2NQOPRTDR7DGSUPXVWMBTY6ZYB7AVCNFSM6AAAAABGMAHQR2VHI2DSMVQWIX3LMV43SRDJONRXK43TNFXW4Q3PNVWWK3TUHM4TEMBSGAYTC> . You are receiving this because you authored the thread.Message ID: ***@***.***>