CODEWITHSUNDEEP
reactjsnext.js
Asking
Asking

Reputation: 4192

Insert a script in Head of the application

I am using NextJs and i want to add google analytics in my application.

<Head>
     <title>My app</title>
     <meta name="viewport" content="initial-scale=1.0, width=device-width" />
     <meta name="keywords" content="test" />
     <meta charSet="utf-8" />
     <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXX');</script>
    <!-- End Google Tag Manager -->
 </Head>

When i hover over the script ]||[];w[l].push({, i get: enter image description here

Because of this issue i can't run the app. Why it happens and how to solve?

Upvotes: 0

Views: 615

Answers (1)

P.E. Jo&#235;ssel
P.E. Jo&#235;ssel

Reputation: 1443

I do it like this:

<script dangerouslySetInnerHTML={{ __html: `
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-XXXX');
` }} async />

Upvotes: 1

Related Questions