How to add a script tag in nextjs with dangerouslysetinnerhtml?

Question

I am trying to add.roll to my nextjs app. I used the script tag with dangerouslysetinnerhtml but it's not able to verify. What am I missing here?

This is the code

<Script`

{
adroll_adv_id = "xxxxxxxxxxxxxxxxxxxx";
    adroll_pix_id = "xxxxxxxxxxxxxxxxxxxx";
    adroll_version = "2.0";

    (function(w, d, e, o, a) {
        w.__adroll_loaded = true;
        w.adroll = w.adroll || [];
        w.adroll.f = [ 'setProperties', 'identify', 'track' ];
        var roundtripUrl = "https://s.adroll.com/j/" + adroll_adv_id
                + "/roundtrip.js";
        for (a = 0; a < w.adroll.f.length; a++) {
            w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
                return function() {
                    w.adroll.push([ n, arguments ])
                }
            })(w.adroll.f[a])
        }

        e = d.createElement('script');
        o = d.getElementsByTagName('script')[0];
        e.async = 1;
        e.src = roundtripUrl;
        o.parentNode.insertBefore(e, o);
    })(window, document);
    adroll.track("pageView");
}`

/>

It's answer of your question ? https://stackoverflow.com/questions/69705388/unable-to-write-jquery-code-in-next-js-app/69705617#69705617 — Mayur Vaghasiya, Dec 31 '21 at 11:19
Does this answer your question? [Unable to write JQuery code in Next.js App](https://stackoverflow.com/questions/69705388/unable-to-write-jquery-code-in-next-js-app) — Mayur Vaghasiya, Jan 01 '22 at 02:48

Mayur Vaghasiya · Answer 1 · 2021-12-31T11:47:50.550

0

Try this code it's works for me

import Script from 'next/script'
function MyApp() {
  return (
    <>
      <Script dangerouslySetInnerHTML={{
        __html: `Your script`}}></script>
    </>
  );
}

export default MyApp;

edited Dec 31 '21 at 11:47

answered Dec 31 '21 at 11:13

Mayur Vaghasiya

1,383
2
12
24

is that with the nextjs script tag? – someone Dec 31 '21 at 11:20
You want to add custom script in your next.js app am i right ? – Mayur Vaghasiya Dec 31 '21 at 11:22
yeah the built in script tag that you have to import in. – someone Dec 31 '21 at 11:41
Yes you need `import Script from 'next/script'` – Mayur Vaghasiya Dec 31 '21 at 11:47
For more help https://nextjs.org/docs/api-reference/next/script – Mayur Vaghasiya Dec 31 '21 at 11:48
can i have two script tags on the same page with nextjs? – someone Dec 31 '21 at 11:53
Yes, you can use two script tag in same page ! – Mayur Vaghasiya Dec 31 '21 at 12:01

score 0 · Answer 2 · answered Dec 31 '21 at 12:02

You can try this, it may works for you.

      <script
        dangerouslySetInnerHTML={{
            __html: `
                adroll_adv_id = "xxxxxxxxxxxxxxxxxxxx";
                adroll_pix_id = "xxxxxxxxxxxxxxxxxxxx";
                adroll_version = "2.0";
            
                (function(w, d, e, o, a) {
                    w.__adroll_loaded = true;
                    w.adroll = w.adroll || [];
                    w.adroll.f = [ 'setProperties', 'identify', 'track' ];
                    var roundtripUrl = "https://s.adroll.com/j/" + adroll_adv_id
                            + "/roundtrip.js";
                    for (a = 0; a < w.adroll.f.length; a++) {
                        w.adroll[w.adroll.f[a]] = w.adroll[w.adroll.f[a]] || (function(n) {
                            return function() {
                                w.adroll.push([ n, arguments ])
                            }
                        })(w.adroll.f[a])
                    }
            
                    e = d.createElement('script');
                    o = d.getElementsByTagName('script')[0];
                    e.async = 1;
                    e.src = roundtripUrl;
                    o.parentNode.insertBefore(e, o);
                })(window, document);
                adroll.track("pageView");
            `,
        }}
    ></script>

How to add a script tag in nextjs with dangerouslysetinnerhtml?

2 Answers2