How to use google analytics with next.js app?

penguin_pam

I'm using styled-components with next.js so my styles need to be server-side rendered, hence how can I add google analytics to my website? I checked next.js google analytics example but as I said my _document file is different because of using styled-components. // _document.js import React from 'react' import Document from 'next/document' import { ServerStyleSheet } from 'styled-components' class MyDocument extends Document { static async...

Originally asked by 0xsh on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

Next.js since v11 recommends using their <Script> tag, and the right place to add it is the App component . pages/_app.jsx import React from 'react'; import Script from 'next/script'; const App = ({ Component, pageProps }) => { return ( <> <Script src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx" strategy="afterInteractive" /> <Script id="google-analytics" strategy="afterInteractive"> {` window.dataLayer = window.dataLayer || []; function gtag(){window.dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-xxxxxxxxxx'); `} </Script> <Component {...pageProps} /> </> ); }; export default App; You can see this solution working in nestjs-starter where I'm also...

Full answer by thisismydesign: https://stackoverflow.stackexchange.com/a/62552263 (CC BY-SA 4.0).

Need it done for your business? UphillTech.