In my NextJS application I have added google tag manager embed code like this in a separate component and then I call this component in _app.tsx, but when I add this my https://pagespeed.web.dev/ Total Blocking Time increased. I think google tag manager is loading asynchronously, but not me for me I think. Not sure what wrong I'm doing.
"use client"
import { GTM_ID, pageview } from "@/lib/gtm"
import { usePathname, useSearchParams } from "next/navigation"
import Script from "next/script"
import { useEffect } from "react"
export default function Analytics() {
const pathname = usePathname()
const searchParams = useSearchParams()
useEffect(() => {
if (pathname) {
pageview(pathname)
}
}, [pathname, searchParams])
if (process.env.NODE_ENV !== "production") {
return null
}
return (
<>
<noscript>
<iframe
src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
height="0"
width="0"
style={{ display: "none", visibility: "hidden" }}
/>
</noscript>
<Script
id="gtm-script"
strategy="afterInteractive"
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='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', '${GTM_ID}');
`,
}}
/>
</>
)
}
Can please some help? I'm using NextJS 13.3
Top comments (0)