반응형
[ 문제 상황 ]
NextJS app router에서는 useRouter 사용을 지양한다. 그냥 GA script만 넣는 것은 상관 없지만, 현재 path에 따라서 이벤트를 주고 있었기 때문에 이를 해결해야 했다.
[ 해결 방법 ]
크게 두 가지 기능이 필요하다. GA script를 넣어주는 것과 path가 달라졌을 때 이벤트를 전송하는 것이다. 두 번째 기능의 코드는 다음과 같다.
declare global {
interface Window {
gtag: (param1: string, param2: string, param3: object) => void;
}
}
export const pageview = url => {
window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
page_path: url,
});
};
export const event = ({ action, params }) => {
window.gtag('event', action, params);
};위 코드가 event를 전달해줄 것이고, 이를 전송하는 부분은 다음과 같이 GaProvider를 만들었다.
"use client";
import { ReactNode, useEffect } from "react";
import { usePathname, useSearchParams } from "next/navigation";
import * as ga from "@/component/common/Ga/ga";
import Script from "next/script";
const GaProvider = ({code, children}: { code: string, children: ReactNode }) => {
const pathname = usePathname();
const searchParams = useSearchParams();
useEffect(() => {
ga.pageView(`${pathname}?${searchParams}`);
}, [pathname, searchParams]);
return (
<>
<Script src={`https://www.googletagmanager.com/gtag/js?id=${code}`}/>
<Script id="google-analytics">
{`
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
`}
</Script>
{children}
</>
);
}
export default GaProvider;여기서 pages directory를 쓸 때와 다른 부분이 보이는데, usePathname, useSearchParams를 사용해서 url을 구하는 부분이다.
이렇게 필요한 컴포넌트를 만들었다면 app/layout.tsx 에서 이를 적용해주면 된다.
import React from "react";
import GaProvider from "@/Ga/GaProvider";
interface LayoutProps {
children: React.ReactNode;
}
const RootLayout = ({children}: LayoutProps) => {
return (
<html>
<body>
<GaProvider code={process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}>
{children}
</GaProvider>
</body>
</html>
)
}
export default RootLayout;경로는 각자 맞게 해주고 배포를 하면 Google Analytics에 실시간 사용자가 표기될 것이다.
[ Reference ]
[NextJS] NextJS Google Analytics 적용하기
Google Analytics 웹사이트의 방문자수, 여러 이벤트를 추적하고 결과를 보기 위해서 googla anayltics 를 사용한다. 이러한 ga를 nextjs 13 버전에 적용하는 방법을 알아보자 STEP 1 - env 에 ga 코드 추가하기
sleepy-it.tistory.com
Functions: useRouter | Next.js
Using App Router Features available in /app
nextjs.org
반응형
'Front-End > NextJS' 카테고리의 다른 글
| [NextJS, Stitches] NextJS 13에서 Stitches 적용하기 (0) | 2023.10.03 |
|---|---|
| [NextJS] NextJS Google Analytics 적용하기 (0) | 2022.12.18 |
| [NextJS] Image background 설정하기 (0) | 2022.07.02 |
| [NextJS] SyntaxError: Unexpected token u in JSON at position 0 - router.query undefiend 해결하기 (0) | 2022.06.28 |
| [NextJS] Next js를 배워보고 느낀 점 (0) | 2022.06.11 |
댓글