最近我将 GTM 集成到了我的 NextJs 项目中。在集成完成之前，我的 Lighthouse 性能得分曾经达到 96 分。集成后，分数降到了38分。有没有一种既高效又不影响网站性能的方式集成GTM呢？
我的集成如下 - 在 _document.tsx 文件中：
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
<script
async
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
defer
/>
<script
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`
}}
/>
</Head>
你可能想这样做
import Script from "next/script";
<Head>
<link rel="shortcut icon" href="/favicon.ico" />
<Script
strategy="afterInteractive"
src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
defer
/>
<Script
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`
}}
/>
</Head>
考虑将“afterInteractive”切换为“beforeInteractive”并且 如果这没有帮助，您可以将 gtag 脚本放在页脚中
您还可以使用lazyOnload，nextjs将在获取页面上的所有资源后加载脚本。
<Script
strategy="lazyOnload"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
page_path: window.location.pathname,
});
`
}}
/>