我在应用程序中使用应用程序路由和页面路由，需要为 VWO 添加脚本。 对于带有页面路由的页面，我添加到 _app ： 从“next/script”导入脚本模块。
在 Script 标签上添加了这两个属性： 一个。 id =“vwo代码” b.策略=“交互之前” 3.在“dangerouslySetInnerHTML”属性中添加了脚本。
在带有应用程序路由器的页面中：
在layout.tsx文件中的RootLayout组件的head标签中直接添加了script标签。
在 script 标签上添加了这两个属性： 一个。 id =“vwo代码” b.类型=“文本/javascript” 3.在“dangerouslySetInnerHTML”属性中添加了脚本。
但现在如果可能的话我需要将其提取到一个单独的组件中。根部布局要干净整洁。
layout.tsx 的代码
const RootLayout = ({ children }: PropsWithChildren) => {
return (
<ReactQueryClientProvider>
<html lang="en">
<head>
<Script
id="vwoCode"
type="text/javascript"
dangerouslySetInnerHTML={{
__html: `
<!-- Start VWO Async SmartCode -->
<link rel="preconnect" href="" />
<script >
// code
</script>
<!-- End VWO Async SmartCode -->
`,
}}
/>
</head>
<body>
<ReactQueryProvider>
</ReactQueryProvider>
</body>
</html>
</ReactQueryClientProvider>
);
};
export default RootLayout;
_app.tsx 的代码
const App = ({ Component, pageProps }: AppPropsWithLayout) => {
const getLayout = Component.getLayout || ((page) => <Layout>{page}</Layout>);
return (
<>
<Script
id="vwoCode"
strategy="beforeInteractive"
dangerouslySetInnerHTML={{
__html: `
<!-- Start VWO Async SmartCode -->
<link rel="preconnect" href="" />
<script >
//code
</script>
<!-- End VWO Async SmartCode -->
`,
}}
/>
<AuthProvider>
///
</AuthProvider>
</>
);
};
export default api.withTRPC(App);
如何为脚本创建单独的组件并添加这两个文件？
您可以创建一个组件 VWOScript.tsx，其内容如所附屏幕截图所示。 （请注意：account_id 具有虚拟值，您需要使用您的 account_id 更新该值）。
一旦添加到layout.tsx文件中，VWO SmartCode就不需要添加到_app.tsx中。所以这部分可以安全地跳过。 [在此输入图像描述][1] 可以参考此演示公共存储库以获取示例集成：https://github.com/Ragnarrlothbrok/tailnext-Test/blob/main/app/layout.tsx
