Next.js

请使用根布局，让追踪器在每个路由中加载。

请从“设置 → 追踪”复制完整的代码片段。 以下示例重点说明代码在各框架中的放置位置。请在安装的代码片段中保留自动生成的属性，例如 data-domain 。有关所有选项，请参阅追踪器配置；如果同一访客会在不同子域名之间移动，请参阅子域名追踪。

应用路由器

打开 app/layout.tsx 并添加 next/script。

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://talivia.com/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

请替换网站编号。使用 Talivia“设置 → 数据追踪”中该网站对应的编号。

页面路由器

如果应用使用 pages/_document.tsx，请将脚本放在 </body> 之前。

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <script defer src="https://talivia.com/script.js" data-website-id="YOUR_WEBSITE_ID" />
        <NextScript />
      </body>
    </Html>
  );
}

验证

运行应用并打开一个页面，然后返回 Talivia，确认出现了新会话。

请使用根布局，让追踪器在每个路由中加载。

应用路由器

打开 app/layout.tsx 并添加 next/script。

import Script from 'next/script';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://talivia.com/script.js"
          data-website-id="YOUR_WEBSITE_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

请替换网站编号。使用 Talivia“设置 → 数据追踪”中该网站对应的编号。

页面路由器

如果应用使用 pages/_document.tsx，请将脚本放在 </body> 之前。

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

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Main />
        <script defer src="https://talivia.com/script.js" data-website-id="YOUR_WEBSITE_ID" />
        <NextScript />
      </body>
    </Html>
  );
}

验证

运行应用并打开一个页面，然后返回 Talivia，确认出现了新会话。