我有一个nextjs应用程序,在_app.js文件中,我根据nextjs文档导入Google Tag Manager:
<Script
id="googleAnalytics0"
src="https://www.googletagmanager.com/gtag/js?id=XXX"
strategy="lazyOnload"
/>
<Script
id="googleAnalytics"
strategy="lazyOnload"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XXX');
`
}}
></Script>
当我做一个内置在chrome中的灯塔测试时,没有任何问题-然而当我做一个Page speed insights测试时,它说google标签管理器阻止了加载。
我试过将strategy=“lazyOnload”改为strategy=“afterInteractive”,但这并没有什么区别。
1条答案
按热度按时间sgtfey8w1#
Google Tag Manager(和Google Analytics)将始终在主线程上运行,因此它将始终在Google Page Speed中引发“主线程阻塞时间”。
Next.js
Script
标记的strategy
属性只改变加载这些脚本的时间。有关详细概述,您可以在浏览器的开发人员工具中使用Performance tab。我写了一篇关于如何在Next.js here中实现GTM和GA的博客文章
如果你在GTM容器中设置了多个标签,你应该密切关注你的网站的性能,多个标签会很快消耗掉你的核心网站的性能。您可以使用GTM服务器端跟踪来解决这个问题。
有关更多信息,请参阅这些链接: