Ste*_*eve 15 javascript google-tag-manager reactjs next.js next.js13
从这个答案和这篇文章中，我添加了一个，<Script>以便将 Google 跟踪代码管理器添加到我的 NextJS 网站：
components/layout.tsx:
import React from "react";
import Head from "next/head";
import Script from 'next/script'
<!-- skip some code -->
<Head>
<link rel="preconnect" href="https://cdn.sanity.io/" />
<link rel="dns-prefetch" href="https://cdn.sanity.io//" />
</Head>
<Script id="google-tag-manager" strategy="afterInteractive">
{
(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=%27+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-xxxx');
}
</Script>
但是，该脚本不存在于前端。
components/layout.tsx<Head>是我的网站上唯一带有或 的文件<head>。
Google 跟踪代码管理器<noscript>位于前端，用于app/layout.tsx:
<body className="antialiased text-gray-800 dark:bg-black dark:text-gray-400">
<noscript
dangerouslySetInnerHTML={{
__html: <iframe src="https://www.googletagmanager.com/ns.html?id=xxxx" height="0" width="0" style="display: none; visibility: hidden;" />,
}}
/>
所以我知道我已经保存了所有更改。
帮助表示赞赏。
更新
我是 NextJS 的新手，所有这些代码都来自 NextJS/Sanity 模板，该模板在本地和 Vercel 临时站点上运行。
我唯一的问题是在发布到我的域之前无法正确加载 Google 跟踪代码管理器。
_app.js项目中没有。
有/app/(website)/layout.tsx：
import "@/styles/tailwind.css";
import { Providers } from "./providers";
import { cx } from "@/utils/all";
import { Inter, Lora } from "next/font/google";
const inter = Inter({
subsets: ["latin"],
variable: "--font-inter"
});
const lora = Lora({
subsets: ["latin"],
variable: "--font-lora"
});
export default function RootLayout({
children
}: {
children: React.ReactNode;
}) {
return (
<html
lang="en"
suppressHydrationWarning
className={cx(inter.variable, lora.variable)}>
<body className="antialiased text-gray-800 dark:bg-black dark:text-gray-400" >
<noscript
dangerouslySetInnerHTML={{
__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxx" height="0" width="0" style="display: none; visibility: hidden;" />`,
}}
/>
<Providers>{children}</Providers>
</body>
</html>
);
}
这是/app/(website)/providers.tsx：
"use client";
import { ThemeProvider } from "next-themes";
export function Providers({ children }) {
return (
<ThemeProvider attribute="class" defaultTheme="light">
{children}
</ThemeProvider>
);
}
如果我在 VSCode 中搜索RootLayout，没有任何内容调用它，所以我对哪个是主文件有点困惑。
如果您想访问 Github 存储库，我可以提供。
小智 16
查看新的NextJs第三方组件
在观看NextJS Conf2023后，他们发布了@next/third-parties，因为人们在过去几个月遵循Google Analytics 文档后报告，它在 Lighhouse 上造成了糟糕的性能问题。
遵循NextJs文档指南后，我能够在 NextJs 14 上完全设置 Google Analytics。
1. 要为所有路由加载 Google 跟踪代码管理器，请将该组件直接包含在根布局中：
app/layout.tsx
import { GoogleTagManager } from '@next/third-parties/google'
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="en">
<body>{children}</body>
<GoogleTagManager gtmId="GTM-XYZ" />
</html>
)
}
2. 要加载单个路由的 Google 跟踪代码管理器，请将该组件包含在您的页面文件中：
app/page.js
import { GoogleTagManager } from '@next/third-parties/google'
export default function Page() {
return <GoogleTagManager gtmId="GTM-XYZ" />
}
注意： 这是官方NextJs文档。
在位于 /pages 目录中的_document.js文件中添加以下代码。另外，如果没有任何_document.js文件，请创建它。
现在添加 Google 跟踪代码管理器的功能：
import Document, { Html, Head, Main, NextScript } from "next/document";
function MyDocument() {
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=%27+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GOOGLE_TAG_MANAGER_ID');
`,
}}
/>
</Head>
<body>
<noscript
dangerouslySetInnerHTML={{
__html: `
<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-xxxx"
height="0" width="0" style="display:none;visibility:hidden"></iframe>
`,
}}
/>
<Main />
<NextScript />
</body>
</Html>
);
}
export default MyDocument;
现在您可以检查该功能是否正常工作，如果不起作用请告诉我。我一定会帮忙的。
确保您实际上在_app.js文件中使用布局：
// _app.js
import '../styles/globals.css';
import Layout from './layout';
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
);
}
export default MyApp;
在您的layout.tsx中，您可以按如下方式加载脚本：
// layout.js
import Head from 'next/head';
export default function Layout({ children }) {
return (
<>
<Head>
<link rel="preconnect" href="https://cdn.sanity.io/" />
<link rel="dns-prefetch" href="https://cdn.sanity.io//" />
</Head>
<script
id="google-tag-manager"
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=%27+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-xxxx');`,
}}
/>
<main>{children}</main>
</>
);
}
请注意，我没有使用NextScript组件，因为文档似乎没有提及有关在该组件中使用子组件的任何内容。
另请确保您没有启用任何删除跟踪相关脚本的浏览器扩展。您可以在不同的浏览器或隐身模式下进行测试。
| 归档时间： |
|
| 查看次数： |
15795 次 |
| 最近记录： |