如何在Next.js项目中集成amp-analytics？代码正确性求验证

原代码存在的核心问题 #

• 逻辑倒置：amp-analytics是AMP页面专属组件，你却把它放在非AMP页面（!isAmp）的判断分支里，完全搞反了适用场景。非AMP页面应该用普通GA4跟踪代码，而非AMP组件。
• AMP配置缺失必要属性：amp-analytics内部的<script>标签必须添加type="application/json"，否则AMP无法正确解析配置内容。
• 冗余无关逻辑：非AMP页面的no-js/js类切换是合理的，但和AMP分析集成无关，保留即可。

修正后的完整代码 #

const Body: React.FC = () => {
  const isAmp = useAmp();
  return (
    <body className={isAmp ? 'js' : 'no-js'}>
      {/* 非AMP页面：加载普通GA4跟踪代码 */}
      {!isAmp && (
        <>
          <script
            dangerouslySetInnerHTML={{
              __html: `
                document.body.classList.remove('no-js');
                document.body.classList.add('js');
              `,
            }}
          />
          {/* 标准GA4初始化脚本 */}
          <script
            async
            src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
                window.dataLayer = window.dataLayer || [];
                function gtag(){dataLayer.push(arguments);}
                gtag('js', new Date());
                gtag('config', 'GA_MEASUREMENT_ID');
              `,
            }}
          />
        </>
      )}

      {/* AMP页面：加载兼容GA4的amp-analytics组件 */}
      {isAmp && (
        <amp-analytics type="gtag" data-credentials="include">
          <script type="application/json">
            {`{
              "vars": {
                "gtag_id": "GA_MEASUREMENT_ID",
                "config": {
                  "GA_MEASUREMENT_ID": { "groups": "default" }
                }
              }
            }`}
          </script>
        </amp-analytics>
      )}

      {/* 通用noscript fallback（GTM） */}
      <noscript
        dangerouslySetInnerHTML={{
          __html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM_ID" height="0" width="0" style="display: none; visibility: hidden;" />`,
        }}
      />
      <Main />
      <NextScript />
    </body>
  );
};

关键说明 #

• 替换代码中的GA_MEASUREMENT_ID为你的GA4测量ID，GTM_ID为你的Google Tag Manager ID（若使用）。
• AMP页面的amp-analytics用gtag类型确实兼容GA4，配置必须是标准JSON格式，注意引号、逗号的正确性。
• 确保你的Next.js AMP页面配置正确：在对应页面文件中添加export const config = { amp: true }（纯AMP）或amp: 'hybrid'（混合模式）。

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