google analytics 웹사이트 적용하기 (nextjs)

토이프로젝트로 만들었는데 어떻게 유입을 만들어 낼까 고민하다가 유입이 되도 그걸내가 어떻게 알수가 있지? 라는 생각이 들어서 ga 를 적용 해봤다.

 

1. google analytics 에서 속성 생성

2. google analytics 데이터 스트림 생성

3. 코드적용

 google analytics 에서 속성 생성

계정생성 > 설정 > 속성만들기 순서로 진행하면서 사이트 정보 입력해줍니다.

구글 애널리틱스에서 속성(Attribute)은 웹사이트 또는 앱에서 추적하고자 하는 특정 정보를 나타내는 항목입니다. 속성은 웹사이트나 앱에 대한 특정 데이터 세트를 생성하고 유지 관리하는 데 사용됩니다. 예를 들어, 특정 웹사이트의 속성은 사용자의 방문, 페이지뷰, 구매 등과 같은 데이터를 추적할 수 있습니다.

 

google analytics 데이터 스트림 생성

속성만들기가 완료되면 데이터 수집을위한 데이터 스트림을 생성을 해야하고 나는 웹을 선택한후 데이터 스트림을 설정해줬다.
데이터 스트림은 특정한 유형의 데이터에 대한 세부 정보를 포함하는 객체입니다. 예를 들어, 웹 데이터 스트림은 웹사이트에서 추적되는 데이터를 포함하고, 앱 데이터 스트림은 모바일 앱에서 추적되는 데이터를 포함합니다. 각 데이터 스트림은 고유한 스트림 ID를 가지며, 데이터 스트림을 생성하여 특정 유형의 데이터를 구글 애널리틱스에 제공할 수 있습니다.

 

코드적용

현재는 데이터 수집이 활성화 되어 있지 않는데 태크안내에 두가지 탭이 있는데 직접설치를 통해서 코드를 복사해서 넣어줬다.

nextjs _app.tsx 파일에 적용해줬다. https://nextjs.org/docs/messages/next-script-for-ga 참고링크

 

// lib/gtag.ts

export const GA_TRACKING_ID = 'G-T50YX9KW6Q';

export const pageview = (url: any) => {
  window.gtag('config', GA_TRACKING_ID, {
    page_path: url,
  });
};

export const event = ({
  action,
  category,
  label,
  value,
}: {
  action: any;
  category: any;
  label: any;
  value: any;
}) => {
  window.gtag('event', action, {
    event_category: category,
    event_label: label,
    value: value,
  });
};

https://developers.google.com/analytics/devguides/collection/gtagjs/events?hl=ko 

Google 애널리틱스 이벤트 측정  |  웹용 유니버설 애널리틱스(gtag.js)  |  Google Developers

https://developers.google.com/analytics/devguides/collection/analyticsjs?hl=ko 

사이트에 analytics.js 추가  |  웹용 애널리틱스(analytics.js)  |  Google Developers

// _app.tsx
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/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,
            });
          `,
        }}
      />

// _app.tsx
import * as gtag from '../lib/gtag';

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url: any) => {
      gtag.pageview(url);
    };
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return (
    <>
      <Script
        strategy="afterInteractive"
        src={`https://www.googletagmanager.com/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,
            });
          `,
        }}
      />
      <Provider store={store}>
        <Component {...pageProps} />
      </Provider>
    </>
  );
}

 

확인