Next: Syntax error: Unexpected token, expected "}"

Question

Adding a google tag manager script to a .jsx file with this format:

<!-- 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 -->

It shows this error:

./src/files/_document.jsx:22:29
Syntax error: Unexpected token, expected "}"

  20 |           <script>
  21 |           (function(w, d, s, l, i) {
> 22 |             w[l] = w[l] || [];
     |                              ^
  23 |             w[l].

Do you know what can be the issue?

I'm no react or next.js expert but I think this google tag manager script should be on the index.html page not jsx file — ousecTic, Aug 25 '22 at 11:11
Yes, pull it out of react and paste the script outside of your app container. It would also help to show the full file ./src/files/_document.jsx — Visualspark, Aug 25 '22 at 11:13

score 1 · Accepted Answer · answered Aug 25 '22 at 11:24

You can use next/script component to include dynamics script inside your Application like this. Documentation

<Script
  strategy="afterInteractive"
  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-XXXXXX');
  `,
  }}
/>

score 1 · Answer 2 · answered Aug 25 '22 at 11:30

for nextjs you need to create a _document.js file

import Document, { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default class MyDocument extends Document {
  /// do your stuff here
  render() {
    return (
      <Html>
        <Head>
          <Script
            id="analytics-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');`,
            }}
          />
          <link href="/fonts/styles.css" rel="stylesheet" />
        </Head>
        <body>
          <noscript>
            <iframe
              src="https://www.googletagmanager.com/ns.html?id=your-id"
              height="0"
              width="0"
              style={{ display: 'none', visibility: 'hidden' }}
            ></iframe>
          </noscript>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

put something similar like this in it

Next: Syntax error: Unexpected token, expected "}"

2 Answers2