Next.js 12（SSR）中Pendo安装代码片段放置位置咨询

核心结论 #

布局组件是可行的放置位置，但不能直接在return里用函数形式插入，需要用Next.js提供的脚本注入方式，或者在_document.js中处理（针对pages目录结构的Next.js 12项目）。

具体实现方案 #

方案1：在自定义_document.js中注入（SSR场景推荐） #

Next.js的_document.js负责SSR模式下HTML根结构的渲染，是注入全局第三方脚本的理想位置：

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 插入Pendo初始化脚本 */}
          <script dangerouslySetInnerHTML={{ __html: `
            (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=[];
            v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){
            o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);
            y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/[YOUR_API_KEY]/pendo.js';
            z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');
            
            // 初始化Pendo
            pendo.initialize({
              apiKey: '[YOUR_API_KEY]',
              visitor: {
                id: 'VISITOR-UNIQUE-ID' // 替换为业务实际的访客ID
              },
              account: {
                id: 'ACCOUNT-UNIQUE-ID' // 替换为业务实际的账户ID
              }
            });
          `}} />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

注意：需替换[YOUR_API_KEY]、访客ID和账户ID为实际值；如果需要动态获取访客/账户信息，可在getInitialProps中获取后传递到脚本内。

方案2：在布局组件中用next/script组件注入（Next.js 12+支持） #

如果布局组件是全局复用的，可使用Next.js官方的Script组件加载Pendo脚本，支持多种加载策略适配SSR场景：

// components/Layout.js
import Script from 'next/script';

export default function Layout({ children }) {
  return (
    <>
      {/* 加载Pendo核心脚本，afterInteractive策略不阻塞SSR渲染 */}
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{ __html: `
          (function(p,e,n,d,o){var v,w,x,y,z;o=p[d]=p[d]||{};o._q=[];
          v=['initialize','identify','updateOptions','pageLoad','track'];for(w=0,x=v.length;w<x;++w)(function(m){
          o[m]=o[m]||function(){o._q[m===v[0]?'unshift':'push']([m].concat([].slice.call(arguments,0)));};})(v[w]);
          y=e.createElement(n);y.async=!0;y.src='https://cdn.pendo.io/agent/static/[YOUR_API_KEY]/pendo.js';
          z=e.getElementsByTagName(n)[0];z.parentNode.insertBefore(y,z);})(window,document,'script','pendo');
        `}}
      />
      
      {/* 单独的初始化脚本，确保核心脚本加载完成后执行 */}
      <Script
        strategy="afterInteractive"
        dangerouslySetInnerHTML={{ __html: `
          window.addEventListener('load', function() {
            pendo.initialize({
              apiKey: '[YOUR_API_KEY]',
              visitor: { id: 'VISITOR-UNIQUE-ID' },
              account: { id: 'ACCOUNT-UNIQUE-ID' }
            });
          });
        `}}
      />
      
      <div className="layout-container">
        {children}
      </div>
    </>
  );
}

这种方式的优势是可以在布局组件中统一管理全局脚本，afterInteractive策略会在页面可交互后加载脚本，不影响SSR的首屏渲染速度。

之前的函数形式插入无效的原因 #

直接在布局组件return中用函数形式插入脚本（比如{() => <script>...</script>}）是错误写法，React无法正确解析这种函数形式的元素，必须使用React支持的元素、Next.js提供的Script组件，或者通过dangerouslySetInnerHTML注入脚本内容。

验证方法 #

部署完成后，打开浏览器控制台输入pendo，如果能返回Pendo对象则说明注入成功；也可以查看Pendo后台是否接收到页面访问数据。

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