Google Tag Manager(GTM) 계정 생성하기

먼저 Google Tag Manager 사이트에 접속해 계정을 생성합니다.

🔗 Google Tag Manager 계정 만들기

  1. "계정 생성" 버튼을 클릭
  2. 계정 이름 입력 (예: my-website)
  3. 컨테이너(Container) 이름 입력 (예: my-website.com)
  4. "웹(Web)" 선택 후 생성

image.png

image.png

웹사이트에 GTM 스크립트 추가하기

GTM을 적용하려면 사이트의 <head>와 <body>에 스크립트를 삽입해야 합니다.

Next.js 적용 방법

app/layout.tsx 또는 _app.js 파일에서 GTM 스크립트 추가

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="ko">
      <head>
        {/* GTM 스크립트 추가 */}
        <Script id="gtm-script" strategy="afterInteractive">
          {`
            (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-XXXXXX');
          `}
        </Script>
      </head>
      <body>{children}</body>
    </html>
  );
}

📌 주의: "GTM-XXXXXX" 부분을 실제 GTM 컨테이너 ID로 변경하세요.