Next.js v11发布了一个新的Script
组件,该组件具有不同的策略。
建议使用afterInteractive
策略加载Google TagManager。
我已经尝试过了。
// _app.js
import Script from 'next/script';
class MyApp extends App {
public render() {
const { Component, pageProps } = this.props;
return (
<>
<Script 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='+i+dl;f.parentNode.insertBefore(j,f);` +
`})(window,document,'script','dataLayer','GTM-XXXXXXX');`}
</Script>
<Component {...pageProps} />
</>
);
}
}
export default MyApp;
它运行得很好,它加载了Google标签管理器,但问题在于它在每个页面导航上都注入了相同的脚本,导致重复标签。
如何利用新的Script
组件?
src
属性。 - Stephane L