javascript - Google analytics with nextjs 13?

has anyone successfully gotten google analytics to work on NextJS 13?

I've followed this thread: How to implement Google Analytics with NextJS 13? but when I do the same thing on my app, nothing shows up on Google Analytics. I also don't get any errors within the app and the script loads correctly when I inspect the page.

I want to ment in that thread above but I don't have enough reputation :/

has anyone successfully gotten google analytics to work on NextJS 13?

I want to ment in that thread above but I don't have enough reputation :/

Share Improve this question asked May 1, 2023 at 1:26 Tony Chan 511 silver badge3 bronze badges

I am experiencing the same issue. Let me know if you learn anything. – aaronmbmorse Commented Jul 1, 2023 at 14:52

Add a ment |

4 Answers 4

Sorted by: Reset to default 7

Here is full code for Google Analytics on Next.JS 13

install gtag

npm install @types/gtag.js

on .env.production

NEXT_PUBLIC_GA_ID="G-XXXXXXXXX"

on @/lib/gtag.ts

import { usePathname, useRouter } from "next/navigation";
import { useEffect, useRef } from "react";

export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID;

// https://developers.google./analytics/devguides/collection/gtagjs/pages
export const pageview = (url: URL) => {
  window.gtag('config', GA_TRACKING_ID as string, {
    page_path: url,
  });
};

// https://developers.google./analytics/devguides/collection/gtagjs/events
export const event = (
  action: Gtag.EventNames,
  { event_category, event_label, value }: Gtag.EventParams,
) => {
  window.gtag('event', action, {
    event_category,
    event_label,
    value,
  });
};

export const useGtag = () => {
  const pathname = usePathname(); // Get current route

  // Save pathname on ponent mount into a REF
  const savedPathNameRef = useRef(pathname);

  useEffect(() => {
    if (process.env.NODE_ENV === 'development') return;

    const handleRouteChange = (url: URL) => {
      pageview(url);
    };

    if (savedPathNameRef.current !== pathname) {
      handleRouteChange(new URL(pathname, window.location.origin));
      // Update REF
      savedPathNameRef.current = pathname;
    }
  }, [pathname, ]);
};

on ponents/GoogleAnalytics.tsx

'use client'

import Script from 'next/script';
import * as gtag from '@/lib/gtag';

export default function GoogleAnalytics(){

    gtag.useGtag();

    return (
        <>
            {process.env.NODE_ENV !== 'development' && (
            <>
                {/* Global Site Tag (gtag.js) - Google Analytics */}
                <Script
                strategy="afterInteractive"
                src={`https://www.googletagmanager./gtag/js?id=${gtag.GA_TRACKING_ID}`}
                />
                <Script
                id="gtag-init"
                strategy="afterInteractive"
                dangerouslySetInnerHTML={{
                    __html: `
                    window.dataLayer = window.dataLayer || [];
                    function gtag(){dataLayer.push(arguments);}
                    gtag('js', new Date());
                    gtag('config', '${gtag.GA_TRACKING_ID}', {
                        page_path: window.location.pathname,
                    });
                    `,
                }}
                />
            </>
            )} 
        </>
    )
}

on app/layout.tsx

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
    <html lang="ko">
        <GoogleAnalytics />
        <body>
                {children}
        </body>
    </html>
    </>
  )
}

inside app/layout.tsx file, write:

import Script from 'next/script' 
      
<Script async src="https://www.googletagmanager./gtag/js?id=<G-mytag>" strategy="afterInteractive"
                        id='ga_analytics' />

<Script id="google-analytics" strategy="afterInteractive">
       {`
         window.dataLayer = window.dataLayer || [];
         function gtag(){dataLayer.push(arguments);}
         gtag('js', new Date());
         gtag('config', 'G-mytag');
         `}
</Script>

Note: This method is tested with 5+ websites of my clients and works perfectly on every site. I am using nextjs 13.5 + with app-router for all. Thanks

I found this on the Next docs.

https://nextjs/docs/app/api-reference/functions/use-report-web-vitals#sending-results-to-external-systems

and

https://github./GoogleChrome/web-vitals#send-the-results-to-google-analytics

This is my configuration for Next.js 13.4 and Google Analytics 4.

Add this to RootPage:

<Script
    src={`https://www.googletagmanager./gtag/js?id=${process.env.NEXT_PUBLIC_APP_GA_MEASUREMENT_ID}`}
/>
<Script id="google-analytics">
    {`
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', '${process.env.NEXT_PUBLIC_APP_GA_MEASUREMENT_ID}');

    `}
</Script>

Replace the environment variable NEXT_PUBLIC_APP_GA_MEASUREMENT_ID with your own GA4 tag.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Google analytics with nextjs 13? - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)