Next.js Discord

Discord Forum

GTAG manager in next13 doesnt work locally

Unanswered
Bartholomeas posted this in #help-forum
Open in Discord
Hi, how to handle GTag manager in nextjs13?

I cant get it in tagassistant locally (could not connect to localhost)

Thats my implementation:
const Analytics = () => {
  const pathname = usePathname()
  const searchParams = useSearchParams()

  useEffect(() => {
    if (pathname) pageview(pathname)
  }, [pathname, searchParams])

  // if (IS_DEVELOPMENT) 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: `<!-- Google Tag Manager --> (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}'); <!-- End Google Tag Manager -->`,
        }}
      />
    </>
  )
}
export default Analytics



I was doin it with this tutorial:

https://dev.to/valse/how-to-setup-google-tag-manager-in-a-next-13-app-router-website-248p

2 Replies