在JSX文件中添加Google Tag Manager脚本出现语法错误求助

问题原因 #

JSX是JavaScript的语法扩展，它会将<script>标签内的内容默认当作文本字符串解析，而非原生JavaScript代码。当你直接在JSX的<script>中写入多行GTM脚本时，JSX解析器无法识别正常的JS语法逻辑，因此抛出Unexpected token错误。

解决方法 #

方法1：使用dangerouslySetInnerHTML插入脚本 #

通过dangerouslySetInnerHTML属性，告诉React直接将脚本内容作为原生JS代码插入DOM：

<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');`
  }}
/>

方法2：动态创建脚本标签（推荐） #

这种方式更符合React的最佳实践，避免使用dangerouslySetInnerHTML，通过组件生命周期动态插入脚本：

import { useEffect } from 'react';

function YourComponent() {
  useEffect(() => {
    // 初始化dataLayer
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      'gtm.start': new Date().getTime(),
      event: 'gtm.js'
    });

    // 创建并插入GTM脚本
    const gtmScript = document.createElement('script');
    gtmScript.async = true;
    gtmScript.src = 'https://www.googletagmanager.com/gtm.js?id=GTM-XXXX';
    document.head.appendChild(gtmScript);

    // 组件卸载时移除脚本
    return () => {
      document.head.removeChild(gtmScript);
    };
  }, []);

  return <div>你的组件内容</div>;
}

针对Next.js的_document.jsx场景 #

从报错路径看你使用的是Next.js，可直接修改_document.jsx的render方法：

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

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html>
        <Head>
          <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');`
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

内容的提问来源于stack exchange，提问作者Nelb